@charset "utf-8";

figure {
  position: relative;
}

/*main_Visual*/
.main_Visual {
  position: relative;
}

.main_Visual>div {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 94%;
}

.main_Visual .ttl,
.lead_area .ttl {
  width: 60%;
  max-width: 286px;
  margin: 0 auto 60px;
}

.main_Visual .copy {
  font-size: 20px;
  line-height: 2.0;
  letter-spacing: 0.15em;
}

/* .main_Visual .text-cont {
  position: absolute;
  top: 50%;
  left: 75%;
  transform: translate(-50%, -50%);
  width: 50%;
  padding: 3% 0;
} */

.text-cont {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 53%;
  padding: 3% 0;
}

.text-cont h3 {
  position: relative;
  font-size: 20px;
  line-height: 2.0;
  letter-spacing: 0.15em;
  color: #a78d3f;
  text-align: center;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 1.0)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.5))  drop-shadow(0 0 6px rgba(0, 0, 0, 0.5));
}

.text-cont h3 span {
  font-size: 200%;
  letter-spacing: 0.2em;
}

.text-cont span.line {
  font-size: unset;
  display: block;
  width: 24%;
  margin: 0 auto 2em;
}

.copy {
  text-align: center;
  font-size: 18px;
  line-height: 2.4;
}

.copy.single_unit.pc {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* width: fit-content; */
  width: 100%;
  margin: 0 auto;
  font-size: 18px;
  letter-spacing: 0.1em;
  text-align: left;
}

.copy.single_unit .single_unit_txt {
  text-align: center;
}

.cl-g {
  color: #6a5625;
}

.cl-g-h {
  color: #cca75e;
}

.cl-g-h2 {
  color: #c9bb98;
}

.lead_area {
  position: relative;
  background: url(../img/lead_img.jpg)no-repeat center;
  background-size: cover;
  width: 100%;
  height: 0;
  padding-top: 44.285714285714286%;
}

.lead_area>div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 94%;
}

.lead_area .ttl {
  width: 60%;
  max-width: 236px;
  margin: 0 auto 60px;
}

.lead_area .copy {
  text-align: center;
}

.deco {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 135px;
}

.inner_1320 {
  width: 94%;
  max-width: 1320px;
  margin: 0 auto;
}

.sec01 {
  padding: 80px 0;
  background: url(../img/bg_variation.jpg)no-repeat center center;
  background-size: cover;
}

.sec01 .ttl_variation {
  max-width: 328px;
  margin: 0 auto 30px;
}

.sec01 ul.btn_List {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.sec01 ul.btn_List li {
  /* max-width: 280px; */
  width: calc((100% - 6%) / 4);
  /* width: calc((100% - 6%) / 4); */
  margin: 0 2% 2% 0;
}

.sec01 ul.btn_List li:nth-of-type(4n) {
  margin-right: 0;
}

.sec01 ul.btn_Listli a {
  display: block;
  transition: .3s;
}

.sec01 ul.btn_List li a:hover {
  opacity: .5;
  transition: .3s;
}

.sec01 ul.btn_List li a.noLink {
  pointer-events: none;
}

.sec02 .type_box {
  padding: 80px 0;
  color: #FFF;
}

.sec02 .type_box.ftype {
  background: #201817;
}

.sec02 .type_box.ktype {
  background: #4C4948;
}

.sec02 .type_box.ltype {
  background: #231815;
}

.sec02 .type_box .type_ttl {
  text-align: center;
}

.sec02 .type_box .type_ttl h4 {
  font-size: 30px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  background: url(../img/ttl_line.svg)no-repeat 0 bottom;
  background-size: contain;
  padding: 0 0 10px;
  margin-bottom: 30px;
}

.sec02 .type_box .type_ttl p {
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  margin-bottom: 30px;
}

.sec02 .type_box .madori {
  max-width: 1000px;
  width: 65%;
  margin: 0 auto 60px;
}

.sec02 .type_box ul.point {
  max-width: 800px;
  width: 94%;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto;
}

.sec02 .type_box ul.point li {
  max-width: 280px;
  width: 94%;
  margin: 0 0.8% 3%;
}


.fontL {
  font-size: 150%;
}

.fontS {
  font-size: 80%;
}


.hanrei {
  width: 40%;
  padding: 20px 0 0;
  margin-left: auto;
}

[id^="area0"] {
  padding-top: 0px;
  margin-top: -0px;
}

.new{
position: relative;
}
.new::before{
content: "NEW";
position: absolute;
top: 0.4em;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Cormorant Garamond', serif;
color: #e7bc3b;
font-size: clamp(10px, 12px, 12px);
letter-spacing: 0.18em;
background: #770d0d;
padding: 0.2em 0.5em;
font-weight: lighter;
z-index: 100;
}

.floor_type{
  margin: 60px auto 0;
}
.floor_type:not(:first-of-type){
  margin: 50px auto 0;
}

.floor_type .type_ttl{
  font-size: clamp(20px, 3vw, 34px);
  letter-spacing: 0.08em;
  color: #735b21;
  margin: 0 auto 2em;
}
.floor_type .type_ttl h4{
  text-align: center;
border-bottom: 1px solid #735b21;
  padding: 0 1em 0.5em;
}

.ugoclo_Bnr {
  max-width: 500px;
  margin: 50px auto 50px;
}
.ugoclo_Bnr a {
  display: block;
  transition: .3s;
}
.ugoclo_Bnr a:hover {
  opacity: .5;
  transition: .3s;
}

#plan .notes_Wrap {
  width: 94%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 0 100px;
}

