@charset "UTF-8";

/*-------------------------
__top_style
-------------------------*/

#main_img{ width: 100%; height: 100vh; height: calc(var(--vh, 1vh) * 100); position: relative;}
#main_img .inner{ width: 100%; height: 100%;}
#main_img .inner ul.slide{ z-index: 0; position: relative;}
#main_img .inner ul.slide:after{ content: ''; display: block; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; height: 100%; background-image: url(../images/dot.png); z-index: 1;}
#main_img .inner ul.slide li{background-repeat: no-repeat; background-size: cover; background-position: center; width: 100%; height: 100vh; margin: 0; text-decoration: none;}
#main_img .inner ul.slide li:nth-child(1){ background-image: url(../images/main_img01.jpg);}
#main_img .inner ul.slide li:nth-child(2){ background-image: url(../images/main_img02.jpg);}
#main_img .inner ul.slide li:nth-child(3){ background-image: url(../images/main_img03.jpg);}
#main_img .inner .mv_comment{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; font-size: 2em;}
#main_img .inner .mv_comment span{ position: relative; display: inline-block; padding: 0 70px;}
#main_img .inner .mv_comment span:before,
#main_img .inner .mv_comment span:after { content: ''; position: absolute; top: 50%; display: inline-block; width: 60px; height: 1px; background-color: #fff;}
#main_img .inner .mv_comment span:before { left: 0;}
#main_img .inner .mv_comment span:after { right: 0;}
#main_img .inner .mv_under{ text-align: center; position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 16em; width: 100%;}

@media screen and (min-width: 768px) {

}

@media screen and (max-width: 767px) {
#main_img .inner .mv_comment{ width: 100%; text-align: center; font-size: 1.7em; line-height: 1.5;}
#main_img .inner .mv_comment span{ padding: 0 50px;}
#main_img .inner .mv_comment span:before,
#main_img .inner .mv_comment span:after { width: 40px;}
#main_img .inner .mv_under{ text-align: center; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 9em; width: 100%;}
}

@media screen and (max-width:374px){
#main_img .inner .mv_under{ font-size: 8em;}
}

/*======================== コンセプト ========================*/


#consept{ padding: 170px 0; box-sizing: border-box; position: relative;}
#consept .green{ width: 35%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(-25deg, #283c28 0%, #536353 100%); z-index: 0;}
#consept .green > span{ display: block; width: 100%; height: 100%; position: relative;}
#consept .green > span > span{ position: absolute; bottom: 0; right: 0; width: 490px; height: 560px;}
#consept .green > span > span img{ mix-blend-mode: multiply;}
#consept .inner{ width: 100%; max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;}
#consept .inner .consept_img{ max-width: 530px; width: 50%; margin-right: 120px; position: relative; z-index: 1;}
#consept .inner .consept_img img{ width: 100%; height: auto;}
#consept .inner .consept_com{ max-width: 530px; width: 50%;}
#consept .inner .consept_com h1{ font-size: 4.8em; line-height: 1.4; color: #947d3c; margin-bottom: 30px; position: relative;}
#consept .inner .consept_com h1 span{ display: inline-block; position: relative; z-index: 1;}
#consept .inner .consept_com h1:after{ content: ''; display: block; width: 120px; height: 120px; background-color: #f4f2eb; position: absolute; top: -50px; left: -50px; z-index: 0;}
#consept .inner .consept_com p{ font-size: 1.4em; line-height: 2.5em;}

@media screen and (min-width: 768px) {

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

#consept{ padding: 60px 0 30px;}
#consept .green{ width: 100%; height: 200px;}
#consept .green > span{ display: block; width: 100%; height: 100%; position: relative;}
#consept .green > span > span{ position: absolute; top: 0; right: 0; width: 320px; height: 165px;}
#consept .inner{ display: block; margin-top: 0;}
#consept .inner .consept_img{ width: calc(100% - 40px); margin: 0 auto 30px;}
#consept .inner .consept_com{ max-width: 100%; width: 100%; text-align: center;}
#consept .inner .consept_com h1{ display: inline-block; font-size: 2.8em; margin-bottom: 20px;}
#consept .inner .consept_com h1:after{ content: ''; display: block; width: 60px; height: 60px; background-color: #f4f2eb; position: absolute; top: -20px; left: -20px; z-index: 0;}
#consept .inner .consept_com p{ font-size: 1.3em; line-height: 1.8em;}

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

}

/*======================== トピックス ========================*/


#topics{ padding: 120px 0 170px; box-sizing: border-box; position: relative;}
#topics:before{ content: ''; display: inline-block; width: 570px; height: 460px; background-image: url(../images/topics_back01@2x.png); background-size: cover; position: absolute; top: 0; left: 0; z-index: 0;}
#topics:after{ content: ''; display: inline-block; width: 570px; height: 460px; background-image: url(../images/topics_back02@2x.png); background-size: cover; position: absolute; bottom: 0; right: 0; z-index: 0;}
#topics .inner{ max-width: 1200px; margin: 0 auto; padding: 0 50px; box-sizing: border-box; position: relative; z-index: 1;}
.contents_title{ text-align: center;}
.contents_title span{ display: inline-block; width: 100%; max-width: 600px; margin-bottom: 30px;}
.contents_title span img{ width: 100%; height: auto;}
.contents_title h2{ font-size: 1.6em;}
#topics .inner .contents_title{ margin-bottom: 35px;}
#topics .inner #topics_box{ display: flex;}
#topics .inner #topics_box #topics_realestate,
#topics .inner #topics_box #topics_event{ width: 50%; padding: 50px; box-sizing: border-box;}
#topics .inner #topics_box h3{ font-size: 2.4em; position: relative; margin-bottom: 45px;}
#topics .inner #topics_box h3 span{ display: inline-block; position: relative; z-index: 1;}
#topics .inner #topics_box h3:after{ content: ''; display: block; width: 120px; height: 120px; background-color: #f4f2eb; position: absolute; top: -50px; left: -50px; z-index: 0;}
#topics .inner #topics_box ul{ position: relative; z-index: 1;}
#topics .inner #topics_box ul li{ margin-bottom: 30px;}
#topics .inner #topics_box ul li p{ font-size: 1.4em; line-height: 1.7;}
#topics .inner #topics_box ul li p.day{ color: #947d3c;}
#topics .inner #topics_box ul li p.detail{}
#topics .inner #topics_box ul li p.detail a{ color: #000;}

