@charset "utf-8";

/* Font Size */
h2 { font-size: var(--font28);font-family: var(--fontJp);letter-spacing: .3em}
h3 { font-size: var(--font24)}
h4 { font-size: var(--font20);}
h5 { font-size: var(--font18);}

h2 {
	text-align: center;
	position: relative;
	z-index: 2;
}


h2.title_line {
  font-size: var(--font25);
}
h2.title_line:after {
	content: "";
	width: 1px;
	height: 220px;
	background: #777;
	position: absolute;
	left: 50%;
	top: 100%;
	margin-top: 40px;
}
section {
	margin-top: 150px;
}

@media screen and (max-width: 1280px) {
  h2.title_line:after {
    height: 17vw;
    margin-top: 3.125vw;
  }
  section {
    margin-top: 11vw;
  }
}

@media screen and (max-width: 768px) {
  body#Renovation main {
    padding-top: 70px;
  }
}



/* ----------[「リノベーションマンション」という、これからの住まいの選択肢]---------- */

#merit {
  background-color: #ece7dd;
  padding-bottom: 160px;
}

.merit_head {
	max-width: 1280px;
  width: 100%;
  padding-top: 160px;
  padding-bottom: 140px;
	margin: auto;
  text-align: center;
}

.merit_head h2 {
	margin-bottom: 50px;
}

.merit_inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 75px;
}
.merit_inner.rev {
	flex-direction: row-reverse;
}
.merit_inner_copy {
	text-align: center;
	padding-left: calc((100vw - 1280px) / 2);
}
.merit_inner.rev .merit_inner_copy {
	padding-left: 0;
	padding-right: calc((100vw - 1280px) / 2);
}
.merit_inner_copy img {
	width: 110px;
}
.merit_inner_copy h3 {
	margin: 1em 0;
}
.merit_inner_photo {
	width: 55vw;
}



@media screen and (max-width: 1280px) {
  #merit {
    padding-bottom: 11vw;
  }
  .merit_head {
    width: 100%;
    padding-top: 11vw;
    padding-bottom:9vw;
  }

  .merit_head h2 {
    margin-bottom: 4.5vw;
  }

  .merit_inner {
    margin-bottom: 5.5vw;
  }
  .merit_inner_copy {
    padding-left: 2vw;
    letter-spacing: 0;
  }
  .merit_inner.rev .merit_inner_copy {
    padding-left: 0;
    padding-right: 2vw;
  }
  .merit_inner_copy img {
    width: 8.5vw;
  }
}



@media screen and (max-width: 768px) {
  .merit_inner {
    display: block;
  }
  .merit_inner_photo {
    width: 100vw;
    margin: 4vw 0;
  }
  .merit_inner_copy img {
    width: 20vw;
  }

  .merit_head h2 {
    letter-spacing: .15em;
  }
}

/* ----------/[「リノベーションマンション」という、これからの住まいの選択肢]---------- */



/* ----------[リノベーション（改修工事）の主な工程]---------- */


#process h2 {
  padding-bottom: 45px;
}

#process h2 small {
  font-size: 75%;
}
.process_head {
  padding-bottom: 40px;
  text-align: center;
}


/* スライダ全体のスタイリング */
.slider-container {
  width: 100%;
  max-width:1280px;
  margin:auto;
}
.slider-main, .slider-sub {
  margin-bottom: 20px;
}

.slider-main {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
}
/* デフォルトのフォント（擬似要素）を確実に非表示にする */
.slider-main .slick-prev::before,
.slider-main .slick-next::before {
  content: "" !important;   /* 文字を強制的に空にする */
  display: none !important; /* 強制的に非表示 */
}

/* 念のため、デフォルトの矢印ボタン自体の背景や枠線をリセット */
.slider-main .slick-prev,
.slider-main .slick-next {
  background: transparent !important;
  border: none !important;
}

/* オリジナル矢印ボタン全体の共通スタイル */
.custom-arrow {
  z-index: 10;
  width: 22px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  top:70px;
}

