@charset "UTF-8";
@import "style.css";

main {
    padding: 0 0 0rem;
}

section {
	padding: 5rem 0 0;
}

section.bg {
	margin-top: 5rem;
	padding: 5rem 0;
}

@media screen and (max-width: 764px) {
section {
	padding: 3rem 0 0;
}
section.bg {
	margin-top: 1rem;
	padding: 3rem 0 1rem;
}

}

.itemcenter {
   display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.itemcenter a {
	font-size: .85rem;
}

.itemcenter span {
    display: inline-block;
    margin-top: 2%;
    padding-left: 27px;
	position: relative;
}

.itemcenter span::after {
	display: inline-block;
    position: absolute;
	top: 0;
    bottom: 0;
    left: -3px;
    margin: auto 0;
    content: "";
    width: 17px;
    height: 7px;
    border-bottom: solid 1px #D95755;
    border-right: solid 1px #D95755;
    transform: skew(45deg);
-webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
}

.itemcenter a:hover span::after {
    left: 5px;
}

.itemcenter a img {
	display: block;
	width: 100%;
-webkit-transition: 0.8s;
    -moz-transition: 0.8s;
    -o-transition: 0.8s;
    -ms-transition: 0.8s;
    transition: 0.8s;
}

.itemcenter a:hover img {
	opacity: .7;
}


@media screen and (max-width: 764px) {
.itemcenter a {
    margin-bottom: 5%;
}
.itemcenter span {
	font-size:.75rem;
}
}

#kv .kv_ttl {
	font-size: 5rem;
	line-height: 1.2;
    font-weight: 600;
}

#kv .kv_ttl span {
	position: relative;
    font-size: 5vw;
}

#kv .kv_ttl span::after {
	content: "";
    position: absolute;
    bottom: 10px;
    width: 100%;
    left: 0;
    height: 30px;
	z-index: -1;
}

#kv .kv_ttl span.first-child::after {
	background: #05AFEB
}

#kv .kv_ttl span.last-child::after {
	background: #5BBD2A
}

#kv .kv_ttl span small {
    font-size: 4vw;
}
.content-container {
  overflow: hidden;
}
.content-container #contentBox {
  display: block!important;
}	
.content-container .content {
    display: none;
}
.content-container .content.show {
    display: block;
}


.tab-container {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}
.tab-container .tab {
    flex: 1 1;
    order: -1;
    position: relative;
    min-width: 70px;
    padding: .7em 1em;
    background-color: #f2f2f2;
    color: #999;
    font-size: .9em;
    text-align: center;
    cursor: pointer;
}
.tab-container .tab:nth-child(1).active,
.tab-container .tab:nth-child(1):hover {
    background-color: #5BBD2A;
    color: #fff;
}
.tab-container .tab:nth-child(2).active,
.tab-container .tab:nth-child(2):hover {
    background-color: #05AFEB;
    color: #fff;
}
.tab-container .tab.active::before {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 9px;
    content: '';
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.tab-container .tab:nth-child(1)::before {
    background-color: #5BBD2A;

}
.tab-container .tab:nth-child(2)::before {
    background-color: #05AFEB;
}





#news ul {
    margin-bottom: 3rem;
}
#news ul li {
    margin-bottom: 1rem;
}
#news ul li span {
    display: inline-block;
    background: #7AB851;
    color: #FFF;
    line-height: 1;
    font-size: .75rem;
    padding: .75% 3% .75%;
    border-radius: 5px;
    margin-right: 10px;
}

#news ul li small {
    font-size: .75rem;
	color: #666;
    display: inline-block;
    margin-right: 20px;
}
@media screen and (max-width: 764px) {
#news ul {
    margin-bottom: 1.8rem;
}
#news ul li a {
	display: block;
}
#news ul li span {
    font-size: .65rem;
    padding: .75% 3% 1.2%;
}
}
#push .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 2%;
}
#push .item a {
    border-radius: 8px;
    border: solid 1px #DDD;
    padding: 2%;
    display: block;
    width: calc(94% / 4);
    -webkit-transition: 0.8s;
    -moz-transition: 0.8s;
    -o-transition: 0.8s;
    -ms-transition: 0.8s;
    transition: 0.8s;
}
#push .item a:hover {
	text-decoration: none;
    border: solid 1px #7AB851;
}
#push .item dl dt {
	position: relative;
	overflow: hidden;
	margin-bottom: .75rem;
}
#push .item dl dt span {
    position: absolute;
    z-index: 10;
    right: 0;
    top: 0;
    font-size: .65rem;
    color: #FFF;
    line-height: 1;
    padding: 5px 10px;
}
#push .item dl dt span.buy {
    background: #05AFEB;
}
#push .item dl dt span.property {
    background: #7AB851;
}
#push .item dl dt img {
	position: relative;
	z-index: 9;
	display: block;
	width: 100%;
    transition: all .4s ease-in-out;
    transition: opacity 0;
}
#push .item a:hover dl dt img {
    transform: scale(1.06);
}
#push .item dl dd .propertytype {
display: inline-block;
    background: #7AB851;
    color: #FFF;
    line-height: 1;
    font-size: .65rem;
    padding: 3% 5%;
    border-radius: 5px;
    margin-bottom: 5px;
}
#push .item dl dd .ttl {
	color: #79B851;
	font-weight: 600;
    font-size: 1rem;
	line-height: 1.4;
    margin-bottom: 7px;
}
#push .item dl dd p {
	line-height:  1;
}
#push .item dl dd .price {
    font-size: .85rem;
    margin-bottom: 5px;
}
#push .item dl dd .price small {
    font-size: .75rem;
	display: inline-block;
	color: #666;
}
#push .item dl dd .price .red {
	color: red;
	font-size: 1.6rem;
    font-weight: 600;
    display: inline-block;
    margin-right: 3px;
}
#push .item dl dd .region {
    font-size: .75rem;
	display: block;
	color: #666;
}
@media screen and (max-width: 764px) {
#push .item a {
    width: calc(98% / 2);
	margin-bottom: 2%;
}
#push .item dl dd .ttl {
    font-size: .85rem;
}
#push .item dl dd .propertytype {
    font-size: .5rem;
	margin-bottom: 3px;
}
}


