@charset 'utf-8';

img {width: 100%;}
body {color: #333366;background-size: cover;background: #F9F9F7;}
#PAGE {width: 100%;}


.sp {display: none;}
.pc {display: inline-block;}
#PAGE section .PAGE_IN {width: auto;height: auto;margin: 0px auto;position: relative;overflow: visible;}
.back_beige{background: #F9F9F7;}
.back_white{background: #fff;}
.back_brown{background:#F3EFDF}
.back_yellow{background: #F8E07F;}


#PAGE .top_matome {width: 100%;text-align: center;margin-top: 0;position: relative;overflow: visible;}
h2 {width: 100%;font-size: 40px;letter-spacing: 0.1em;text-align: center;line-height: 2em;font-family: source-han-sans-japanese, sans-serif;font-weight: 700;font-style: normal;}
img.border {margin-bottom: 20px;}
strong {width: 100%;text-align: center;display: inline-block;font-size: 18px;}
strong span {font-size: 28px;}

.center {width: 100%;text-align: center;}
.box {width: auto;height: auto;display: block;margin: 0;position: relativie;overflow: visible;padding: 0px 0 70px 0;}
.box_top{padding-top: 20px;}
.box_img{width: 90vw;max-width: 1200px;margin: 0 auto;position: relative;overflow: visible;}
.box .box_en {width: 110px;height: 110px;border-radius: 50%;border: 3px solid #333366;background: #ff3900;position: absolute;top: -50px;left: 10%;text-align: center;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;font-weight: bold;}
.box .box_senior {position: absolute;bottom: 0;}
.box .box_en small {width: 100%;display: inline-block;color: #333366;font-size: 12px;margin-bottom: 10px;font-weight: bold;}
.box .box_en span {width: 100%;display: inline-block;color: #ffffff;font-size: 45px;}
.space {width: 100%;height: 30px;display: inline-block;}

.PAGE_IN h3 {
  width: 100%;
}

.PAGE_IN strong {
  width: 100%;
  display: block;
  margin: 0;
  font-weight: bold;
  line-height: 2em;
  color: #EA5D80;
}

.PAGE_IN .contact {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.PAGE_IN .contact strong {
  width: 100%;
  display: inline-block;
}

.PAGE_IN .contact div {
  width: 30%;
}

.PAGE_IN .contact div label {
  border: 2px solid #666666;
  background: #fff;
}

.button {
  position: relative;
  right: auto;
  width: 242px;
  height: 60px;
  display: block;
  margin: 0 auto;
  border: none;
  background: url(../img/send.png) no-repeat;
  background-size: 100%;
  color: #fff;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  line-height: 60px;
  box-shadow: none;
  border-radius: 0;
}

.satei {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 50px 0;
}

.satei label {
  position: relative;
  display: block;
  width: 30%;
  height: 50px;
  border: 2px solid #666666;
  background: #fff;
}

.satei select {
  cursor: pointer;
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 200px;
  padding: 0 1em;
  line-height: 46px;
  color: #000;
  border: none;
  background: transparent;
  font-size: 16px;
}

.satei ::-ms-expand {
  display: none;
}

.detail {
  width: 1100px;
  margin: 0 auto;
}

.detail_in {
  width: 660px;
  margin: 0 220px;
}

.detail dl.RESERVE {
  width: 660px;
  margin: 0 auto 30px auto;
  clear: none;
  background: none;
  border-bottom: none;
}

dl.RESERVE dt {
  width: 100%;
  padding: 0;
  float: left;
  clear: none;
  font-size: 13px;
  line-height: 1.4em;
  background: none;
}

dl.RESERVE dt em {
  float: left;
}

dl.RESERVE dd {
  width: 100%;
  padding: 0;
  float: left;
  clear: none;
  background: none;
}

dl.RESERVE dd.NESS {
  background: #ff0;
}

dl.RESERVE dd .wsNo {
  width: 160px;
  float: left;
}

dl.RESERVE dd .NAIYO {
  width: 100%;
  float: left;
  clear: none;
  margin: 0 0 10px 0;
}

dl.RESERVE dd .NAIYO label {
  width: 100%;
  float: left;
  clear: none;
  margin: 0 10px 0 0;
  font-size: 14px;
}

dl.RESERVE dd .NAIYO label.AMPM {
  width: 100%;
}

dl.RESERVE dd p {
  width: 100%;
  float: left;
  clear: none;
  margin: 0 0 5px 0;
}

dl.RESERVE dd span {
  width: 100%;
  float: left;
  clear: none;
}

dl.RESERVE dd span.BUKKEN {
  width: 100%;
  float: left;
  clear: none;
  margin: 10px 0 0 0;
}

dl.RESERVE dd span.VISIT {
  width: auto;
  float: left;
  clear: none;
  margin: 5px 10px 0 0;
  line-height: 36px;
}

dl.RESERVE dd input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 5px 5px 0 0;
}

dl.RESERVE dd input[type="radio"] {
  width: 20px;
  height: 20px;
  margin: 5px 5px 0 0;
  vertical-align: middle;
}

dl.RESERVE dd span.ZIP {
  width: auto;
  float: left;
  clear: none;
  margin: 10px 10px 0 0;
}

dl.RESERVE dd select {
  width: auto;
  float: left;
  clear: none;
  margin: 0px 10px 0 0;
  font-size: 14px;
}

dl.RESERVE dd select option {
  padding: 0px;
}

dl.RESERVE dd textarea {
  width: 420px;
  height: 100px;
  font-size: 16px;
}

dl.RESERVE dd a.PASS {
  float: left;
  clear: both;
  margin: 0;
  color: #0af;
}

dl.RESERVE dd a.PASS:hover {
  text-decoration: underline;
}

dl.RESERVE dd a.PASS:active {
  text-decoration: underline;
}

dl.RESERVE dd em.LOGIN_ERROR {
  display: block;
  float: left;
  width: 100%;
  color: #ff775d;
}

dl.RESERVE dd span.TANI {
  width: auto;
  float: left;
}

dl.RESERVE dd span.TANI img {
  width: auto;
  float: none;
  margin: 0 5px 0 0;
  vertical-align: middle;
}

dl.RESERVE dd span.KEIJO {
  width: auto;
  float: none;
  margin: 0 20px 0 5px;
  line-height: 20px;
}

dl.RESERVE dd span.KEIJO img {
  margin: 0 5px 0 0;
  vertical-align: middle;
}

input.INPUT_SS {
  width: 100px;
  height: 17px;
  margin: 0 10px 0 0;
  float: left;
  font-size: 14px;
  line-height: 2em;
  border: 3px solid #666;
  padding: 1em 1em;
}



.selectbox {
  width: 90%;
  margin: 1em auto;
  position: relative;
}

select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding: 1em 1em;
  box-sizing: border-box;
  font-size: 1em;
  border-radius: 0;
  background: #fff;
  border: #ccc 1px solid;
  width: 355px;
}

select.time {
  width: 349px;
}

.selectbox::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  right: 5%;
  top: 35%;
  border-bottom: #333 2px solid;
  border-right: #333 2px solid;
  transform: rotate(45deg)translateY(-30%);
}

.color.selectbox select {
  background: blue;
  color: #fff;
  border-radius: 2em;
}

.color.selectbox::after {
  border-bottom: #fff 5px solid;
  border-right: #fff 5px solid;
}



div.container img.hissu {
  width: 25px;
}

div.container img.hissu2 {
  width: 25px;
  margin-top: 13px;
}

label.form_input input .hissu {
  margin-top: 10px;
}

.top_pc {
  width: 1260px;
  height: 200px;
  margin: 0 auto 50px auto;
  position: relative;
  overflow: visible;
  background: no-repeat url("../img/people.png");
}

.top_pc .jcb {
  margin: 0 auto;
}



/*開催店舗*/
.access {position: relative;}
.access iframe.honten {position: absolute;top: 0;left: 0;left: 845px;top: 230px;}
.access iframe.ishiki {position: absolute;top: 0;left: 0;left: 845px;top: 490px;}
.access iframe.taniyama {position: absolute;top: 0;left: 0;left: 845px;top: 754px;}
.access iframe.jiyu {position: absolute;top: 0;left: 0;left: 845px;top: 1007px;}
.access iframe.wada {position: absolute;top: 0;left: 0;left: 845px;top: 1260px;}


/*来店予約*/
.yoyaku {position: relative;margin: 0 auto;padding-top: 30px;background: #fce999;}
.yoyaku_tytle {position: absolute;top: -60px;right: 0;left: 0;margin: 0 auto;  width: 500px;}


/* トップ */
.top_wrap{position: relative;padding-bottom: 60px;}
.top {max-width: 1200px;width: 73vw;display: flex;justify-content: space-between;margin: 0 auto;border-radius: 60px;z-index: 2;}
.top_img {position: absolute;bottom: 0vw;left: 17vw;z-index: 4;max-width: 190px;width: 13vw;}
.top_tytles{color: #EA5D80;text-align: left;font-weight: bold;color: #EA5D80;}
.top_tytles {position: absolute;top: 15vw;background: rgba(255,255,255,0.8);padding: 25px 8vw 25px 5vw;right: 0vh;z-index: 4;}
h1{font-size: 43px;line-height: 54px;letter-spacing: .05em;}
.top_tytle_sub{font-size: 20px;margin-top: 15px;}
.top_circle1 {width: 12vw;height: 12vw;border-radius: 50%;background: rgba(50,198,168,0.5);position: absolute;top: 35px;right: 15vw;z-index: 4;}
.top_circle2 {width: 20vw;height: 20vw;border-radius: 50%;background: rgba(252,192,192,0.5);position: absolute;top: 35px;right: 15vw;top: -95px;right: 0vw;z-index: 3;}
.top_circle3 {width: 400px;height: 400px;border-radius: 50%;background: rgba(50,198,168,0.2);position: absolute;z-index: 1;top: 30vw;left: -9vw;}
.setsumei{width: 21vw;}

/* 空き家の購入には、メリットがたくさん！ */
.POINT_WRAP{width: 90vw;max-width: 1200px;display: flex;flex-wrap: wrap;justify-content: center;margin: 0 auto;}
.POINT {width: 23vw; max-width: 315px;margin: 20px 12px;padding: 1.5vw;border-radius: 30px;box-shadow: 2px 2px 4px rgb(241, 240, 240);}
.POINT_TYTLE{width: 20vw;max-width: 310px;margin: 0 auto;}
.POINT_TEXT{width: 20vw;max-width: 310px;text-align: justify;margin: 0 auto;margin-top: 10px;font-size: 16px;}
.btn a {position: relative;display: block;padding: 20px 0;background-color: #21be78;border-radius: 8px;font-size: 14px;color: #fff;text-decoration: none;border-radius: 15px;letter-spacing: 0.03em;width: 20vw;max-width: 310px;text-align: center;
margin: 0 auto;margin-top: 10px;line-height: 20px;}
.btn a:hover{background: #EA5D80;transition : 0.6s;}
.btn-arrow-right a::after {content: '';position: absolute;top: 0;bottom: 0;right: 27px;width: 9px;height: 9px;margin: auto;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(45deg);box-sizing: border-box;}
p.btn{margin-top: 25px;}
.top_circle4 {width: 12vw;height: 12vw;border-radius: 50%;background: rgba(50,198,168,0.2);position: absolute;top: 60vw;
right: 10vw;}
.top_circle5 {width: 27vw;height: 27vw;border-radius: 50%;background: rgba(252,192,192,0.5);position: absolute;top: 35px;right: 15vw;top: 72vw;left: -7vw;}


/* 南日本ハウスではお得な空き家物件をたくさんご紹介しています！ */
.HOUSE_WRAP{width: 90vw;max-width: 1200px;display: flex;flex-wrap: wrap;margin: 0 auto;justify-content: space-between;}
.HOUSE {width: 19.5vw;max-width: 254px;padding: 20px 1vw;border-radius: 15px;margin: 15px 0;padding: calc(1vw - 4px);padding-top: 20px;padding-bottom: 20px;border: 4px solid white;}
.HOUSE:hover{ border: 4px solid pink;}
.HOUSE_IMG { aspect-ratio: 3/2;}
.HOUSE_IMG img { width: auto; height: auto; max-width: 100%; max-height: 100%;}
.HOUSE_TYTLE{text-align: left;font-weight: bold;font-size: 17px;color: #EA5D80;margin-top: 15px;}
.HOUSE_DETAIL{display: flex;flex-direction: row;align-items: center;}
.HOUSE_DETAIL_ICON{width: 23px;margin-right: 10px;}
.HOUSE_DETAIL_TEXT{display: flex;flex-direction: row;align-items: center;}
.HOUSE_DETAIL_TEXT small{width: 38px;}
.btn_house a{margin: 0 auto;}


/* 空き家購入に関するコンテンツも続々配信中です！ */
.ARTICLE_WRAP{width: 90vw;max-width: 1100px;margin: 0 auto;margin-top: 0px;position: relative;z-index: 1;}
.ARTICLE{box-sizing:border-box;display: flex;flex-direction: row;text-align: left;align-items: center;border-radius: 30px;margin: 20px 0;box-shadow: 2px 2px 4px rgb(241, 240, 240);border: 4px solid white;}
.ARTICLE:hover{border: 4px solid pink;}
.ARTICLE_IMG_LIST {width: 23vw;margin-right: 3vw;max-width: 270px;height: 180px;}
.ARTICLE_IMG_LIST.NO_IMAGE { height: 170px;background: #eee;display: flex;justify-content: center;align-items: center;width: 23vw;
margin-right: 3vw;}
.ARTICLE_TYTLES_LIST{width: 20vw;}
.ARTICLE_TYTLE{font-size: 20px;color: #EA5D80;font-weight: bold;line-height: 35px;}
.ARTICLE_TEXT{width: 35vw;max-width: 380px;margin-left: 40px;margin: 20px auto; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; max-height: 84px;font-size: 16px;}
.top_circle6 {width: 6vw;height: 6vw;border-radius: 50%;background: rgba(50,198,168,0.2);position: absolute;top: 4vw;
left: 10vw;}
.top_circle7 {width: 10vw;height: 10vw;border-radius: 50%;background: rgba(252,192,192,0.5);position: absolute;top: 35px;right: 15vw;top: -1vw;left: 2vw;}
/* .top_circle8 {width: 27vw;height: 27vw;border-radius: 50%;background: rgba(50,198,168,0.2);position: absolute;top: 54vw;right: -9vw;} */


/* 空き家を理想の住まいにリフォームしよう！ */
.REFORM_WRAP{width: 86vw;max-width: 1200px;display: flex;flex-wrap: wrap;margin: 0 auto;justify-content: space-between;}
.REFORM {width: 25vw;max-width: 340px;border-radius: 15px;margin: 15px 0;height: 450px;padding: calc(1.3vw - 4px);padding-top: 20px;padding-bottom: 20px;border: 4px solid white; }
.REFORM:hover{border: 4px solid pink;}
.REFORM_TYTLE{text-align: left;font-weight: bold;font-size: 17px;color: #EA5D80;margin-top: 15px;}
.REFORM_DETAIL{display: flex;flex-direction: row;align-items: center;margin: 10px 0;align-items: flex-start;}
.REFORM_DETAIL_ICON{width: 23px;margin-right: 10px;}
.REFORM_DETAIL_TEXT{display: flex;flex-direction: row;align-items: center;text-align: justify;line-height: 23px; overflow: hidden;  display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 5;width: 310px;}
.REFORM_DETAIL_TEXT small{width: 38px;}
.btn_house a{margin: 0 auto;}




/*固定バー*/
.kotei {padding: 15px 0;position: fixed;bottom: 0;z-index: 1;width: 100vw;background: #32C6A8;}
.kotei div {  margin: 0 auto;}
.button_tel{width: 420px;}
.button_matome{display: flex;justify-content: center;width: 700px;align-items: center;}
.button_tel.pc img { width: 45px; margin-right: 10px;}
.button_tel.pc span.tel_no {color: #fff; font-weight: bold; line-height: 45px; vertical-align: text-bottom;letter-spacing: .05em;
font-size: 26px;}
.kotei {  display: inline-block;}
.kotei a {display: inline-block;}
.kotei a:hover {opacity: 0.8;}

.SEARCH_BOXES_WRAP{width: 1173px;margin: 0 auto;}
.SEARCH_TEXT{font-size: 20px;font-weight: bold;letter-spacing: 1px;margin-top: 20px;line-height: 30px;color: #707070;}
.illust{width: 285px;}

/* パンくず */
.pankuzu { width: 73vw; display: flex; margin: 0 auto; color: #000;}
.pankuzu_list { margin-right: 10px;width:fit-content;}
.pankuzu_list a:hover { text-decoration: underline;}
.brbr{display: none;}


@media screen and (max-width: 1200px) {
  .brbr{display:block; }
}

@media screen and (max-width: 740px) {
#PAGE section {padding-bottom: 0px;  }
#PAGE section .PAGE_IN {width: auto;margin: 0 auto;padding: 0px 0;}
#PAGE section .logo img {width: 40vw;}

.brbr{display: none;}
.sp {width: 100%;display: block;}
.pc {display: none;}
.scroll {width: 10%;margin: 0 0 30px 0;}
.box {width: 100%;height: auto;display: block;border: none;position: relativie;overflow: visible;padding-top: 20px;  }
.box_img {width: 100%;margin: 0 auto;}
h1 {width: 90%;margin: 20px 5% 0 5%;margin: 0;  }
h2 {font-size: 1.46rem;color: #333366;  }
.PAGE_IN h3 img {width: 100%;  }

strong {width: 100%;text-align: center;display: inline-block;font-size: 1rem;line-height: 2em;  }
strong span {font-size: 1.2rem;}
.space {width: 100%;height: 100px;display: inline-block;}
.box .box_en {width: 110px;height: 110px;border-radius: 50%;border: 3px solid #333366;background: #ff3900;position:absolute;top: -90px;left: 1%;text-align: center;display: flex;justify-content: center;align-items: center;flex-wrap:wrap;font-weight: bold;  }
.border {width: 100%;}
.PAGE_IN strong {font-size: 17px;}
.top {width: 100%;display: initial;margin: 0 0 0px 0;flex-wrap: initial;}
.top_pc {display: none;}
div.container img.hissu {width: 25px;}
div.container img.hissu2 {width: 25px;}
div.container img.hissu2 {width: 25px;margin-top: 10px;}

/*来店予約*/
.yoyaku {border-radius: 0%;padding-bottom: 80px;}
.yoyaku_tytle {position: absolute;top: -35px;right: 0;left: 0;margin: 0 auto;width: 75vw;}
.yoyaku_tytle img {width: 100%;}
.contents {margin-top: -50px;}
select {width: 90vw;padding: 1em 2vw;}

/* 円を消す */
.top_circle1{display: none;}
.top_circle2{display: none;}
.top_circle3{display: none;}
.top_circle4{display: none;}
.top_circle5{display: none;}
.top_circle6{display: none;}
.top_circle7{display: none;}
.top_circle8{display: none;}
.top_circle9{display: none;}

/* トップ */
#PAGE .top_matome{margin-top: -20px;}
#PAGE section .logo{width: 90vw;background: none;margin: 0 auto;padding: 10px 0 0 0;flex-direction: column;}
#PAGE section .logo img {width: 60vw;}
.logo_link{margin-right: 0px;width: 90vw;font-size: 13px;line-height: 15px;margin-top: 3px;}
.setsumei{display: block;font-size: 12px;line-height: 12px;width: 90vw;}
.top_wrap{width: 100vw;border-radius: 0px;padding: 0;}
.top_tytles{background: none;padding: 0;width: 100vw;top: 23vw;}
h1 {font-size: 30px;line-height: 42px;letter-spacing: .05em;text-align: center;margin: 0 auto;}
.top_tytle_sub{font-size: 16px;margin-top: 7px;text-align: center;}
.top_img {position: absolute;bottom: -14vw;left: 17vw;z-index: 4;max-width: 190px;width: 38vw;}

  /* 空き家の購入には、メリットがたくさん！ */
.POINT_WRAP{width: 95vw;flex-direction: column;margin-top: 30px;}
.POINT {width: 80vw;padding: 30px 5vw;margin: 0 auto;margin-bottom: 30px;max-width: initial;}
.POINT_TYTLE{width: 80vw;}
.POINT_TEXT{width: 80vw;}
.btn a{width: 80vw;}

/* 南日本ハウスではお得な空き家物件をたくさんご紹介しています！ */
.HOUSE_WRAP{width: 90vw;flex-direction: column;margin-top: 20px;}
.HOUSE {width: 80vw;max-width: initial;padding: 5vw;margin: 8px 0;border: none;}
.HOUSE:hover{border: none;}
.HOUSE_TYTLE{font-size: 19px;}

/* 空き家購入に関するコンテンツも続々配信中です！ */
.ARTICLE{flex-direction: column;border: none;}
.ARTICLE:hover{border: none;}
.ARTICLE_DATE{margin-top: 10px;}
.ARTICLE_IMG_LIST {max-width: initial;width: 90vw;border-radius: 0;margin: 0 auto;height: 170px;}
.ARTICLE_IMG_LIST img{position: absolute;left: -100%;right: -100%;top: -79%;bottom: -100%;margin: auto;}
.ARTICLE_IMG_LIST.NO_IMAGE{width: 90vw;}
.ARTICLE_TYTLES_LIST {width: 80vw;max-width: initial;margin-left: 0px;}
.ARTICLE_TEXT{max-width: initial;width: 80vw;margin-bottom: 30px;margin-top: 10px;}

/* 空き家を理想の住まいにリフォームしよう！ */
.REFORM_WRAP{flex-direction: column;width: 90vw;margin-top: 30px;}
.REFORM{max-width: initial;width: 80vw;padding: 20px 5vw;margin: 10px 0;border: none;}
.REFORM:hover{border: none;}

/*固定バー*/
.kotei {z-index: 2;padding: 5px 0;padding: 2px 0;  }
.kotei img {width: 100%;}

.button_matome{display: flex;}
.button_tel{width: 50vw;}
.button_form{width: 50vw;}
.footer {z-index: 1;}


.pankuzu { width: 90%; margin-top: 30px;flex-direction: column;flex-direction: row;flex-wrap: wrap;}

}
.grecaptcha-badge { z-index:100; }