@charset "utf-8";
/* ==========================================================

title : 【東建コーポレーション】デザイン | 2×4 スイート・テラス
scope : /apartment/2_4_suite_terrace/design/

last modify : 2020/12/16 TCV_ヴィ/ Doan Thi Tuong Vi 新規作成

=============================================================== */

/* -area
---------------------------------------------------------- */
[id$="-area"], [id$="_area"]{
	margin:0 auto;
}

[id$="-area"] p , [id$="_area"] p{
	line-height: 25px;
}

/* 詳しくはこちら共通 */
[id$="-area"] .btn_info, [id$="_area"] .btn_info{
 display:block;
 background:#fff;
 height:35px;
 width:150px;
}
[id$="-area"] a.btn_info:hover, [id$="_area"] a.btn_info:hover{
	opacity:1;
}

h1 span {
  font-size: 0px;
  text-indent: -99999999px;
}

/* #design_area
---------------------------------------------------------- */
#design_area p {
  margin: 40px auto 48px;
  width: 665px;
}


/* #outsid_area
---------------------------------------------------------- */
#outsid_area {
  text-align: center;
}

#outsid_area h2 {
  margin: 0 auto 30px;
}

#outsid_area>figure {
  background-color: #fff;
  text-align: center;
}

#outsid_area>dl {
  background-color: #f9f5f1;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  padding: 50px 0 57px;
}

#outsid_area>dl>div {
  padding-top: 253px;
  width: 280px;
}

#outsid_area>dl>div:nth-child(1) {
  background: url(../image/img-daytime.png?0626) 0 0 no-repeat;
  margin-right: 50px;
}

#outsid_area>dl>div:nth-child(2) {
  background: url(../image/img-night.png?0626) 0 0 no-repeat;
}

#outsid_area>dl>div>dd>p {
  margin: 16px auto 10px;
  text-align: left;
}

/* #entrance_area
---------------------------------------------------------- */
#entrance_area .inner {
  -webkit-align-items: center;
  align-items: center;
  background-color: #fff;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  -ms-grid-row-align: center;
}

#entrance_area .inner>* {
  width: 100%;
}

#entrance_area .inner .wrap_title {
  background: #f9f5f1;
  padding: 38px 0 47px;
}

#entrance_area .inner h3 {
  margin: 0 auto 14px;
}

#entrance_area .inner p {
  margin: 0 auto;
}

#entrance_area .photo {
  background: #000;
}

#entrance_area .inner h4 {
  border-bottom: 1px solid #001d3c;
  color: #001d3c;
  font-size: 22px;
  font-weight: 600;
  line-height: 22px;
  margin: 50px auto 21px;
  padding-bottom: 12px;
  width: 870px;
}

.lead {
  margin: 24px auto 0;
}

.lead>* {
  display: inline-block;
  text-align: left;
  width: 714px;
}


#entrance_area .entrance_inner {
  margin-top: 66px;
}

#entrance_area .entrance_inner .lead {
  letter-spacing: -.03em;
  margin: -5px auto 0;
}


.colours {
  padding: 40px 0;

}

.colours.light {
  background: #f4f3e7;
  margin-top: 15px;
}

.colours.dark {
  background: #e9e3b4;
}

.colours h3.head_3 {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  width: 282px;
  background: url(../image/bg-ttl01.png) center center no-repeat;
  padding: 13.5px 0;
  margin: 0 auto;
}

.colours .colours_top {

  display: flex;
  margin: 20px auto 0;
  width: 1020px;
}

.colours.light .colours_top {
  border-bottom: 2px solid #c0be9d;
  border-top: 2px solid #c0be9d;
}

.colours.dark .colours_top {
  border-bottom: 2px solid #b1a868;
  border-top: 2px solid #b1a868;
}

.colours .colours_top>* {
  width: 510px;
}

.colours.light .colours_top .top {
  text-align: left;
  height: 248px;
  background: #e5e4d5;
}

.colours.light .colours_top .top .fl {
  display: inline-block;
  margin: 30px 66px 0 48px;
}

.colours.light .colours_top .top .fr {
  display: inline-block;
  vertical-align: top;
  margin: 105px 0 0 0;
}

.colours.light .colours_top .bot {
  text-align: left;
  height: 248px;
  background: #dbdaca;
}

.colours.light .colours_top .bot .fl {
  display: inline-block;
  margin: 107px 66px 0 83px;
}

.colours.light .colours_top .bot .fr {
  display: inline-block;
  vertical-align: top;
  margin: 24px 0 0 0;
}

.colours.dark .colours_top .top {
  text-align: left;
  height: 248px;
  background: #e1daa1;
}

.colours.dark .colours_top .top .fl {
  display: inline-block;
  margin: 14px 63px 0 45px;
}

.colours.dark .colours_top .top .fr {
  display: inline-block;
  vertical-align: top;
  margin: 104px 0 0 0;
}

.colours.dark .colours_top .bot {
  text-align: left;
  height: 248px;
  background: #d6ce94;
}

.colours.dark .colours_top .bot .fl {
  display: inline-block;
  margin: 106px 64px 0 92px;
}

.colours.dark .colours_top .bot .fr {
  display: inline-block;
  vertical-align: top;
  margin: 25px 0 0 0;
}

.colours .colours_bottom {
  border: 1px solid #afab7a;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  margin: 40px auto 0;
  padding: 30px 30px 28px;
  width: 824px;
}

.colours .colours_bottom::after {
  content: none;
}

.colours .colours_bottom .fl {
  width: 260px;
}

.colours .colours_bottom .fr {
  width: 480px;
  overflow: visible!important;
}

.colours .colours_bottom .fr .head_4 {
  font-size: 17px;
  font-weight: 600;
  padding-left: 18px;
  position: relative;
  margin-top: -6px;
  text-align: left;
}

.colours .colours_bottom .fr .head_4::after {
  background: #afab7a;
  content: "";
  height: 10.62px;
  left: 2px;
  position: absolute;
  top: 44%;
  transform: translateY(-50%) rotate(45deg);
  width: 10.62px;
}

.colours .colours_bottom .fr .text {
  padding-left: 10px;
  text-align: justify;
  margin-top: 6px;
}