#about {
	margin-top: 5rem;
    padding: 5rem 0;
	background: transparent url(/img/index/about_bg.jpg?=0209) no-repeat center left;
	background-size: cover;
}
#about h2 {
    font-size: 3rem;
    line-height: 1.4;
    font-weight: 600;
    color: #FFF;
    position: relative;
    z-index: 10;
    text-shadow: 0 0 12px rgba(0, 0, 0, .75);
}
#about h2 span {
    position: relative;
}
#about h2 span::after {
    content: "";
    position: absolute;
    bottom: 10px;
    width: 100%;
    left: 0;
    height: 15px;
    z-index: -1;
}
#about h2 span.first-child::after {
    background: #05AFEB;
}
#about h2 span.last-child::after {
    background: #5BBD2A;
}
#about h2 span small {
    font-size: 2rem;
}
#about ul.item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 3%;
	width: 65%;
	margin: 0 auto;
}
#about ul.item li {
	width: calc(97% / 2);
}
#about ul.item li a {
    display: block;
    padding: 7%;
    text-align: center;
    color: #131304;
    background: rgba(255, 255, 255, 0.9);
    font-weight: 700;
    font-size: .85rem;
   transition: all .4s ease-in-out;
	position: relative;
}
#about ul.item li a::before {
    right: 5%;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    background: #293845;
    border-radius: 50%;
    content: "";
    z-index: 9;
}
#about ul.item li a::after {
    right: 5.2%;
    width: 15px;
    height: 9px;
	position: absolute;
	top: 0px;
	bottom: 0;
	margin: auto 0;
	display: inline-block;
	vertical-align: middle;
	background: #FFF;
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.803 10"><g transform="translate(0 9.468) rotate(-90)"><path d="M4.468,5.462l-5-5.035L.43-.528,4.468,3.538,8.506-.528l.962.955Z" transform="translate(0 7.341)" fill="currentColor"/><path d="M.606,11.819H-.75V0H.606Z" transform="translate(4.54)" fill="currentColor"/></g></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.803 10"><g transform="translate(0 9.468) rotate(-90)"><path d="M4.468,5.462l-5-5.035L.43-.528,4.468,3.538,8.506-.528l.962.955Z" transform="translate(0 7.341)" fill="currentColor"/><path d="M.606,11.819H-.75V0H.606Z" transform="translate(4.54)" fill="currentColor"/></g></svg>');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	content: "";
	transition: all 0.3s ease;
	z-index: 10;
}
#about ul.item li a:hover {
	text-decoration: none;
    background: #FFF;
}
#about ul.item li:nth-child(1) a {
	border: solid 5px #5BBD2A;
}
#about ul.item li:nth-child(2) a {
	border: solid 5px #00B2EC;
}
#about ul.item li:nth-child(3) a {
	border: solid 5px #CC0033;
}
#about ul.item li a span {
    font-size: 1rem;
}
#about ul.item li:nth-child(1) a span {
	color: #5BBD2A;
}
#about ul.item li:nth-child(2) a span {
	color: #00B2EC;
}
#about ul.item li:nth-child(3) a span {
	color: #CC0033;
}
#about ul.item li:nth-child(1) a::before {
	background: #5BBD2A;
}
#about ul.item li:nth-child(2) a::before {
	background: #00B2EC;
}
#about ul.item li:nth-child(3) a::before {
	background: #CC0033;
}

@media screen and (max-width: 764px) {
#about {
    padding: 2rem 0;
	margin-top: 2rem;
}
#about h2 {
	font-size: 1rem;
	margin-bottom: 30px;
}
#about h2 span::after {
	bottom: 1px;
	height: 7px;
}
#about h2 span small {
    font-size: 1rem;
}
#about ul.item {
    width: 100%;
}
#about ul.item li {
    width: 100%;
}
#about ul.item li:nth-child(2) {
	margin: .75rem 0;
    width: 100%;
}
#about ul.item li a {
    padding: 5%;
}
}

