@charset "UTF-8";
@media screen and (min-width: 768px),print {

#contentsmain {   margin-bottom: 96px;}
#contentsmain .inner-Box1 { text-align: center; width: 1100px; margin: 0 auto -140px; padding-top: 36px;}
#contentsmain .inner-Box1 h2{ width: 530px; height: 80px; border-radius: 40px; background-color: #00345c; color: #fff; font-size: 40px; font-weight: 700; margin: 0 auto -40px; position: relative;}
#contentsmain .inner-Box1 figure.photo1 {  margin-bottom: -85px;}
#contentsmain .inner-Box1 p{ font-size: 24px; font-weight: 700; letter-spacing: 1.2px; line-height: 1; }
#contentsmain .inner-Box1 p span{ background: #fff; padding: 17px 25px; display: inline-block; margin-bottom: 6px; }
#contentsmain .inner-Box2 {  background-color: #f4efe7;padding-top: 193px;}
#contentsmain .inner-Box2 figure.photo2 { position: absolute; top: 0; left: 0; }
#contentsmain .inner-Box2 .inbox { width: 1280px; margin: 0 auto;  min-height: 432px; position: relative; }
#contentsmain .inner-Box2 .textbox { background: #fff; padding: 56px 60px 20px 60px; width: 640px; position: absolute; top: 53px; right: 40px; }
#contentsmain .inner-Box2 .inbox .textbox h3{ font-size: 24px; font-weight: 700; letter-spacing: 1.2px; line-height: 40px; margin-bottom: 23px;}
#contentsmain .inner-Box2 .inbox .textbox p{ font-size: 16px; letter-spacing: 0.8px; line-height: 28px; margin-bottom: 30px;}

#contentsmain .inner-Box3 {  background-color: #f4efe7;padding-bottom: 334px;margin-bottom: -202px;}
#contentsmain .inner-Box3 figure.photo2 { position: absolute; top: 10px; right: 0; }
#contentsmain .inner-Box3 .inbox { width: 1280px; margin: 0 auto;  min-height: 432px; position: relative; }
#contentsmain .inner-Box3 .textbox { background: #fff; padding: 56px 60px 20px 60px; width: 640px; position: absolute; top: 63px; left: 40px; }
#contentsmain .inner-Box3 .inbox .textbox h3{ font-size: 24px; font-weight: 700; letter-spacing: 1.2px; line-height: 40px; margin-bottom: 23px;}
#contentsmain .inner-Box3 .inbox .textbox p{ font-size: 16px; letter-spacing: 0.8px; line-height: 28px; margin-bottom: 30px;}


#contentsmain .inner-Box4 { width: 1100px; background-color: #f3f2f3; margin: 0 auto; }
#contentsmain .inner-Box4 h4{ color: #ffffff; font-size: 24px; font-weight: 700; letter-spacing: 1.2px; text-align: center; background-color: #332e1b; padding: 9px;margin-bottom: 36px;}
#contentsmain .inner-Box4 ul{ padding-left: 198px;  margin-bottom: 35px;}
#contentsmain .inner-Box4 ul li{ position: relative; font-size: 22px; letter-spacing: 1.1px; margin-bottom: 10px; }
#contentsmain .inner-Box4 ul li p{  }
#contentsmain .inner-Box4 ul li span.icon{ position: absolute; top: -9px; left: -35px; display: block;}
#contentsmain .inner-Box4 ul li span{ font-weight: bold; }
#contentsmain .inner-Box4 .inbox{ text-align: center; background-color: #ffe412; height: 140px; position: relative; padding-top: 21px;line-height: 1.6;}
#contentsmain .inner-Box4 .inbox::before{position: absolute;bottom: -8px;left: 110px;}
#contentsmain .inner-Box4 .inbox::after{ content: url('../images/house/main-photo05.png'); position: absolute; bottom: -8px; right: 110px; }
#contentsmain .inner-Box4 .inbox p{ text-align: center; font-size: 32px; font-weight: 700; letter-spacing: 1.6px; }
#contentsmain .inner-Box4 .inbox p span{ font-size: 22px; display: block; }

#contents01 { width: 1200px; margin: 0 auto 80px; }
#contents01 span.no { display: block; margin-bottom: 18px;}
#contents01 h2{ width: 1200px; height: 160px; text-align: center; background: url('../images/house/contents-ttlback.png')no-repeat top center; padding-top: 37px;color: #ffffff;font-size: 32px;font-weight: 700;letter-spacing: 1.6px;line-height: 1;}
#contents01 .inner-Box { background-color: #f4efe7; border-bottom: 30px solid #00345c; padding-top: 55px;padding-bottom: 31px;}
#contents01 .inner-Box .inbox { margin: 0 80px; position: relative; padding-right: 540px }
#contents01 .inner-Box h3{ font-size: 24px; font-weight: 700; letter-spacing: 1.2px; margin-bottom: 17px; }
#contents01 .inner-Box figure{ position: absolute; top: 5px; right: 0; }
#contents01 .inner-Box p{ font-size: 16px; letter-spacing: 0.8px; line-height: 28px; margin-bottom: 30px; }

#contents02 { width: 1200px; margin: 0 auto 80px; }
#contents02 span.no { display: block; margin-bottom: 18px;}
#contents02 h2{ width: 1200px; height: 160px; text-align: center; background: url('../images/house/contents-ttlback.png')no-repeat top center; padding-top: 37px;color: #ffffff;font-size: 32px;font-weight: 700;letter-spacing: 1.6px;line-height: 1;}
#contents02 .inner-Box { background-color: #f4efe7; border-bottom: 30px solid #00345c; padding-top: 55px;padding-bottom: 31px;}
#contents02 .inner-Box .inbox1 { margin: 0 80px; position: relative; padding-right: 540px ;min-height: 358px;}
#contents02 .inner-Box .inbox1 h3{ font-size: 24px; font-weight: 700; letter-spacing: 1.2px; margin-bottom: 17px; }
#contents02 .inner-Box .inbox1 figure{ position: absolute; top: 5px; right: 0; }
#contents02 .inner-Box .inbox1 p{ font-size: 16px; letter-spacing: 0.8px; line-height: 28px; margin-bottom: 30px; }
#contents02 .inner-Box .inbox2 { margin: 0 80px; position: relative; padding-left: 540px;}
#contents02 .inner-Box .inbox2 h3{ font-size: 24px; font-weight: 700; letter-spacing: 1.2px; margin-bottom: 17px; }
#contents02 .inner-Box .inbox2 figure{ position: absolute; top: 5px; left: 0; }
#contents02 .inner-Box .inbox2 p{ font-size: 16px; letter-spacing: 0.8px; line-height: 28px; margin-bottom: 30px; }

#contents03 { width: 1200px; margin: 0 auto 119px; }
#contents03 span.no { display: block; margin-bottom: 18px;}
#contents03 h2{ width: 1200px; height: 160px; text-align: center; background: url('../images/house/contents-ttlback.png')no-repeat top center; padding-top: 37px;color: #ffffff;font-size: 32px;font-weight: 700;letter-spacing: 1.6px;line-height: 1;}
#contents03 .inner-Box { background-color: #f4efe7; border-bottom: 30px solid #00345c; padding-top: 55px;padding-bottom: 31px;}
#contents03 .inner-Box .inbox { margin: 0 80px; position: relative; padding-right: 540px }
#contents03 .inner-Box h3{ font-size: 24px; font-weight: 700; letter-spacing: 1.2px; margin-bottom: 17px; }
#contents03 .inner-Box figure{ position: absolute; top: 5px; right: 0; }
#contents03 .inner-Box p{ font-size: 16px; letter-spacing: 0.8px; line-height: 28px; margin-bottom: 30px; }

#contents04 { background: url('../images/house/bottom-back.jpg')no-repeat top center; margin-bottom: 100px;}
#contents04 .inner-Box {  padding-top: 43px;}
#contents04 .inner-Box h2 {text-align: center;margin-bottom: 80px;position: relative;top: -3px;}
#contents04 .inner-Box h2 img{  position: relative;left: 5px;}
#contents04 .inner-Box ul{ width: 1100px; margin: 0 auto; display: -webkit-box; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#contents04 .inner-Box ul li{ width: 540px; margin-right: 20px; text-align: center;margin-bottom: 60px;}
#contents04 .inner-Box ul li:nth-child(2n){ margin-right: 0px; position: relative; top: 80px; }
#contents04 .inner-Box ul li p{ width: 540px; height: 120px; text-align: center; background: url('../images/house/bottom-ttlback.svg'); color: #fff;font-size: 24px; font-weight: 700; letter-spacing: 1.2px; padding-top: 27px;margin-bottom: -21px;}
#contents04 .inner-Box ul li:nth-child(3) p{ padding-top: 9px; }
#contents04 .inner-Box ul li p span{ color: #ffe412; }
#contents04 .inner-Box figure{  }


#contentsbottom { text-align: center; margin-bottom: -30px;}
#contentsbottom .inner-Box {  }
#contentsbottom .inner-Box h2 {  }
#contentsbottom .inner-Box h2 img{  }

.bottom-banner{ width: 360px;  margin: 0 auto 104px; display: -webkit-box; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative;z-index: 3;background: #fff;}
.bottom-banner li{ width: 360px; text-align: center; }
.bottom-banner li img{ margin-bottom: 16px; }
.bottom-banner li p{ font-size: 16px; letter-spacing: 0.8px; line-height: 28px; font-weight: bold;}


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

#contentsmain {   margin-bottom: 12.5vw;padding-top: 3vw;}
#contentsmain .inner-Box1 { text-align: center;  margin: 0 auto -18.3vw; padding-top: 4.7vw;}
#contentsmain .inner-Box1 h2{  height: 10.4vw; border-radius: 5.2vw; background-color: #00345c; color: #fff; font-size: 6.2vw; font-weight: 700; margin: 0 13vw -5.2vw; position: relative;}
#contentsmain .inner-Box1 figure.photo1 {  margin: 0 4vw -11.1vw;}
#contentsmain .inner-Box1 p{ font-size: 4.3vw; font-weight: 700; letter-spacing: 0.3vw; line-height: 1; }
#contentsmain .inner-Box1 p span{ background: #fff; padding: 2.2vw 2.3vw; display: inline-block; margin-bottom: 0.8vw; }
#contentsmain .inner-Box2 {  background-color: #f4efe7;padding-top: 27.2vw;padding-bottom: 7vw;}
#contentsmain .inner-Box2 figure.photo2 {    margin-bottom: -5vw;}
#contentsmain .inner-Box2 .inbox {  margin: 0 4vw;   position: relative; }
#contentsmain .inner-Box2 .textbox { background: #fff; padding: 7vw 4vw 5vw 4vw;     margin: 0 3vw;position: relative;}
#contentsmain .inner-Box2 .inbox .textbox h3{ font-size: 4.5vw; font-weight: 700; letter-spacing: 0.3vw; line-height:1.6; margin-bottom: 3.0vw;}
#contentsmain .inner-Box2 .inbox .textbox p{ font-size: 3.6vw; letter-spacing: 0.3vw; line-height:1.6; margin-bottom: 3.9vw;}

#contentsmain .inner-Box3 {  background-color: #f4efe7;padding-bottom: 20vw;margin-bottom: -15vw;}
#contentsmain .inner-Box3 figure.photo2 {    margin-bottom: -5vw;}
#contentsmain .inner-Box3 .inbox {  margin: 0 4vw;   position: relative; }
#contentsmain .inner-Box3 .textbox { background: #fff; padding: 7vw 4vw 5vw 4vw;     margin: 0 3vw;position: relative;}
#contentsmain .inner-Box3 .inbox .textbox h3{ font-size: 4.5vw; font-weight: 700; letter-spacing: 0.3vw; line-height:1.6; margin-bottom: 3.0vw;}
#contentsmain .inner-Box3 .inbox .textbox p{ font-size: 3.6vw; letter-spacing: 0.3vw; line-height:1.6; margin-bottom: 3.9vw;}


#contentsmain .inner-Box4 {  background-color: #f3f2f3; margin: 0 4vw; }
#contentsmain .inner-Box4 h4{ color: #ffffff; font-size: 4.3vw; font-weight: 700; letter-spacing: 0.3vw; text-align: center; background-color: #332e1b; padding: 3.2vw 0;margin-bottom: 4.7vw;}
#contentsmain .inner-Box4 ul{   margin-bottom: 4.6vw;margin-left: 10vw;margin-right: 5vw;}
#contentsmain .inner-Box4 ul li{ position: relative; font-size: 3.6vw; letter-spacing: 0.3vw; margin-bottom: 1.3vw; }
#contentsmain .inner-Box4 ul li p{  }
#contentsmain .inner-Box4 ul li span.icon{ position: absolute; top: -1.2vw; left: -4.6vw; display: block;width: 3vw;}
#contentsmain .inner-Box4 ul li span{ font-weight: bold; }
#contentsmain .inner-Box4 .inbox{ text-align: center; background-color: #ffe412;  position: relative; line-height: 1.6;padding-top: 4.7vw; padding-bottom: 3vw;}
#contentsmain .inner-Box4 .inbox::before{position: absolute;bottom: -1.0vw;left: 0vw;transform: scale(0.4);transform-origin: bottom left;}
#contentsmain .inner-Box4 .inbox::after{ content: url('../images/house/main-photo05.png'); position: absolute; bottom: -1.0vw; right: 0vw; transform: scale(0.4); transform-origin: bottom right;}
#contentsmain .inner-Box4 .inbox p{ text-align: center; font-size: 4.2vw; font-weight: 700; letter-spacing: 0.3vw; }
#contentsmain .inner-Box4 .inbox p span{ font-size: 3.6vw; display: block; }

#contents01 {  margin: 0 4vw 10.4vw; }
#contents01 span.no { display: block; margin: 0 auto 1vw;width: 6vw;}
#contents01 h2{  height: 27.8vw; text-align: center; background: url('../images/house/sp-contents-ttlback.png')no-repeat top center; background-size: 100% auto; padding-top: 0.8vw;color: #ffffff;font-size: 4.8vw;font-weight: 700;letter-spacing: 0.3vw;line-height: 1.6;}
#contents01 .inner-Box { background-color: #f4efe7; border-bottom: 3.9vw solid #00345c; padding-top: 4vw;padding-bottom: 4.0vw;}
#contents01 .inner-Box .inbox { margin: 0 4vw; position: relative; }
#contents01 .inner-Box h3{ font-size: 4vw; font-weight: 700; letter-spacing: 0.3vw; margin-bottom: 2.2vw; }
#contents01 .inner-Box figure{ margin-bottom: 4vw; }
#contents01 .inner-Box p{ font-size: 3.6vw; letter-spacing: 0.3vw; line-height:1.6; margin-bottom: 3.9vw; }

#contents02 {  margin: 0 4vw 10.4vw; }
#contents02 span.no { display: block; margin: 0 auto 1vw;width: 6vw;}
#contents02 h2{  height: 27.8vw; text-align: center; background: url('../images/house/sp-contents-ttlback.png')no-repeat top center; background-size: 100% auto; padding-top: 0.8vw;color: #ffffff;font-size: 4.8vw;font-weight: 700;letter-spacing: 0.3vw;line-height: 1.6;}
#contents02 .inner-Box { background-color: #f4efe7; border-bottom: 3.9vw solid #00345c; padding: 4vw;}
#contents02 .inner-Box .inbox { margin: 0 4vw; position: relative; }
#contents02 .inner-Box h3{ font-size: 4vw; font-weight: 700; letter-spacing: 0.3vw; margin-bottom: 2.2vw; }
#contents02 .inner-Box figure{ margin-bottom: 4vw; }
#contents02 .inner-Box p{ font-size: 3.6vw; letter-spacing: 0.3vw; line-height:1.6; margin-bottom: 3.9vw; }
#contents02 .inner-Box .inbox2 {  position: relative; }
#contents02 .inner-Box .inbox2 h3{ font-size: 4vw; font-weight: 700; letter-spacing: 0.3vw; margin-bottom: 2.2vw; }
#contents02 .inner-Box .inbox2 figure{ margin-bottom: 4vw; }
#contents02 .inner-Box .inbox2 p{ font-size: 3.6vw; letter-spacing: 0.3vw; line-height:1.6; margin-bottom: 3.9vw; }

#contents03 {  margin: 0 4vw 10.4vw; }
#contents03 span.no { display: block; margin: 0 auto 1vw;width: 6vw;}
#contents03 h2{  height: 27.8vw; text-align: center; background: url('../images/house/sp-contents-ttlback.png')no-repeat top center; background-size: 100% auto; padding-top: 0.8vw;color: #ffffff;font-size: 4.8vw;font-weight: 700;letter-spacing: 0.3vw;line-height: 1.6;}
#contents03 .inner-Box { background-color: #f4efe7; border-bottom: 3.9vw solid #00345c; padding: 4vw;}
#contents03 .inner-Box .inbox {  position: relative; }
#contents03 .inner-Box h3{ font-size: 4vw; font-weight: 700; letter-spacing: 0.3vw; margin-bottom: 2.2vw; }
#contents03 .inner-Box figure{ margin-bottom: 4vw; }
#contents03 .inner-Box p{ font-size: 3.6vw; letter-spacing: 0.3vw; line-height:1.6; margin-bottom: 3.9vw; }


#contents04 { background: url('../images/house/sp-bottom-back.jpg')no-repeat top center; background-size: 100% auto; margin-bottom: 7vw;}
#contents04 .inner-Box {  padding-top: 5.6vw;}
#contents04 .inner-Box h2 { text-align: center; margin: 0 10vw -0.6vw 6vw;position: relative;top: -9.5vw;}
#contents04 .inner-Box h2 img{position: relative;left: 0.7vw;top: 0.4vw;}
#contents04 .inner-Box ul{  margin: 0 7vw; display: -webkit-box; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#contents04 .inner-Box ul li{   text-align: center;margin-bottom: 0.8vw;}
#contents04 .inner-Box ul li p{  height: 24.6vw; text-align: center; background: url('../images/house/bottom-ttlback.svg'); color: #fff;font-size: 4.6vw; font-weight: 700; letter-spacing: 0.3vw; padding-top: 7.5vw;margin-bottom: -5.7vw;background-size: 100% 100%;}
#contents04 .inner-Box ul li:nth-child(3) p{ padding-top: 3.2vw; }
#contents04 .inner-Box ul li p span{ color: #ffe412; }
#contents04 .inner-Box figure{ margin: 0 3vw 4vw; }

#contentsbottom { text-align: center; margin: 0 4vw;}
#contentsbottom .inner-Box {  }
#contentsbottom .inner-Box h2 {  }
#contentsbottom .inner-Box h2 img{  }

.bottom-banner{  padding: 8vw 14vw 4vw; margin: 0 4vw;display: -webkit-box; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.bottom-banner li{   margin-bottom: 5vw; text-align: center; }
.bottom-banner li img{ margin-bottom: 2vw; }
.bottom-banner li p{ font-size: 3.8vw; letter-spacing: 0.3vw; line-height:1.6; font-weight: bold;}

}