@charset 'utf-8';

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


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


#PAGE .top_matome {width: 100%;text-align: center;margin-top: 0;position: relative;overflow: visible;}
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: #F0891D;
}

.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;
}


/* 共通 */
.CONTENTS {max-width: 1180px;margin: 0 auto;padding-top: 50px;padding-bottom: 50px;width: 90vw;}
.CONTENTS_TYTLE{text-align: center;}
.back_orange{background: #F0891D;}
.back_orange_img{background-image: url(../img/back_orange.png);background-size: cover;}
.back_white{background: white;}
.back_beige{background-image: url(../img/back_beige.png);background-size: cover;}
.text_white{color: white;}
.text_orange{color: #F0891D;}
.text_brown{color: #3C2C25;}
h2{font-size: 22px; position: relative;display: inline-block;margin-bottom: 1em;letter-spacing: .1em;font-weight: 600;}
h2:before {content: '';position: absolute;left: 50%;bottom: -9px;display: inline-block;width: 50px;height: 3px;-webkit-transform: translateX(-50%);transform: translateX(-50%);background-color: black;border-radius: 2px;}


/* トップ */
.TOP_WRAP{position: relative;}
.TOP_ENG {width: 30vw;position: absolute;top: 5vw;left: 64vw;max-width: 400px;}
.TOP_LOGO {width: 220px;position: absolute;top: 10px;z-index: 1;left: 20px;}
h1{font-weight: bold;font-size: 3.3vw;line-height: 4.8vw;letter-spacing: .04em;font-family: "toppan-bunkyu-midashi-go-std", sans-serif;font-weight: 900;font-style: normal;}
h1 span {font-size: 80px;margin-top: 15px;display: inline-block;}
.TOP_TYTLE {position: absolute;top: 12vw;left: 8vw;}
.TOP_TEXT {font-size: 1.4vw;font-weight: bold;margin-top: 25px;line-height: 2.4vw;letter-spacing: .05em;font-size: min(1.6vw,18px);}
.TOP_TYTLE_FUKIDASHI {position: relative;display: inline-block;margin: 1.5em 0;padding: 7px 10px;min-width: 120px;max-width: 100%;font-size: 16px;background: #3C2C25;border-radius: 15px;padding: 8px 3vw;overflow: visible;}
.TOP_TYTLE_FUKIDASHI:before {content: "";position: absolute;top: 100%;left: 50%;margin-left: -15px;border: 10px solid transparent;border-top: 10px solid #3C2C25;}
.TOP_TYTLE_FUKIDASHI p {margin: 0;padding: 0;color: white;font-weight: bold;font-size: 20px;left: .1em;letter-spacing: 0.05em;font-size: min(2vw,20px);}
.SIZE{font-size: 3.3vw;}

/* html {visibility: hidden;} */
html.wf-active {visibility: visible;}

/*お悩み*/
.Q_IMG {max-width: 750px;margin: 0 auto;width: 53vw;}
.Q_TEXT{font-size: 22px;letter-spacing: .05em;margin-top: 10px;line-height: 33px;font-weight: 600;}
h2.LINE_WHITE:before{background-color: white;}
.CONTENTS_BACK_Q{position: relative;z-index: 1;overflow: visible;}
.CONTENTS_BACK_Q:before {border-right: 30px solid transparent;border-left: 30px solid transparent;content: '';margin-left: -10px;position: absolute;bottom: -35px;left: 49%;border-top: 35px solid #F0891D;}



/*南日本ハウスは長期保証があるから安心！*/
.CONTENTS_ANSIN{display: flex;flex-direction: row;align-items: center;justify-content: center;}
.F_TEXT{font-size: 28px;letter-spacing: .05em;margin-top: 10px;line-height: 38px;font-weight: 600;}
.F_TEXT span{font-size: 40px;}
.ANSIN_TEXT{letter-spacing: .05em;}
.ANSIN_TEXT_TYTLE{font-size: 25px;font-weight: bold;margin-bottom: 19px;line-height: 32px;}
.ANSIN_TEXT_TEXT{font-size: 18px;}
.ANSIN_TEXT_TEXT span{font-size: 35px;color: #F0891D;font-weight: bold;}
.ANSIN_IMG{max-width: 360px;width: 25vw;}

/*南日本ハウスの住まい保証の3つの特徴*/
.FEATURES{display: flex;flex-direction: row;justify-content: space-between;margin-top: 50px;}
.FEATURE{max-width: 370px;width: 28vw;}
.FEATURE_TYTLE{font-size: 20px;font-weight: bold;margin-bottom: 5px;}
.FEATURE_IMG{margin-bottom: 15px;position: relative;}
.DECO {position: absolute;background: #92CF31;color: white;top: 0;font-weight: 600;text-align: center;width: 90px;	height: 90px;border-radius: 50%;}
.DECO small{font-size: 16px;line-height: 22px;}
.DECO span {font-size: 25px;position: absolute;right: 0;left: 0;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);}
.KIKAN{text-align: center;margin-top: 40px;border-radius: 25px;padding: 30px 0;}
.KIKAN_TYTLE{font-size: 23px;background: linear-gradient(transparent 60%, #FDFD8F 60%);width: 250px;margin: 0 auto;font-weight: bold;letter-spacing: .05em;}

.KIKAN_TEXTS{font-size: 21px;}
.KIKAN_TEXTS small{font-size: 16px;}
.KIKAN_TEXT{margin-top: 15px;margin-bottom: 5px;font-weight: bold;letter-spacing: .02em;}
.KIKAN_TEXT span{color: #F0891D;font-size: 30px;font-weight: 600;}

.content{color: white;margin-top: 20px;display: flex;justify-content: center;margin-top: 20px;overflow: visible;}
.content_sp{display: none;}
.step{display: flex;flex-wrap: wrap;list-style: none;position: relative;}
.fukidashi {position: absolute;width: 9vw;right: -6vw;top: -7vw;max-width: 110px;}
li.flow{position: relative;padding: 20px 1vw;margin: 0 15px 10px 0;background: #92CF31;font-size: 18px;font-weight: bold;}
li.flow::after{content: "";position: absolute;top: 0;right: -30px;border-width: 34px 15px;border-color: transparent transparent transparent #92CF31 ;border-style: solid;}
li.is-current{background: tomato;}
li.is-current::after{border-color: transparent transparent transparent tomato ;}


/*保証の対象となる基本構造部分*/
h2.LINE_ORANGE:before{background-color: #FF8739;}
.KOZO{max-width: 1180px;margin: 0 auto;display: flex;flex-direction: row;justify-content: center;padding: 25px 0;margin-bottom: 40px;margin-top: 25px;}
.KOZO_HOUSE {max-width: 665px;width: 50vw;margin-right: 2vw;}
.KOZO_MAN {max-width: 265px;width: 20vw;}
.DETAIL{max-width: 370px;margin-bottom: 60px;width: 28vw;}
.DETAIL_WRAP{max-width: 1180px;margin: 0 auto;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;margin-bottom: 60px;}
.DETAIL_PHOTO{position: relative;margin-bottom: 10px;}
.DETAIL_PHOTO_NAME{position: absolute;top: 0;background: #92CF31;color: white;font-size: min(1.5vw,18px);padding: 4px 18px;}
.DETAIL_TEXT{font-size: 16px;text-align: justify;}


.C_TEXT{font-size: 25px;font-weight: 600;text-align: left;margin-top: 10px;}
.CON_TEXT{line-height: 25px;font-size: 16px;margin-top: 15px;text-align: left;}
.CONTACT_CONTENTS_TYTLE{width: 700px;margin: 0 auto;position: relative;overflow: visible;}
.CONTACT_IMG{position: absolute;width: 280px;top: 0;right: -80px;}


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



/*固定バー*/
.kotei {padding: 15px 0;position: fixed;bottom: 0;z-index: 100;width: 100vw;background: #3C2C25;}
.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;}





@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;}

.sp {width: 100%;display: block;}
.pc {display: none;}
.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;padding-top: 60px;}
.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;}




/* 共通 */
.CONTENTS{width: 90vw;flex-direction: column;margin-bottom: 0px;}

/* トップ */
.TOP_LOGO{width: 180px;}
.TOP_ENG {width: 67vw;position: absolute;top: initial;bottom: 10vw;left: 29vw;}
h1 {width: 90vw;margin: 20px 5% 0 5%;margin: 0;font-size: 27px;letter-spacing: 1px;line-height: 48px;text-align: center;}
h1 span{font-size: 65px;display: inline-block;}
.TOP_TYTLE_FUKIDASHI p{font-size: 16px;}
.TOP_TYTLE{display: flex;flex-direction: column;justify-content: center;top: 19vw;left: 0vw;margin: 0 5vw;}
.TOP_TEXT {font-size: 14px;font-weight: bold;margin-top: 17px;line-height: 25px;letter-spacing: 0px;text-align: center;}
.SIZE{font-size: 40px;}


/*お悩み*/
.Q_IMG{width: 90vw;margin-top: 20px;}

/*南日本ハウスは長期保証があるから安心！*/
.ANSIN_IMG{width: 70vw;}
.ANSIN_TEXT_TEXT {font-size: 16px;text-align: justify;font-weight: bold;}
.KIKAN{border-radius: 0;margin-top: 0;}
.content{color: white;}
.content_sp{display: block;}
.step{display: flex;flex-direction: column;width: 70vw;list-style: none;margin: 0 auto;}
li.flow_sp{position: relative;padding: 15px 30px;margin-bottom: 25px;font-size: 18px;letter-spacing: 1px;font-weight: bold;background: #92CF31;padding: 15px 30px 5px 30px;}
li.flow_sp::after{content: "";position: absolute;bottom: -30px;right: 0;border-width: 15px 35vw;border-color: #92CF31 transparent transparent transparent;border-style: solid;}
li.flow_last{background: #F0891D;padding: 15px 30px 15px 30px;}
li.flow_last::after{display: none;}
li.is-current{background: tomato;}
li.is-current::after{border-color: tomato transparent transparent transparent;}

/*南日本ハウスの住まい保証の3つの特徴*/
.F_TEXT{font-size: 24px;}
.FEATURES{flex-direction: column;margin-top: 30px;}
.FEATURE{margin-bottom: 50px;width: 90vw;max-width: initial;}
.FEATURE_IMG{width: 90vw;}
.FEATURE_TYTLE{font-size: 22px;font-weight: bold;margin-bottom: 5px;}
.FEATURE_TEXT{font-size: 16px;font-weight: bold;}
.KIKAN_TEXT{margin: 0;margin-top: 25px;margin-bottom: 10px;font-size: 17px;}
.KIKAN_TEXTS small{font-size: 14px;text-align: left;width: 79vw;display: inline-block;line-height: 23px;}

/*保証の対象となる基本構造部分*/
.KOZO{width: 90vw;flex-direction: column;margin-top: 30px;}
.KOZO_HOUSE{width: 95vw;margin: 0 auto;width: 90%;}
.KOZO_MAN{width: 80vw;margin: 0 auto;margin-top: 20px;}
.DETAIL{width: 90vw;max-width: initial;}
.DETAIL_WRAP{width: 90vw;margin-bottom: 0;flex-direction: column;}
.DETAIL_PHOTO{width: 90vw;}
.DETAIL_PHOTO_NAME{font-weight: bold;font-size: 18px;}
.DETAIL_TEXT{font-weight: 600;}

/* お問い合わせ */
.CONTACT_CONTENTS_TYTLE{width: 90vw;}
.C_TEXT{line-height: 38px;text-align: center;font-size: 24px;}
.CON_TEXT{text-align: justify;}

/*固定バー*/
.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;}


}