/* 矢印画像自体のサイズ調整 */
.custom-arrow img {
  width: 100%;
  height: auto;
  display: block;
}
/* 矢印の位置調整 */
.slider-main .slick-prev {left: -50px;}
.slider-main .slick-next {right: -50px;}

/* 1. デフォルトのフォント（「•」の文字）を完全に消去 */
.slider-main .slick-dots li button::before {
  display: none !important;
}

/* 2. ドットのボタン自体を丸型にして、白丸・黒フチにする（非アクティブ時） */
.slider-main .slick-dots li button {
  width: 14px;       /* ドットの横幅 */
  height: 14px;      /* ドットの縦幅 */
  padding: 0;
  background-color: #ffffff; /* 背景色：白 */
  border: 1px solid rgba(0,0,0,.5); /* フチ：2pxの黒線 */
  border-radius: 50%;        /* 正円にする */
  cursor: pointer;
  transition: all 0.3s ease;            /* 切り替え時のアニメーション */
}

/* 3. アクティブ（現在表示中）のドットのスタイル */
.slider-main .slick-dots li.slick-active button {
  background-color: #000; /* アクティブ時は中を黒で塗りつぶす */
  border-color: #000;
}

/* 4. ドットが並ぶエリア全体のサイズ調整（ボタンのサイズ変更に伴うズレ防止） */
.slider-main .slick-dots li {
  width: 14px;       /* 上記のbuttonのwidthに合わせる */
  height: 14px;      /* 上記のbuttonのheightに合わせる */
  margin: 0 6px;     /* ドット同士の左右の間隔 */
}

.slider-container .sp {display: none!important;}


@media screen and (max-width: 1320px) {
.slider-container {width: 96%;}
.custom-arrow {top:5vw;}
}

@media screen and (max-width: 768px) {
.slider-container .pc {display: none!important;}
.slider-container .sp {display: block!important;}

/* 矢印の位置調整 */
.slider-main .slick-prev {left: -28px;}
.slider-main .slick-next {right: -28px;}
.custom-arrow {top:14vw;}
}


/* ----------/[リノベーション（改修工事）の主な工程]---------- */





/* ----------[「安心」という品質を、追求すること / 見えない部分への配慮]---------- */

#safety {
  background-color: #ece7dd;
  padding-top: 124px;
}

#safety h2 {
  margin-bottom: 74px
}
#safety h3 {
  text-align: center;
}

#consideration {
  background-color: #fff;
  padding-top: 70px;
  margin-bottom: 108px;
}
#consideration h3 {
  margin-bottom: 85px;
}

.consideration_wrap {
  width: min(var(--100vw_1280) * 1180 , 1180px);
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 80px;
  display: flex;
  justify-content: space-between;
}

.consideration_wrap > div:first-of-type {width: 49.3%;}
.consideration_wrap > div:last-of-type  {width: 44.5%;}

.consideration_wrap h4 {
  border-bottom: 1px solid rgba(0,0,0,.5);
  margin-bottom: 1.0em;
  padding-bottom: 0.8em;
}
.consideration_wrap h4 div {
  font-size: 1.05rem;
  color: #ae7b66;
}
.consideration_wrap h4 div::before {
  content: "■";
  margin-right: 0.1em;
  margin-bottom: 0.3em;
}

.consideration_txt {
  display: flex;
  justify-content: space-between;
}

.water_environment {
  margin-top: 60px;
}

.safety_fig01 {
  width: 60%;
}

.safety_ph01{
  width: 39.4%;
}

.equipment {
  position: relative;
}

.safety_ph02_pc {
  position: absolute;
  width: 12.45%;
  right: 0;
  top:min(var(--100vw_1280) * 162 , 162px)
}

#safety li {
  list-style: disc;
  margin-left: 1.5em;
  margin-bottom: 0.3em;
}

.br1180 {
  display: none;
}