@media screen and (max-width: 1024px) {
    #kv .kv_ttl {
        font-size: 2.8rem;
    }
}
@media screen and (max-width: 764px) {
    #kv .kv_ttl {
        font-size: 1.8rem;
        top: 40%;
    }
#kv .kv_ttl span small {
        font-size: 1rem;
}
#kv .kv_ttl span::after {
    bottom: 1px;
    height: 7px;
}
}

#kv .kv_btn {
    position: absolute;
    z-index: 10;
    bottom: 3%;
    right: 3%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 3%;
    width: 40vw;
}
#kv .kv_btn li {
	width: calc(97% / 2);
}
#kv .kv_btn li img {
	display: block;
	width: 100%;
	-webkit-transition: 0.8s;
	-moz-transition: 0.8s;
	-o-transition: 0.8s;
	-ms-transition: 0.8s;
	transition: 0.8s;
}

#kv .kv_btn li a:hover img {
	opacity: .85;
}


@media screen and (max-width: 1024px) {
#kv .kv_ttl span small {
    font-size: 2rem;
}
}
@media screen and (max-width: 764px) {
#kv .kv_ttl {
	left: 45%;
}
#kv .kv_btn {
    width: 75vw;
}
#kv .kv_ttl span small {
    font-size: 4vw;
}
#kv .kv_ttl span {
    font-size: 7vw;
}
}







#access .map {
  	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
#access .map .g_map {
	width: 100%;
}
#access .map .g_map iframe {
	width: 100%;
}
#access .map .text_map {
    width: 25%;
    padding: 2.5%;
}
@media screen and (max-width: 764px) {
#access .map .g_map {
	width: 100%;
}
#access .map .text_map {
	display:none;
}
}





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

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

}


#kv .slick-slider,
#kv .slick-slider .slick-slide,
#kv .slick-slider .slick-track {
    width: 100% !important;
}

h4 {
    font-weight: 700;
    font-size: 1.35rem;
    border-bottom: solid 1px #EFEFEF;
    margin-bottom: 20px;
    padding-bottom: 10px;
}
h4 span {
    display: inline-block;
    position: relative;
    padding-left: 50px;
}
h4 span::before {
	content: "";
    left: 0;
    width: auto;
	position: absolute;
	top: 0px;
	bottom: 0;
	margin: auto 0;
	height: 40px;
    width: 40px;
}
h4.hatomarksite span::before {
	background: transparent url(/img/logo_hato_icon.svg) no-repeat center center;
	background-size: cover;
}
h4.athome span::before {
	background: transparent url(/img/logo_athome.png) no-repeat center center;
	background-size: cover;
}
h4 small {
    font-weight: normal;
    font-size: .85rem;
}
h5 {
    color: #5BBD2A;
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 10px;
}
h5.blue {
    color: #00B2EC;
}
h5.athome {
    color: #CC0033;
}
h5 small {
    font-weight: normal;
    font-size: .85rem;
}
#other  ul.item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 60px;
}
#other  ul.item.athome {
    margin-bottom: 0px;
}
#other ul.item li {
    margin-right: 15px;
    margin-bottom: 7px;
}
#other  ul.item li a {
    display: inline-block;
    position: relative;
    padding-right: 35px;
}
#other  ul.item li a::before {
    right: 5%;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    background: #293845;
    border-radius: 50%;
    content: "";
    z-index: 9;
}
#other  ul.item.green li a::before {
    background: #5BBD2A;
}
#other  ul.item.blue li a::before {
    background: #00B2EC;
}
#other  ul.item.athome li a::before {
    background: #CC0033;
}
#other  ul.item li a::after {
    right: 5.2%;
    width: 15px;
    height: 9px;
	position: absolute;
	top: 0px;
	bottom: 0;
	margin: auto 0;
	display: inline-block;
	vertical-align: middle;
	background: #FFF;
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.803 10"><g transform="translate(0 9.468) rotate(-90)"><path d="M4.468,5.462l-5-5.035L.43-.528,4.468,3.538,8.506-.528l.962.955Z" transform="translate(0 7.341)" fill="currentColor"/><path d="M.606,11.819H-.75V0H.606Z" transform="translate(4.54)" fill="currentColor"/></g></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.803 10"><g transform="translate(0 9.468) rotate(-90)"><path d="M4.468,5.462l-5-5.035L.43-.528,4.468,3.538,8.506-.528l.962.955Z" transform="translate(0 7.341)" fill="currentColor"/><path d="M.606,11.819H-.75V0H.606Z" transform="translate(4.54)" fill="currentColor"/></g></svg>');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	content: "";
	transition: all 0.3s ease;
	z-index: 10;
}

@media screen and (max-width: 764px) {
h4 {
	font-size: 14px;
    line-height: 1.4;
    margin-bottom: 10px;
}
h4 span {
    padding-left: 40px;
}
h4 span::before {
    height: 31px;
    width: 30px;
}
h4 small {
	display: block;
	font-size: 10px;
}
h5 {
	font-size: 14px;
}
#other ul.item {
	margin-bottom: 40px;
}
#other ul.item li {
    margin-bottom: 7px;
}
}

.btnResetinner {
   margin-bottom: 0rem;
}