.icon_mr {
  position: relative;
}
.icon_mr::after {
  content: "建物内モデルルームプラン";
  display: block;
  font-size: clamp(12px,1.2vw,14px);
  color: #fff;
  background: rgb(129,25,30);
  background: linear-gradient(90deg, rgba(129,25,30,1) 0%, rgba(71,4,8,1) 100%);
  width: fit-content;
  padding: 0.5em;
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
/*
.icon_mr.livinghouse::after {
  content: "建物内モデルルームプラン";
  top: unset;
  bottom: -12px;
}
*/
.livinghouse {
  position: relative;
}

.livinghouse p {
position: absolute;
  display: block;
  text-align: center;
  font-size: clamp(11px,1.2vw,14px);
  color: #fff;
/*  background: #256490;*/
background: rgb(129,25,30);
  background: linear-gradient(90deg, rgba(129,25,30,1) 0%, rgba(71,4,8,1) 100%);
  width: fit-content;
  line-height: 1.3;
  padding: 0.4em 0.7em;
  top: -3.5em;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.livinghouse p span{
  color: #ffe9be;
}


/*=========================================================================================================
sp
=========================================================================================================*/
@media screen and (max-width: 767px) {
.main_Visual>figure {
background: #000;
}
.main_Visual>figure img {
opacity: 0.6;
}
.main_Visual>div.sp {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%,-50%);
    width: 94%;
    margin: 0 auto;
}
.main_Visual>div.sp .ttl {
    width: 40%;
    max-width: 236px;
    margin: 0 auto 30px;
}
.main_Visual .copy {
text-align: center;
    font-size: 18px;
    line-height: 1.8;
}

  .copy {
    text-align: left;
    font-size: 18px;
    line-height: 1.8;
  }

  .lead_area {
  position: relative;
    background: url(../img/lead_img_sp.jpg)no-repeat center;
    /* padding-top: 61.104582843713278%; */
    padding: 60px 0;
    padding-top: 68.75%;
    background-size: cover;
  }


  .lead_area>div {
    width: 94%;
    margin: 0 auto;
  }

  .lead_area .ttl {
    width: 40%;
    max-width: 236px;
    margin: 0 auto 30px;
  }

  .copy.single_unit.sp {
    font-size: 16px;
    margin: 60px auto;
  }
    .copy.single_unit {
    position: absolute;
    top: 50%;
left: 50%;
transform: translate(-50%,-50%);
    color: #fff;
    font-size: 16px;
    line-height: 1.8;
  }


  .lead_area>div {
    width: 94%;
    margin: 0 auto;
  }

  .lead_area .ttl {
    width: 40%;
    max-width: 236px;
    margin: 0 auto 30px;
  }

  .deco {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 96px;
  }


  .sec01 {
    padding: 40px 0;
  }

  .sec01 .ttl_variation {
    max-width: 100%;
    width: 70%;
    margin: 0 auto 30px;
  }

  .sec01 ul.btn_List {
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .sec01 ul.btn_List li {
    max-width: 100%;
    width: 48.5%;
/*    margin: 0 0% 2%;*/
/*    margin: 0 0% 20px;*/
margin: 0 0% 30px;
  }


  .sec02 .type_box {
    padding: 40px 0;
  }

  .sec02 .type_box .type_ttl {
    text-align: left;
    margin: 0 20px;
  }

  .sec02 .type_box .type_ttl h4 {
    font-size: 20px;
    line-height: 1.6;
    letter-spacing: 0.06em;
    background: url(../img/ttl_line.svg)no-repeat 0 bottom;
    background-size: contain;
    padding: 0 0 10px;
    margin-bottom: 20px;
  }

  .sec02 .type_box .type_ttl p {
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.06em;
    margin-bottom: 30px;
  }

  .sec02 .type_box .madori {
    max-width: 100%;
    width: 85%;
    margin: 0 auto 60px;
  }

  .sec02 .type_box ul.point {
    max-width: 100%;
    width: 94%;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto;
  }

  .sec02 .type_box ul.point li {
    max-width: 100%;
    width: 48.5%;
    margin: 0 0% 3%;
  }

  .copy.single_unit.sp .inner {
    width: 90%;
  }

  .hanrei {
    width: 70%;
    padding: 20px 0 0;
    margin-left: auto;
  }
.new::before{
top: 0.3em;
transform: translate(-50%, -50%) scale(0.7);
}
.floor_type{
  margin: 40px auto 0;
}
.floor_type:not(:first-of-type){
  margin: 40px auto 0;
}

.ugoclo_Bnr {
  width: 80%;
  margin: 30px auto 30px;
}

#plan .notes_Wrap {
  padding: 50px 0 50px;
}
.floor_type .type_ttl {
    margin: 0 auto 3em;
}
    
  .icon_mr::after {
    font-size: clamp(11px,1.2vw,14px);
    top: -13px;
  }
.livinghouse p {
    padding: 0.4em 0.5em;
    top: -3.8em;
}

}