@media screen and (max-width: 1320px) {
#consideration {
  width: 96%;
}
}
@media screen and (max-width: 1180px) {
.br1180 {
  display: block;
}
.safety_ph02_pc {
  top:14vw;
}
}
@media screen and (max-width: 980px) {
.safety_ph02_pc {
  width: 14%;
  top:20vw;
}
.consideration_txt {
  flex-direction: column;
}
.water_environment .br1180 {
  display: none;
}
.safety_fig01 {
  width: 80%;
}

.safety_ph01{
  width: 80%;
}
#safety img {
  margin-top: 2vw;
}
.equipment img.pc {display: none;}
.equipment img.sp {display: block;}
.br980 {display: none;}
}

@media screen and (max-width: 768px) {
#consideration h3 {
  margin-bottom: 10vw;
}
.consideration_wrap {
  flex-direction: column;
}
.consideration_wrap > div {
  width: 100%!important;
}
.water_environment,
.equipment {
  margin-top: 10vw;
}
}

/* ----------/[「安心」という品質を、追求すること / 見えない部分への配慮]---------- */



/* ----------[「安心」という品質を、追求すること / ご入居後の暮らしを見守る各種サービス・サポート]---------- */
#support {
  padding-bottom: min(var(--100vw_1280) * 100 , 100px);
}
.support_wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.support_wrap > div {
  width: 44%;
  background-color: #fff;
  margin-bottom: 2vw;
  padding: 2.5%;
}

/* 1. 連番をリセットする親要素を指定 */
.support_wrap {
  counter-reset: h5-counter; /* カウンターの名前を定義（ここでは h5-counter） */
}

/* 2. 連番を進める対象（h2）を指定 */
.support_wrap h5 {
  counter-increment: h5-counter; /* h2が登場するたびにカウントを1進める */
  font-size: var(--font22); /* 22px */
  border-bottom: 1px solid rgba(0,0,0,.5);
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
}

/* 3. h2の擬似要素（::before）を使って数値を表示 */
.support_wrap h5::before {
  display: inline-block;
  font-family: var(--fontJp);
  content: counter(h5-counter);
  color: #fff;
  font-weight: bold;
  font-size: var(--font28);
  line-height: var(--size40);
  background-color: #000;
  border-radius: 22px;
  width: var(--size44);
  height: var(--size44);
  text-align: center;
  margin-right: 0.5em;
}


.support_wrap p {
  letter-spacing: .1em;
}
.support_wrap .ann {
  margin-top: 0.8em;
}
#support h3 {
  margin-bottom: 70px;
}
@media screen and (max-width: 1320px) {
  #support {
      width: 96%;
  }
}
@media screen and (max-width: 1080px) {
  .support_wrap {
    flex-direction: column;
  }
  .support_wrap > div {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (max-width: 767px) {
  #support h3 {
    margin-bottom: 8vw;
  }
  .support_wrap > div {
    margin-bottom: 5vw;
  }
}

/* ----------/[「安心」という品質を、追求すること / ご入居後の暮らしを見守る各種サービス・サポート]---------- */



/* ----------[マンションリノベーション事例紹介]---------- */

#case {
  background-color: #938b7a;
  padding-top: min(var(--100vw_1280) * 138 , 138px);
  padding-bottom: min(var(--100vw_1280) * 138 , 138px);
  margin-top: 0;
}


.case_head {
  text-align: center;
  color: #fff;
  margin-bottom: min(var(--100vw_1280) * 120 , 120px);
}
.case_head div {font-size: var(--font24)}
.case_head h2  {font-size: var(--font34);margin-bottom: 1em;}
.case_head p   {font-size: var(--font22)}


.case_head div {
  display: inline-block;
  padding-left:  min(var(--100vw_1280) * 180 , 180px);
  padding-right: min(var(--100vw_1280) * 180 , 180px);
  position: relative;
  margin-bottom: 0.5em;
}
.case_head div::before {
  content:"";
  height: 50%;
  width: 100%;
  border-bottom: 1px solid rgba(255,255,255,.7);
  position: absolute;
  top:0;
  left: 0;
}
.case_head span {
  position: relative;
  background-color: #938b7a;
  padding-left: 1em;
  padding-right: 1em;
}

.case_head_br {display: none;}