.more_btn{ text-align: center;}
.more_btn a{ display: inline-block; text-decoration: none;}
.more_btn a span{ font-size: 1.6em; font-weight: 600; letter-spacing: .1em; text-align: center; line-height: 50px; width: 220px; height: 50px; color: #947d3c; background: #FFF; margin: auto; border:1px solid #947d3c; position: relative; display: block; overflow: hidden;}
.more_btn a span:after { content: ''; display: inline-block; width: 0; height: 0; border-style: solid; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 6px solid #947d3c; border-right: 0; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); transition: all 0.2s;}

@media screen and (min-width: 768px) {

#topics .inner #topics_box ul li p.detail a{ transition: .2s;}
#topics .inner #topics_box ul li p.detail a:hover{ opacity: 0.4;}
.more_btn a:hover span{ transition: 0.5s; color: #fff; background-color: #947d3c;}
.more_btn a:hover span:after { left: 25px; border-left: 6px solid #fff;}

}

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

#topics{ padding: 60px 0;}
#topics:before{ width: 160px; height: 130px; background-image: url(../images/topics_back01_sp@2x.png);}
#topics:after{ width: 160px; height: 130px; background-image: url(../images/topics_back02_sp@2x.png);}
#topics .inner{ padding: 0 20px;}
.contents_title span{ font-size: 4em; margin-bottom: 5px;}
.contents_title h2{ font-size: 1.4em;}
#topics .inner #topics_box{ display: block;}
#topics .inner #topics_box #topics_realestate{ margin-bottom: 50px;}
#topics .inner #topics_box #topics_realestate,
#topics .inner #topics_box #topics_event{ width: 100%; padding: 0;}
#topics .inner #topics_box h3{ font-size: 1.6em; margin-bottom: 20px;}
#topics .inner #topics_box h3:after{ width: 40px; height: 40px; top: -20px; left: -20px; z-index: 0;}
#topics .inner #topics_box ul{ max-height: 200px; overflow-y: scroll; padding-right: 10px; box-sizing: border-box; margin-bottom: 20px;}
#topics .inner #topics_box ul li{ margin-bottom: 15px;}
#topics .inner #topics_box ul li p{ font-size: 1.2em; line-height: 1.5;}

.more_btn a span{ font-size: 1.3em; line-height: 40px; width: 160px; height: 40px;}

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

}


/*======================== インスタグラム ========================*/


#instagram{ background: linear-gradient(-25deg, #283c28 0%, #536353 100%); position: relative;}
#instagram:before{ content: ''; display: inline-block; width: 750px; height: 350px; background-image: url(../images/instagram_back@2x.png); background-size: cover; position: absolute; top: 0; right: 0; mix-blend-mode: multiply; z-index: 0;}
#instagram .inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 120px 50px; box-sizing: border-box;}
#instagram .inner .instagram_banner{ width: 100%; position: relative; z-index: 1;}
#instagram .inner .instagram_banner a{}
#instagram .inner .instagram_banner a img{ width: 100%; height: auto;}

@media screen and (min-width: 768px) {
#instagram .inner .instagram_banner a img{ transition: .2s;}
#instagram .inner .instagram_banner a:hover img{ opacity: 0.7;}
}

@media screen and (max-width: 767px) {
#instagram:before{ content: ''; display: inline-block; width: 320px; height: 105px; background-image: url(../images/instagram_back_sp@2x.png); top: auto; bottom: 0; left: 0;}
#instagram .inner{ padding: 60px 20px;}
}

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

}


/*======================== お客様の声 ========================*/


#voice{ background-color: #f4f2eb;}
#voice .inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 120px 50px; box-sizing: border-box; text-align: center;}
#voice .inner .contents_title{ margin-bottom: 70px;}
#voice .inner .intro_text{ font-size: 1.4em; line-height: 2em; margin-bottom: 70px;}
#voice .inner .voice_link{ display: flex;}
#voice .inner .voice_link .voice_btn{ width: 50%; height: 260px; position: relative; overflow: hidden;}
#voice .inner .voice_link .voice_btn a{ display: inline-block; width: 100%; height: 100%; background-size: cover; background-position: center; color: #fff; text-decoration: none; }
#voice .inner .voice_link .voice_btn a:before{ content: ''; display: block; width: 100%; height: 100%; background-image: url(../images/dot.png); position: relative; z-index: 1;}
#voice .inner .voice_link .voice_btn a .voice_btn_text{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;}
#voice .inner .voice_link .voice_btn a .voice_btn_text .title{ font-size: 2.4em; margin-bottom: 45px;}
#voice .inner .voice_link .voice_btn a .voice_btn_text .more_btn{}
#voice .inner .voice_link .voice_btn a .voice_btn_text .more_btn p{ display: inline-block; text-decoration: none;}
#voice .inner .voice_link .voice_btn a .voice_btn_text .more_btn p span{ font-size: 1.6em; font-weight: 600; letter-spacing: .1em; text-align: center; line-height: 50px; width: 220px; height: 50px; color: #fff; margin: auto; border:1px solid #fff; position: relative; display: block; overflow: hidden;}
#voice .inner .voice_link .voice_btn a .voice_btn_text .more_btn p span:after { content: ''; display: inline-block; width: 0; height: 0; border-style: solid; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 6px solid #fff; border-right: 0; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); transition: all 0.2s;}

@media screen and (min-width: 768px) {
#voice .inner .voice_link .voice_btn a img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 0; transition: transform .4s ease;}
#voice .inner .voice_link .voice_btn a:hover img{ transform: translate(-50%,-50%) scale(1.2,1.2); transition: 0.5s;}
#voice .inner .voice_link .voice_btn a:hover .voice_btn_text .more_btn p span{ transition: 0.5s; color: #947d3c; background-color: #fff;}
#voice .inner .voice_link .voice_btn a:hover .voice_btn_text .more_btn p span:after { left: 25px; border-left: 6px solid #947d3c;}
}

@media screen and (max-width: 767px) {
#voice .inner{ padding: 60px 20px;}
#voice .inner .contents_title{ margin-bottom: 25px;}
#voice .inner .intro_text{ font-size: 1.3em; line-height: 1.8em; margin-bottom: 30px;}
#voice .inner .voice_link{ display: block;}
#voice .inner .voice_link .voice_btn{ width: 100%; height: 160px;}
#voice .inner .voice_link .voice_btn a img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: auto;}
#voice .inner .voice_link .voice_btn a .voice_btn_text .title{ font-size: 1.8em; margin-bottom: 25px;}
#voice .inner .voice_link .voice_btn a .voice_btn_text .more_btn p span{ font-size: 1.3em; width: 160px; line-height: 40px; height: 40px;}
}

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

}


/*======================== 昼の顔、夜の顔 ========================*/

#day_night{ width:100%; margin:0 auto; text-align:center; padding:0; position: relative;display: flex; justify-content: space-between; position: relative; background: #fff;}
/*コンテンツ*/
.container{ width: 0;}
.container div{ padding-top: 100vh;}
.container div:last-child { padding-bottom: 50vh;}
.container div h2{  font-size: 3rem;  text-align:left;}
.container div p{ margin-top: 30px; text-align:left; line-height:170%; }
/*イメージ*/
.scroll_container { width: 100%; height: 100vh; display: flex; align-items: center; position: sticky; position: -webkit-sticky; top:0;}
/*.scroll_container img { max-width: 100%; height: auto;}*/
.scroll_container > div { height:100%; margin: auto; display: block; visibility: hidden; position: absolute; top: 0;bottom: 0; transition: .8s !important; opacity: 0;}
.scroll_container > div:first-child,
.scroll_container > div.active { visibility: visible; opacity: 1;}
/*内容*/
.scroll_area1,
.scroll_area2,
.scroll_area3{ width: 100%; height: 100vh;}
.dn_box{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 50px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: left;}
.dn_box .dn_img{ max-width: 530px; width: 50%; margin-right: 120px; position: relative; /*z-index: 1;*/}
.dn_box .dn_img img{ width: 100%; height: auto;}
.dn_box .dn_com{ max-width: 530px; width: 50%;}
.dn_box .dn_com .go_title{ font-size: 4.8em; line-height: 1.4; color: #947d3c; margin-bottom: 30px; position: relative;}
.dn_box .dn_com .go_title span{ display: inline-block; position: relative; /*z-index: 1;*/}
.dn_box .dn_com .go_title:before{ content: ''; display: block; width: 120px; height: 120px; background-color: #f4f2eb; position: absolute; top: -50px; left: -50px;}
.dn_box .dn_com p{ font-size: 1.4em; line-height: 2.5em; margin-bottom: 40px;}
.dn_box .voice_btn{}
.dn_box .voice_btn a{ display: inline-block; text-decoration: none;}
.dn_box .voice_btn a span{ font-size: 1.6em; font-weight: 600; letter-spacing: .1em; text-align: center; line-height: 50px; width: 220px; height: 50px; margin: auto; position: relative; display: block; overflow: hidden; transition: 0.5s;}
.dn_box .voice_btn a span:after { content: ''; display: inline-block; width: 0; height: 0; border-style: solid; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-right: 0; position: absolute; left: 20px; top: 50%;}
#day_box,
#night_box{ width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; top: 0; position: relative; overflow: hidden;}
#day_box{ width: 100%; height: 100vh; top: 0; background-color: #fff;}
#day_box .dn_box .voice_btn a span{ color: #947d3c; border:1px solid #947d3c; background: #FFF;}
#day_box .dn_box .voice_btn a span:after{ border-left: 6px solid #947d3c;}
#night_box{ width: 100%; height: 100vh; background-color: #001923;}
#night_box .dn_box .dn_com .go_title{ color: #c9b48c;}
#night_box .dn_box .dn_com .go_title:before{ background-color: #243e49;}
#night_box .dn_box .dn_com p{ color: #fff;}
#night_box .dn_box .voice_btn a{ background-color: #001923;}
#night_box .dn_box .voice_btn a span{ color: #fff; border:1px solid #fff;}
#night_box .dn_box .voice_btn a span:after{ border-left: 6px solid #fff;}
.btm_text{ width: 100%; max-width: 900px; height: auto;position: absolute; bottom: 0; right: 0;}
.btm_text img{ width: 100%; height: auto;}

@media screen and (min-width: 768px) {
.dn_box .voice_btn a span:after{ transform: translateY(-50%); transition: all 0.2s;}
#day_box .dn_box .voice_btn a:hover span{ background-color: #947d3c; color: #fff;}
#day_box .dn_box .voice_btn a:hover span:after{ left: 25px; border-left: 6px solid #fff;}
#night_box .dn_box .voice_btn a:hover span{ background-color: #fff; color: #001923;}
#night_box .dn_box .voice_btn a:hover span:after{ left: 25px; border-left: 6px solid #001923;}
}

@media screen and (max-width: 767px) {
.dn_box{ padding: 0 20px; display: block;}
.dn_box .dn_img{ max-width: 100%; width: 100%; margin-right: 0; margin-bottom: 20px;}
.dn_box .dn_com{ max-width: 100%; width: 100%; text-align: center;}
.dn_box .dn_com .go_title{ display: inline-block; font-size: 2.2em; line-height: 1.4; margin:0 auto 15px; text-align: center;}
.dn_box .dn_com .go_title span{ display: inline-block; position: relative; z-index: 1;}
.dn_box .dn_com .go_title:before{ content: ''; display: block; width: 40px; height: 40px; top: -10px; left: -10px; z-index: 0;}
.dn_box .dn_com p{ font-size: 1.1em; line-height: 1.7em; margin-bottom: 30px;}
.dn_box .voice_btn{ text-align: center;}
.dn_box .voice_btn a{ display: inline-block; text-decoration: none;}
.dn_box .voice_btn a span{ font-size: 1.3em; line-height: 40px; width: 160px; height: 40px;}
.dn_box .btm_text{ width: 100%;}
}

#party{ width: 100%; height: 100vh; align-items: center; justify-content: center; position: -webkit-sticky; position: sticky; top: 0; background-color: #fff; z-index: 100; text-align: left; overflow: hidden;}
#party .inner{ display: flex; align-items: center;}
#party .inner .party_image{ width: 50%; height: 100vh;}
#party .inner .party_image img{ width: 100%; height: 100vh; object-fit: cover;}
#party .inner .party_text{ width: calc(50% - 120px); margin-left: 120px;}
#party .inner .party_text .go_title{ font-size: 3.6em; line-height: 1.4; color: #947d3c; margin-bottom: 30px;}
#party .inner .party_text .go_title span{ display: inline-block; position: relative; z-index: 1;}
#party .inner .party_text .go_title span:after{ content: ''; display: block; width: 120px; height: 120px; background-color: #f4f2eb; position: absolute; top: -50px; left: -50px; z-index: -1;}
#party .inner .party_text .intro_text{ font-size: 1.4em; line-height: 2.5em; margin-bottom: 40px;}
#party .inner .party_text .reservation_btn{ margin-bottom: 20px;}
#party .inner .party_text .reservation_btn a{ display: inline-block; text-decoration: none;}
#party .inner .party_text .reservation_btn a span{ font-size: 1.6em; font-weight: 600; text-align: center; line-height: 50px; width: 250px; height: 50px; margin: auto; position: relative; display: block; overflow: hidden; transition: 0.5s; color: #947d3c; border:1px solid #947d3c; background: #FFF;}
#party .inner .party_text .reservation_btn a span:after{ content: ''; display: inline-block; width: 0; height: 0; border-style: solid; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-right: 0; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); border-left: 6px solid #947d3c;}
#party .inner .party_text .attention{ font-size: 1.4em; line-height: 1.5em;}

@media screen and (min-width: 768px) {
#party .inner .party_text .reservation_btn a:hover span{ background-color: #947d3c; color: #fff;}
#party .inner .party_text .reservation_btn a span:after{ transition: all 0.2s;}
#party .inner .party_text .reservation_btn a:hover span:after{ left: 25px; border-left: 6px solid #fff;}
}

@media screen and (max-width: 767px) {
#party{ width: 100%;}
#party .inner{ display: block;}
#party .inner .party_image{ width: 100%; height: 40vh; overflow: hidden;}
#party .inner .party_image img{ width: 100%; height: 100%; object-fit: cover;}
#party .inner .party_text{ width: 100%; height: 60vh; padding: 60px 0; margin-left: 0; text-align: center;}
#party .inner .party_text .go_title{ font-size: 2em; margin-bottom: 15px;}
#party .inner .party_text .go_title span:after{ content: ''; display: block; width: 60px; height: 60px; background-color: #f4f2eb; position: absolute; top: -30px; left: -30px; }
#party .inner .party_text .intro_text{ font-size: 1.3em; line-height: 1.8em; margin-bottom: 15px;}
#party .inner .party_text .reservation_btn a span{ font-size: 1.3em; line-height: 40px; width: 160px; height: 40px;}
#party .inner .party_text .attention{ font-size: 1.3em; line-height: 1.8em;}
}

.scroll_down { position: relative; width: 100%; height: 100vh; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover;}
.scroll_down:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%;height: 80%;background: linear-gradient(180deg,rgba(#000, 0) 0, rgba(#000, .8) 80%, rgba(#000, .8) 100%);}
.scroll_down span { display: inline-block; position: absolute; right: 0; bottom: 0; left: 0; width: 13px; padding: 10px 10px 80px; color: #000; font-size: 1.2em; font-family: 'Josefin Sans', sans-serif; line-height: 1; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; writing-mode: vertical-lr; transition: .2s; overflow: hidden; margin: auto;}
.scroll_down span:before { content: ''; position: absolute; bottom: 0; left: 50%; width: 2px; height: 70px; background: #bbb;}
.scroll_down span:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 2px; height: 70px; background: #000;}
.scroll_down span:hover { opacity: .5;}
#type01 span:after,
#type02 span:after{ animation: sdl01 1.5s cubic-bezier(1, 0, 0, 1) infinite;}

@keyframes sdl01 {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

#night_box .scroll_down:after{ background: linear-gradient(180deg,rgba(#fff, 0) 0, rgba(#fff, .8) 80%, rgba(#fff, .8) 100%);}
#night_box .scroll_down span { color: #fff;}
#night_box .scroll_down span:after { background: #fff;}

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

.scroll_down span{ left: 20px; right: auto; font-size: 1em; padding: 10px 10px 60px;}
.scroll_down span:before{ height: 50px;}
.scroll_down span:after{ height: 50px;}

}

/*======================== 日吉 ========================*/

#hiyoshitown{ text-align: center; background-image: url(../images/hiyoshi.jpg); background-size: cover; background-position: center; background-color: #000;}
#hiyoshitown .inner{ width: 100%; margin: 0 auto; padding: 150px 50px; box-sizing: border-box; background-image: url(../images/dot.png);}
#hiyoshitown .inner p{ font-size: 2.4em; line-height: 2em; color: #fff; margin-bottom: 50px; text-shadow: 3px 4px 4px rgba(0, 0, 0, 0.8);}
#hiyoshitown .inner .hiyoshi_btn{}
#hiyoshitown .inner .hiyoshi_btn a{ display: inline-block; text-decoration: none;}
#hiyoshitown .inner .hiyoshi_btn a span{ font-size: 1.6em; font-weight: 600; letter-spacing: .1em; text-align: center; line-height: 50px; width: 340px; height: 50px; color: #fff; margin: auto; border:1px solid #fff; position: relative; display: block; overflow: hidden; transition: 0.5s; background-color: rgba(0,0,0,0.4)}
#hiyoshitown .inner .hiyoshi_btn a span:after { content: ''; display: inline-block; width: 0; height: 0; border-style: solid; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 6px solid #fff; border-right: 0; position: absolute; left: 20px; top: 50%;}

@media screen and (min-width: 768px) {
#hiyoshitown .inner .hiyoshi_btn a span:after{ transform: translateY(-50%); transition: all 0.2s;}
#hiyoshitown .inner .hiyoshi_btn a:hover span{ background-color: #fff; color: #000;}
#hiyoshitown .inner .hiyoshi_btn a:hover span:after { left: 25px; border-left: 6px solid #000;}
}

@media screen and (max-width: 767px) {
#hiyoshitown{ background-image: url(../images/hiyoshi_sp.jpg);}
#hiyoshitown .inner{ padding: 60px 20px;}
#hiyoshitown .inner p{ font-size: 1.4em; line-height: 2em; margin-bottom: 25px;}
#hiyoshitown .inner .hiyoshi_btn a span{ font-size: 1.3em; line-height: 40px; width: 250px; height: 40px;}
}

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

}


/*======================== 物件検索 ========================*/

#estate_search{}
#estate_search .inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 120px 50px; box-sizing: border-box;}
#estate_search .inner .contents_title{ margin-bottom: 35px;}
#estate_search .inner .search_box{ margin-bottom: 80px;}
#estate_search .inner .search_box a{ display: block;}
#estate_search .inner .search_box .syubetsu_btn ul li a{ display: block; text-decoration: none; color: #947d3c; width: 100%; height: 100%; position: relative;}
#estate_search .inner .search_box .syubetsu_btn ul li a .icon_box{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 2.2em; display: block; display: flex; justify-content: center; align-items: center; width: 100%;}
#estate_search .inner .search_box .syubetsu_btn ul li a .icon_box p{ order: 2; margin-left: 20px;}
#estate_search .inner .search_box .syubetsu_btn ul li a .icon_box .icon{ order: 1;}
#estate_search .inner .search_box .syubetsu_btn ul li a .roupe{ position: absolute; bottom: 10px; right: 10px; width: 21px; height: 21px;}
#estate_search .inner .search_box .syubetsu_btn ul li a .roupe img{ width: 100%; height: auto;}
#estate_search .inner .search_box .syubetsu_btn ul li:nth-child(1) a .icon_box{ display: block;}
#estate_search .inner .search_box .syubetsu_btn ul li:nth-child(1) a .icon_box p{ order: 1; margin-left: 0;}
#estate_search .inner .search_box .syubetsu_btn ul li:nth-child(1) a .icon_box .icon{ order: 2;}
#estate_search .inner .search_box .mysearch{ margin-bottom: 30px;}
#estate_search .inner .search_box .mysearch ul{ display: flex; justify-content: center;}
#estate_search .inner .search_box .mysearch ul li{ width: 150px; height: 30px; text-align: center;}
#estate_search .inner .search_box .mysearch ul li:nth-child(1){ margin-right: 20px;}
#estate_search .inner .search_box .mysearch ul li a{ display: block; font-size: 1.5em; line-height: 30px; color: #000; text-decoration: none; border: 1px solid #ddd; box-sizing: border-box; transition: .2s;}

#estate_search .inner .estate_link{ display: flex; text-align: center;}
#estate_search .inner .estate_link .estate_btn{ width: 50%; height: 260px; position: relative; overflow: hidden;}
#estate_search .inner .estate_link .estate_btn a{ display: inline-block; width: 100%; height: 100%; background-size: cover; background-position: center; color: #fff; text-decoration: none; }
#estate_search .inner .estate_link .estate_btn a:before{ content: ''; display: block; width: 100%; height: 100%; background-image: url(../images/dot.png); position: relative; z-index: 1;}
#estate_search .inner .estate_link .estate_btn a .estate_btn_text{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;}
#estate_search .inner .estate_link .estate_btn a .estate_btn_text .title{ font-size: 2.4em; margin-bottom: 45px;}
#estate_search .inner .estate_link .estate_btn a .estate_btn_text .more_btn{}
#estate_search .inner .estate_link .estate_btn a .estate_btn_text .more_btn p{ display: inline-block; text-decoration: none;}
#estate_search .inner .estate_link .estate_btn a .estate_btn_text .more_btn p span{ font-size: 1.6em; font-weight: 600; letter-spacing: .1em; text-align: center; line-height: 50px; width: 220px; height: 50px; color: #fff; margin: auto; border:1px solid #fff; position: relative; display: block; overflow: hidden; transition: 0.5s;}
#estate_search .inner .estate_link .estate_btn a .estate_btn_text .more_btn p span:after { content: ''; display: inline-block; width: 0; height: 0; border-style: solid; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 6px solid #fff; border-right: 0; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); transition: all 0.2s;}


@media screen and (min-width: 768px) {
#estate_search .inner .search_box .syubetsu_btn ul{ display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(4, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; height: 320px;}
#estate_search .inner .search_box .syubetsu_btn ul li{ box-sizing: border-box;}
#estate_search .inner .search_box .syubetsu_btn ul li:nth-child(1){ grid-area: 1 / 1 / 5 / 3; border: 1px solid #947d3c; text-align: center;}
#estate_search .inner .search_box .syubetsu_btn ul li:nth-child(2){ grid-area: 1 / 3 / 3 / 6; border-top: 1px solid #947d3c; border-right: 1px solid #947d3c;}
#estate_search .inner .search_box .syubetsu_btn ul li:nth-child(3){ grid-area: 1 / 6 / 3 / 9; border-top: 1px solid #947d3c; border-right: 1px solid #947d3c;}
#estate_search .inner .search_box .syubetsu_btn ul li:nth-child(4){ grid-area: 3 / 3 / 5 / 6; border-top: 1px solid #947d3c; border-right: 1px solid #947d3c; border-bottom: 1px solid #947d3c;}
#estate_search .inner .search_box .syubetsu_btn ul li:nth-child(5){ grid-area: 3 / 6 / 5 / 9; border-top: 1px solid #947d3c; border-right: 1px solid #947d3c; border-bottom: 1px solid #947d3c;}
#estate_search .inner .search_box .syubetsu_btn ul li a{ transition: .2s;}
#estate_search .inner .search_box .syubetsu_btn ul li a:hover{ opacity: 0.4;}
#estate_search .inner .search_box .mysearch ul li a:hover{ background-color: #ddd;}
#estate_search .inner .estate_link .estate_btn a img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 0; transition: transform .4s ease;}
#estate_search .inner .estate_link .estate_btn a:hover img{ transform: translate(-50%,-50%) scale(1.2,1.2); transition: 0.5s;}
#estate_search .inner .estate_link .estate_btn a:hover .estate_btn_text .more_btn p span{ transition: 0.5s; color: #947d3c; background-color: #fff;}
#estate_search .inner .estate_link .estate_btn a:hover .estate_btn_text .more_btn p span:after  { left: 25px; border-left: 6px solid #947d3c;}
}

@media screen and (max-width: 767px) {
#estate_search .inner{ padding: 60px 20px;}
#estate_search .inner .contents_title{ margin-bottom: 35px;}
#estate_search .inner .search_box{ margin-bottom: 40px;}
#estate_search .inner .search_box .syubetsu_btn ul{ display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; height: 330px;}
#estate_search .inner .search_box .syubetsu_btn ul li{ box-sizing: border-box;}
#estate_search .inner .search_box .syubetsu_btn ul li:nth-child(1){ grid-area: 1 / 1 / 2 / 3; border: 1px solid #947d3c; text-align: center;}
#estate_search .inner .search_box .syubetsu_btn ul li:nth-child(2){ grid-area: 2 / 1 / 3 / 2; border-left: 1px solid #947d3c; border-right: 1px solid #947d3c;}
#estate_search .inner .search_box .syubetsu_btn ul li:nth-child(3){ grid-area: 2 / 2 / 3 / 3; border-right: 1px solid #947d3c;}
#estate_search .inner .search_box .syubetsu_btn ul li:nth-child(4){ grid-area: 3 / 1 / 4 / 2; border-left: 1px solid #947d3c; border-top: 1px solid #947d3c; border-right: 1px solid #947d3c; border-bottom: 1px solid #947d3c;}
#estate_search .inner .search_box .syubetsu_btn ul li:nth-child(5){ grid-area: 3 / 2 / 4 / 3; border-top: 1px solid #947d3c; border-right: 1px solid #947d3c; border-bottom: 1px solid #947d3c;}
#estate_search .inner .search_box .syubetsu_btn ul li{ text-align: center;}
#estate_search .inner .search_box .syubetsu_btn ul li a .icon_box{ display: block; font-size: 1.7em;}
#estate_search .inner .search_box .syubetsu_btn ul li a .icon_box p{ margin-left: 0;}
#estate_search .inner .search_box .syubetsu_btn ul li a .icon_box .icon{ display: block; width: 55px; height: 55px; margin: 0 auto;}
#estate_search .inner .search_box .syubetsu_btn ul li a .icon_box .icon img{ width: 100%; height: auto;}
#estate_search .inner .search_box .syubetsu_btn ul li a .roupe{ width: 16px; height: 16px;}
#estate_search .inner .search_box .mysearch{ margin-bottom: 30px;}
#estate_search .inner .search_box .mysearch ul li{ width: 100px; height: 30px;}
#estate_search .inner .search_box .mysearch ul li:nth-child(1){ margin-right: 10px;}
#estate_search .inner .search_box .mysearch ul li a{ font-size: 1.3em; line-height: 30px;}
#estate_search .inner .estate_link{ display: block;}
#estate_search .inner .estate_link .estate_btn{ width: 100%; height: 160px;}
#estate_search .inner .estate_link .estate_btn a img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: auto;}
#estate_search .inner .estate_link .estate_btn a .estate_btn_text .title{ font-size: 1.8em; margin-bottom: 25px;}
#estate_search .inner .estate_link .estate_btn a .estate_btn_text .more_btn p span{ font-size: 1.3em; width: 160px; line-height: 40px; height: 40px;}
}

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

}


/*======================== おすすめ物件 ========================*/


#recommend{ background-color: #f4f2eb;}
#recommend .inner{ width: 100%; max-width: 1040px; margin: 0 auto; padding: 120px 50px; box-sizing: border-box;}
#recommend .inner h2{ margin-bottom: 70px;}
#recommend .inner h3{ background-color: #fff; width: 230px; padding: 5px 0; box-sizing: border-box; font-size: 2em; text-align: center; margin: 0 auto 40px;}
#recommend .inner .buying{ margin-bottom: 160px;}
#recommend .inner .buying h3{ color: #00a368;}
#recommend .inner .lease h3{ color: #0082be;}
.property_box{}
.property_box a{ display: flex; text-decoration: none; color: #000; padding: 0 10px; box-sizing: border-box;}
.property_box .property_photo{ width: 420px; margin-right: 40px;}
.property_box .property_photo span{display: block; width: 100%; height: 0; background-color: #fff; padding-top: 75%; overflow: hidden; position: relative; margin-bottom: 15px;}
.property_box .property_photo span img{width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;}
.property_box .property_data{ width: calc(100% - 460px);}
.property_box .property_data .data_top{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;}
.property_box .property_data .data_top .syubetsu{ text-align: center; font-size: 1.4em; color: #947d3c; border: 1px solid #947d3c; width: 120px; box-sizing: border-box; padding: 5px 0; box-sizing: border-box;}
.property_box .property_data .data_top .price{ font-size: 2.6em;}
.property_box .property_data .data_top .price span{ font-size: 1.6em;}
.property_box .property_data .data_middle{ font-size: 1.6em; line-height: 1.5; margin-bottom: 20px;}
.property_box .property_data .data_middle dl{ display: flex; margin-bottom: 10px;}
.property_box .property_data .data_middle dl dt{ width: 80px; position: relative;}
.property_box .property_data .data_middle dl dt:before{ content: ''; display: inline-block; width: 0; height: 0; border-style: solid; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 6px solid #000; border-right: 0; position: absolute; right: 10px; top: calc(50% - 3px);}
.property_box .property_data .data_middle dl dd{ width: calc(100% - 80px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.property_box .property_data .data_bottom{ display: inline-block; text-decoration: none;}
.property_box .property_data .data_bottom p span{ font-size: 1.6em; font-weight: 600; letter-spacing: .1em; text-align: center; line-height: 50px; width: 200px; height: 50px; color: #947d3c; margin: auto; border:1px solid #947d3c; box-sizing: border-box; position: relative; display: block; overflow: hidden; transition: 0.5s;}
.property_box .property_data .data_bottom p span:after { content: ''; display: inline-block; width: 0; height: 0; border-style: solid; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 6px solid #947d3c; border-right: 0; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); transition: all 0.2s;}
.dots,
.dots2{ position: relative; text-align: center; margin: 0 auto;}
.slick-dots{ width: 50%!important; bottom: 0!important; z-index: 10; left: 50%; transform: translateX(-50%); }
.slick-dots li button:before{ font-size:60px!important;}
.slick-dots li button:before,
.slick-dots li.slick-active button:before{ color: #205a32!important;}
.slick-dotted.slick-slider{ margin-bottom: 40px!important;}
.arrow_box,
.arrow_box2{ z-index: 0; display: flex; align-items: center; justify-content: space-between; margin: -35px 0 0; position: relative;}
.prev-arrow,
.next-arrow{ display: block; width: 50px; height: 50px; background: #205a32; border-radius: 50%; transition: all .3s ease; cursor: pointer; position:relative;}
.prev-arrow{ transform: rotate(180deg); margin-right: 20px;}
.prev-arrow::before,
.next-arrow::before{ position:absolute; content: ""; display: inline-block; width: 0; height: 0; border-style: solid; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 10px solid #fff; border-right: 0;  top:0; bottom:0; left:0; right:0; margin:auto;}

@media screen and (min-width: 768px) {
.property_box a{ transition: .2s;}
.property_box a:hover{ opacity: 0.6;}
.property_box a:hover .property_data .data_bottom p span{ background-color: #947d3c; color: #fff;}
.property_box a:hover .property_data .data_bottom p span:after{ left: 25px; border-left: 6px solid #fff;}
}

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

#recommend .inner{ padding: 60px 20px;}
#recommend .inner h2{ margin-bottom: 30px;}
#recommend .inner h3{ width: 160px; font-size: 1.5em; margin: 0 auto 20px;}
#recommend .inner .buying{ margin-bottom: 50px;}
.property_box a{ display: block;}
.property_box .property_photo{ width: 100%; margin-right: 0;}
.property_box .property_data{ width: 100%;}
.property_box .property_data .data_top{ margin-bottom: 10px;}
.property_box .property_data .data_top .syubetsu{ font-size: 1.2em; width: 100px; padding: 5px 0;}
.property_box .property_data .data_top .price{ font-size: 1.8em;}
.property_box .property_data .data_top .price span{ font-size: 1.6em;}
.property_box .property_data .data_middle{ font-size: 1.2em; line-height: 1.5; margin-bottom: 10px;}
.property_box .property_data .data_middle dl{ display: flex; margin-bottom: 3px;}
.property_box .property_data .data_middle dl dt{ width: 60px; position: relative;}
.property_box .property_data .data_middle p{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-height: 0;}
.property_box .property_data .data_bottom{ display: none;}
.prev-arrow,
.next-arrow{ width: 40px; height: 40px;}
.prev-arrow::before,
.next-arrow::before{ border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 8px solid #fff;}

}

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

}


/*======================== 下部コンテンツ部分 ========================*/


#under_contents{}
#under_contents .inner{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 120px 50px; box-sizing: border-box;}
#under_contents .inner .flow_banner{ text-align: center; margin-bottom: 80px;}
#under_contents .inner .flow_banner a{ display: block; position: relative;}
#under_contents .inner .flow_banner a img{ width: 100%; height: auto;}
#under_contents .inner .flow_banner a .flow_text{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%;}
#under_contents .inner .flow_banner a .flow_text .flow_title{ color: #fff; font-size: 2.4em; margin-bottom: 40px;}
#under_contents .inner .flow_banner a .flow_text .more_btn{ display: inline-block; text-decoration: none;}
#under_contents .inner .flow_banner a .flow_text .more_btn p span{ font-size: 1.6em; font-weight: 600; letter-spacing: .1em; text-align: center; line-height: 50px; width: 340px; height: 50px; color: #fff; margin: auto; border:1px solid #fff; position: relative; display: block; overflow: hidden; transition: 0.5s;}
#under_contents .inner .flow_banner a .flow_text .more_btn p span:after { content: ''; display: inline-block; width: 0; height: 0; border-style: solid; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 6px solid #fff; border-right: 0; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); transition: all 0.2s;}

#under_contents .contents_list{}
#under_contents .contents_list ul{ display: flex; flex-wrap: wrap;}
#under_contents .contents_list ul li{ width: calc(50% - 40px); margin-right: 80px; margin-top: 80px; display: flex;}
#under_contents .contents_list ul li:nth-child(2n){ margin-right: 0;}
#under_contents .contents_list ul li .contents_photo{ width: 280px; height: 210px; overflow: hidden; margin-right: 20px;}
#under_contents .contents_list ul li .contents_photo img{ width: 280px; height: 210px; object-fit: cover;}
#under_contents .contents_list ul li .contents_text{ width: calc(100% - 300px);}
#under_contents .contents_list ul li .contents_text p.uc_title{ font-size: 2em; color: #947d3c; margin-bottom: 16px;}
#under_contents .contents_list ul li .contents_text p.uc_title span{ display: block; padding-left: 20px; position: relative;}
#under_contents .contents_list ul li .contents_text p.uc_title span:before{ content: ''; display: block; width: 8px; height: 8px; border-radius: 50vh; background-color: #947d3c; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
#under_contents .contents_list ul li .contents_text p.uc_text{ font-size: 1.3em; line-height: 1.8em;}
#under_contents .contents_list ul li .contents_text dl{ font-size: 1.3em; line-height: 1.8em;}
#under_contents .contents_list ul li .contents_text dl dt{ font-weight: 700;}
#under_contents .contents_list ul li .contents_text dl dd{}
#under_contents{}

@media screen and (min-width: 768px) {
#under_contents .inner .flow_banner a{ transition: .2s;}
#under_contents .inner .flow_banner a:hover{ opacity: 0.7;}
}

@media screen and (max-width: 767px) {
#under_contents .inner{ padding: 60px 20px;}
#under_contents .inner .flow_banner{ margin-bottom: 40px;}
#under_contents .inner .flow_banner a .flow_text{ position: absolute; top: calc(50% - 70px); left: 50%; transform: translateX(-50%); width: 100%;}
#under_contents .inner .flow_banner a .flow_text .flow_title{ font-size: 1.6em; margin-bottom: 20px;}
#under_contents .inner .flow_banner a .flow_text .more_btn p span{ font-size: 1.3em; width: 260px; height: 40px; line-height: 40px;}
#under_contents .contents_list ul{ display: block;}
#under_contents .contents_list ul li{ width: 100%; display: block; margin-right: 0; margin-top: 30px;}
#under_contents .contents_list ul li .contents_photo{ width: 230px; height: 140px; overflow: hidden; margin-right: 0; margin: 0 auto 10px;}
#under_contents .contents_list ul li .contents_photo img{ width: 230px; height: 140px; object-fit: cover;}
#under_contents .contents_list ul li .contents_text{ width: 230px; margin: 0 auto;}
#under_contents .contents_list ul li .contents_text p.uc_title{ font-size: 1.7em; margin-bottom: 10px;}
#under_contents .contents_list ul li .contents_text p.uc_text{ font-size: 1.2em; line-height: 1.6em;}
}

@media screen and (max-width:374px){
#under_contents .inner .flow_banner a .flow_text{ top: calc(50% - 60px);}
#under_contents .inner .flow_banner a .flow_text .flow_title{ font-size: 1.4em; margin-bottom: 10px;}
#under_contents .inner .flow_banner a .flow_text .more_btn p span{ font-size: 1.2em; letter-spacing: 0; width: 230px; height: 40px; line-height: 40px;}
}