.case_head_ph {
  display: flex;
}
.case_head_ph::after {
  content: "";
  clear: both;
}
.case_head_ph_L {
  width: 50%;
}
.case_head_ph_R {
  position: relative;
  width: 50%;
  max-width: 640px;
}

.case_ph02 {
  position: absolute;
  top:min(var(--100vw_1280) * 92 , 92px);
  right: 0;
  width: min(var(--100vw_1280) * 451 , 451px);
}
.case_ph03 {
  width: min(var(--100vw_1280) * 277 , 277px);
  position: absolute;
  top: min(var(--100vw_1280) * 330 , 330px);
  right:min(var(--100vw_1280) * 305 , 305px);
  z-index: 2;
}

.case_list h3 {
  background-color: #fff;
  font-size: var(--font24);
  color: #938b7a;
  margin-top: min(var(--100vw_1280) * 75 , 75px);
  margin-bottom: 1em;
  text-align: center;
}

.case_list_wrap {
  color: #fff;
}
.case_list_wrap li {
  margin-bottom: min(var(--100vw_1280) * 40 , 40px);
}

.case_list_ttl {
  font-size: var(--font18);
  border-bottom: 1px solid rgba(255,255,255,.7);
  padding-bottom: 0.6em;
  margin-bottom: 1em;
}

.case_list_ph {
  display: flex;
  justify-content: space-between;
}

.case_list_ph div:nth-of-type(1),
.case_list_ph div:nth-of-type(3) {
  width: min(var(--100vw_1280) * 608 , 608px);
}
.case_list_ph div:nth-of-type(2) {
  width: min(var(--100vw_1280) * 64 , 64px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.case_list_ph div:nth-of-type(1)::after,
.case_list_ph div:nth-of-type(3)::after {
  text-align: center;
  display: block;
}
.case_list_ph div:nth-of-type(1)::after {content: "before";}
.case_list_ph div:nth-of-type(3)::after  {content: "after";}

.case_list_ph svg {
  width: 30%;
}
.case_list_ph polygon {
  fill: #fff;

}
@media screen and (max-width: 1780px) {
  .case_ph02 {
    top:0;
  }
 .case_ph03 {
  top:inherit;
  bottom: 2vw;
 }
}
@media screen and (max-width: 1320px) {
  .case_list {
      width: 96%;
  }
}

@media screen and (max-width: 1280px) {
  .case_ph02 {
    right: 0;
  }
  .case_ph03 {
    width: 20vw;
  }
  .case_head_ph_R .ann {
    padding-right: 0.8em;
  }
}

@media screen and (max-width: 1080px) {
  .case_head div {letter-spacing: .05em;}
  .case_head h2  {letter-spacing: .05em;}
  .case_head p   {letter-spacing: .05em;}
  .case_head_br {display: block;}
}
@media screen and (max-width: 767px) {
  .case_head div {
    padding-left:  0;
    padding-right: 0;
  }
  .case_head span {
    padding-left:  0;
    padding-right: 0;
}
  .case_head div::before {
    display: none;
  }
  .case_head p {
    padding: 0 5vw;
    text-align: left;
  }
  .case_head p br {
    display: none;
  }
  .case_head_ph {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .case_head_ph_L,
  .case_head_ph_R {
    width: 96%;
  }
  .case_head_ph_L .ann {
    text-align: left;
  }
  .case_ph02 {
    width: 49%;
    top:-2vw;
  }
  .case_ph03 {
    width: 30%;
    right: 45vw;
    top:13vw;
  }

  .case_list {
    margin-top: 55vw;
  }
  .case_list_ph {
  }
  .case_list_ph svg {
    width: 55%;
    transform: translateY(-100%);
  }
  .case_list_ph div:nth-of-type(1)::after,
  .case_list_ph div:nth-of-type(3)::after {
    font-size: 80%;
  }
  .case_list_ph div:nth-of-type(1) {width:40%;}
  .case_list_ph div:nth-of-type(2) {width: 5%;}
  .case_list_ph div:nth-of-type(3) {width:55%;}
 
  .case_list_wrap li {
    margin-bottom: 8vw;
  }
}



/* ----------/[マンションリノベーション事例紹介]---------- */