@charset "utf-8";

/* ヘッダー
-------------------------------------*/

/* トップページ
-------------------------------------*/
/* FV */
.fv {
  text-align: center;
  position: relative;
}

/* 下層ページ
-------------------------------------*/
/* FV */



.fv-ttl {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  background-color: white;
  padding: 1rem 2rem;
  border-radius: 1.5rem;
  color: #cb4117;
  font-weight: bold;
  font-size: clamp(1.563rem, 1.25rem + 1.56vw, 3.125rem);
  white-space: nowrap;
}






.loop-slider {
  margin: 3rem auto;
}

.loop-slider img {
  height: 60px;
  /* 高さを揃えて */
  width: auto;
  /* 横幅は自動、画像ごとにバラバラ */
  margin: 0 30px;
  display: block;
}

/* スマホの時にサイズ調整 */
@media (max-width: 768px) {
  .loop-slider img {
    height: 30px;
    margin: 0 6px;
  }
}

/* Slickデフォルトスタイルをなじませる例（お好みで） */
.slick-slide {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

/* スライダー全体幅を100%にしたい場合 */
.loop-slider {
  width: 100vw;
  overflow: hidden;
}

.wrapper1300 {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

.main-area-clip {
  clip-path: polygon(50% 0%, 0 101%, 101% 101%);
  background-color: #cb4117;
  height: 120px;
  background-clip: border-box;
  margin-bottom: 0;
}

.bg-orange {
  background-color: #cb4117;
}

.bg-orange-light {
  background-color: #D55C1A;
}

.main-area {
  padding: 2rem 6rem;
  position: relative;
  color: #fff;
}

.light-bulb img {
  margin: 0 auto;
  max-width: 110px;
  width: 100%;
}

.area-ttl {
  color: #fff;
  font-weight: bold;
  font-size: clamp(1.25rem, 1rem + 1.25vw, 2.5rem);
  text-align: center;
  margin: 2rem auto;
  letter-spacing: 0.2em;	
}

.area-ttl-b {
  color: #fff;
  font-weight: bold;
  font-size: clamp(2.188rem, 1.75rem + 2.19vw, 4.375rem);
  text-align: center;
  margin: 2rem auto 1rem;
}

.area-ttl-black {
  color: #000;
  font-weight: bold;
  font-size: clamp(1.25rem, 1rem + 1.25vw, 2.5rem);
  margin: 2rem auto 4rem;
}

.border-4 {
  border-bottom: solid 4px #fff;
  max-width: 80px;
  margin: 0 auto;
}

.border-4-full {
  border-bottom: solid 4px #fff;
  margin: 0 auto;
}

.border-2-full {
  border-bottom: solid 4px #fff;
  margin: 0.5rem auto;
}

.wrap {
  display: flex;
  text-align: center;
  justify-content: space-between;
  color: #fff;
}

.wrap .box-a {
  flex-basis: 48%;
  position: relative;
  margin-right: 2em;
  margin-bottom: 2rem;
  margin-top: 2rem;
}

.wrap .box-a::after {
  position: absolute;
  top: 0;
  left: 100%;
  margin: 0 1rem;
  content: "";
  width: 2px;
  height: 100%;
  background-color: #fff;
}

.wrap .box-b {
  flex-grow: 1;
  flex-basis: 48%;
  margin-bottom: 2rem;
  margin-top: 2rem;
}

.wrap-ttl {
  font-weight: bold;
  font-size: clamp(1.875rem, 1.5rem + 1.88vw, 3.75rem);
  text-align: center;
  color: #fff;
  margin: 10px auto;
}

.wrap-sub {
  font-size: clamp(1.125rem, 0.9rem + 1.13vw, 2.25rem);
  font-weight: bold;
  text-align: center;
  color: #fff;
  margin: 10px auto 20px;
}

.wrap-img img {
  border-radius: 30px;
  padding: 10px;
  margin: 0 auto 2rem;
  max-width: 530px;
  width: 100%;
}

.wrap-text {
  margin: 2rem auto 4rem;
  padding: 1rem 2rem;
  text-align: left;
}

.flex-40 {
  flex-basis: 38%;
  margin: 2rem auto;
  width: 100%;
  min-height: 240px;
}

.flex-20 {
  flex-basis: 18%;
  margin: 2rem auto;
  width: 100%;
}

.border-t2-r {
  border-top: solid 2px #fff;
}

.border-b2 {
  border-bottom: solid 2px #fff;
}

.difference-img img {
  text-align: center;
  margin: 2rem auto;
  width: unset;
}

.difference-text {
  text-align: center;
  color: #fff;
}

.yellow-box {
  background-color: #f5c92a;
  border-radius: 30px;
  padding: 3rem 1rem;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  width: 100%;
}

.yellow-box2 {
  background-color: #f5c92a;
  border-radius: 30px;
  padding: 6rem 1rem;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  width: 100%;
  min-height: 250px;
  vertical-align: middle;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.const-list-box {
  background-color: #fff;
  max-width: 240px;
  border-radius: 15px;
  margin: 2rem auto;
  padding: 1rem;
}

.const-list-img img {
  margin: 0 auto;
  text-align: center;
  max-width: 1000px;	
}

.const-list-ttl {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  font-weight: bold;
  text-align: center;
  color: #000;
}

.details-btn {
  display: flex;
  background-color: #fff;
  border: solid 1px #db4117;
  border-radius: 100px;
  justify-content: space-between;
  align-items: center;
  color: #db4117;
  padding-top: .5rem;
  padding-bottom: .5rem;
  padding-right: .5rem;
  padding-left: clamp(1.25rem, -0.475rem + 3vw, 3.125rem);
}

.details-btn img {
  max-width: 30px;
  text-align: end;
}

.details-btn p {
  margin: 0;
  white-space: nowrap;
  font-weight: bold;
}

.details-btn:hover {
  color: #000;
  opacity: .8;
}

.column-ttl {
  color: #fff;
  font-weight: bold;
  font-size: clamp(2.5rem, 2rem + 2.5vw, 5rem);
  margin: 0 auto;
  text-align: center;
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

.column-ttl-o {
  color: #cf4117;
  font-weight: bold;
  font-size: clamp(2.5rem, 2rem + 2.5vw, 5rem);
  margin: 0 auto;
  text-align: center;
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

.column-box {
  background-color: #fff;
  padding: 1rem 2rem;
  clip-path: polygon(2% 0, 98% 0, 100% 4%, 100% 96%, 98% 100%, 2% 100%, 0 96%, 0 4%);
  margin-top: 10rem;
}

.column-box-o {
  border: solid 5px #cf4117;
  padding: 1rem;
  margin-top: 10rem;
  position: relative;
}

.left-top {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 30px;
}

.right-top {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 30px;
}

.left-bottom {
  position: absolute;
  bottom: -10px;
  left: -10px;
  width: 30px;
}

.right-bottom {
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 30px;
}

.column-list li {
  font-size: clamp(0.75rem, 0.6rem + 0.75vw, 1.5rem);
  font-weight: bold;
  color: #cb4117;
  text-align: left;
}

.column-list-w li {
  font-size: clamp(0.75rem, 0.6rem + 0.75vw, 1.5rem);
  font-weight: bold;
  color: #fff;
  text-align: left;
  padding-bottom: 30px;
}

.column-list li::after {
  content: url("../img/common/arrow.png");
  /*画像のURL*/
  margin-left: 10px;
  /*画像右の余白*/
  position: relative;
  top: 5px;
  /*上からの位置*/
  left: 0;
  /*左からの位置*/
}

.column-list-w li::after {
  content: url("../img/common/arrow-w.png");
  /*画像のURL*/
  margin-left: 10px;
  /*画像右の余白*/
  position: relative;
  top: 5px;
  /*上からの位置*/
  left: 0;
  /*左からの位置*/
}

.column-list .column_water::before {
  content: url("../img/common/column_water.png");
  /*画像のURL*/
  margin-right: 10px;
  /*画像右の余白*/
  position: relative;
  top: 15px;
  /*上からの位置*/
  left: 0;
  /*左からの位置*/
}

.column-list .column_money::before {
  content: url("../img/common/column_money.png");
  /*画像のURL*/
  margin-right: 10px;
  /*画像右の余白*/
  position: relative;
  top: 15px;
  /*上からの位置*/
  left: 0;
  /*左からの位置*/
}

.column-list .column_time::before {
  content: url("../img/common/column_time.png");
  /*画像のURL*/
  margin-right: 10px;
  /*画像右の余白*/
  position: relative;
  top: 15px;
  /*上からの位置*/
  left: 0;
  /*左からの位置*/
}

.column-list .column_bath::before {
  content: url("../img/common/column_bath.png");
  /*画像のURL*/
  margin-right: 10px;
  /*画像右の余白*/
  position: relative;
  top: 15px;
  /*上からの位置*/
  left: 0;
  /*左からの位置*/
}

.column-list .column_coating::before {
  content: url("../img/common/column_coating.png");
  /*画像のURL*/
  margin-right: 10px;
  /*画像右の余白*/
  position: relative;
  top: 15px;
  /*上からの位置*/
  left: 0;
  /*左からの位置*/
}

.column-list .column_snow::before {
  content: url("../img/common/column_snow.png");
  /*画像のURL*/
  margin-right: 10px;
  /*画像右の余白*/
  position: relative;
  top: 15px;
  /*上からの位置*/
  left: 0;
  /*左からの位置*/
}

.column-list .column_sign::before {
  content: url("../img/common/column_sign.png");
  /*画像のURL*/
  margin-right: 10px;
  /*画像右の余白*/
  position: relative;
  top: 15px;
  /*上からの位置*/
  left: 0;
  /*左からの位置*/
}

.column-list-w .column_house::before {
  content: url("../img/common/column-03.png");
  /*画像のURL*/
  margin-right: 10px;
  /*画像右の余白*/
  position: relative;
  top: 15px;
  /*上からの位置*/
  left: 0;
  /*左からの位置*/
}

.flex-46 {
  flex-basis: 46%;
  margin: 2rem auto;
  width: 100%;
}

.flex-46 img {
  text-align: center;
  margin: 0 auto;
}

.flex-56 {
  flex-basis: 56%;
  margin: 2rem auto;
  width: 100%;
}

.flex-56 img {
  text-align: center;
  margin: 0 auto;
}

.flex-26 {
  flex-basis: 26%;
  margin: 2rem auto;
  width: 100%;
}

.flex-26 img {
  text-align: center;
  margin: 0 auto;
}


.flex-76 {
  flex-basis: 76%;
  margin: 2rem auto;
  width: 100%;
}

.flex-76 img {
  text-align: center;
  margin: 0 auto;
}

.wet-img {
  border-radius: 15px;
}

.img-ttl {
  font-size: clamp(1.125rem, 1.087rem + 0.19vw, 1.313rem);
  font-weight: bold;
  text-align: center;
  margin: 1rem auto;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  /* 折り返し */
  padding: 1rem;
}

.col_4 {
  width: calc(100% / 4);
  /* 初期状態で3列 */
  box-sizing: border-box;
  padding: 10px;
}

.col_3 {
  width: calc(100% / 3);
  /* 初期状態で3列 */
  box-sizing: border-box;
  padding: 10px;
}

.col_2 {
  width: calc(100% / 2);
  /* 初期状態で3列 */
  box-sizing: border-box;
  padding: 10px;
}


.handling-img img {
  border-radius: 20px;
  /* 角丸の半径を10pxに設定 */
  border: 7px solid white;
  /* 2pxの白線を追加 */
  margin: 0 auto;
}

.point {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  font-weight: bold;
  text-align: center;
}

.point::before {
  content: url("../img/common/point.png");
  margin-right: 10px;
  position: relative;
  top: 25px;
  left: 0;
}

.point-l {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  font-weight: bold;
  text-align: left;
}

.column-single {
  background-color: #c34117;
  padding: 0 0.5rem;
  border-radius: 50px;
  max-width: clamp(20rem, 15.25rem + 23.75vw, 43.75rem);
  margin: 0 auto;
}

.column-single-ttl {
  font-size: clamp(0.75rem, 0.6rem + 0.75vw, 1.5rem);
  font-weight: bold;
  color: #fff;
  text-align: left;
  margin-right: 30px;
  padding-top: 25px;
  padding-bottom: 30px;
  position: relative;
}

.column-single-ttl::after {
  position: absolute;
  /*--positionを追加--*/
  top: 0;
  left: 100%;
  margin: 0 1rem;
  content: "";
  width: 4px;
  /*--縦線の太さ(幅)--*/
  height: 100%;
  background-color: #fff;
  /*--縦線の色--*/
}

.wave-top {
  background-image: url("../img/exterior/wave.png");
  background-repeat: repeat-x;
  width: 100%;
  height: 23px;
}

.wave-bottom {
  background-image: url("../img/exterior/wave-b.png");
  background-repeat: repeat-x;
  width: 100%;
  height: 23px;
  background-color: #cb4117;
}

/* .link-btn {
  display: flex;
  background-color: #fff;
  border: solid 1px #fff;
  border-radius: 100px;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  padding-top: .5rem;
  padding-bottom: .5rem;
  padding-right: .5rem;
  padding-left: clamp(1.25rem, -0.475rem + 3vw, 3.125rem);
} */

.link-btn img {
  max-width: 30px;
  text-align: end;
}

.link-btn p {
  margin: 0;
  white-space: nowrap;
  font-weight: bold;
}

/* .link-btn:hover {
  color: #000;
  opacity: .8;
} */

.flex-flex {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-start;
  align-items: center;
}

.point-img {
  margin-right: 10px;
}

.qa-list-q {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  font-weight: bold;
  text-align: left;
  margin-left: 10px;
}

.qa-list-a {
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  margin-left: 10px;
}

.qa-icon {
  min-width: 40px;
}

.position {
  position: relative;
}

.white-box {
  background-color: white;
  padding: 20px;
}

.dots-top-left {
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
}

.dots-top-right {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
}

.dots-bottom-left {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
}

.dots-bottom-right {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50px;
}

.wall-img {
  min-width: 120px;
  margin-right: 10px;
}

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

  .main-area {
    padding: 2rem;
  }

  .column-ttl {
    top: -80px;
  }

  .column-ttl-o {
    top: -80px;
  }

}


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




  .wrap {
    display: block;
  }

  .wrap .box-a {
    margin-right: 0;
  }

  .wrap .box-a::after {
    top: 105%;
    left: -10px;
    width: 95%;
    height: 2px;
  }

  .order-1 {
    order: 2;
  }

  .order-2 {
    order: 1;
  }

  .order-3 {
    order: 3;
  }

  .yellow-box {
    padding: 1rem 1rem;
  }

  .yellow-box2 {
    padding: 1rem 1rem;
    min-height: 70px;
  }

  .border-t2-r {
    border-top: none;
  }

  .column-ttl {
    top: -60px;
  }

  .column-ttl-o {
    top: -60px;
  }

  .col_4 {
    width: calc(100% / 2);
    /* 768px以下で2列 */
  }

  .col_3 {
    width: calc(100% / 2);
    /* 768px以下で2列 */
  }

  .col_2 {
    width: 100%;
  }

  .column-single-ttl {
    margin-right: 0;
    padding-top: 10px;
    padding-bottom: 0px;
    line-height: 1.6;
    border-bottom: solid 4px #fff;
  }

  .column-single {
    padding: 0 0.5rem;
    border-radius: 70px;
  }

  .column-single-ttl::after {
    display: none;
  }



}

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


  .fv-ttl {
    top: -30%;
  }

  .area-ttl {
    margin: 2rem auto;
  }

  .area-ttl-black {
    margin: 2rem auto;
  }

  .light-bulb img {
    max-width: 55px;
  }

  .main-area {
    padding: 1rem;
  }

  .column-ttl {
    top: -40px;
  }

  .column-ttl-o {
    top: -40px;
  }

  .column-box {
    padding: 1rem;
    clip-path: polygon(4% 0, 96% 0, 100% 4%, 100% 96%, 96% 100%, 4% 100%, 0 96%, 0 4%);
  }

  .col_3 {
    width: 100%;
  }
}

.fv img {
    border-radius: var(--rounded-10-25);
}

.sub-fv .fv-ttl-win {
    width: 80%;
    max-width: 560px;
    margin: 0;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    background-color: var(--white);
    padding: 1rem clamp(1rem, 2vw, 2rem) clamp(1rem, 2vw, 2rem);
    border-radius: 0 0 var(--rounded-10-25) var(--rounded-10-25);
    color: var(--main-color);
    font-weight: 900;
    font-size: clamp(24px, 5vw, 48px);
}

.sub-fv .fv-ttl-re {
    width: 80%;
    max-width: 700px;
    margin: 0;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    background-color: var(--white);
    padding: 1rem clamp(1rem, 2vw, 2rem) clamp(1rem, 2vw, 2rem);
    border-radius: 0 0 var(--rounded-10-25) var(--rounded-10-25);
    color: var(--main-color);
    font-weight: 900;
    font-size: clamp(24px, 5vw, 48px);
}

.box-860{
	max-width: 860px;
	margin: 0 auto;
}

.box-660{
	max-width: 660px;
	margin: 0 auto;
}

.box-520{
	max-width: 520px;
	margin: 0 auto;
}

.box-420{
	max-width: 420px;
	margin: 0 auto;
}

.link-btn-w {
	display: flex;
	/*background-color: #fff;*/
	border: solid 1px #fff;
	border-radius: 100px;
	justify-content: space-between;
	align-items: center;
	color: #fff;
	padding-top: .5rem;
	padding-bottom: .5rem;
	padding-right: .5rem;
	padding-left: clamp(1.25rem, -0.475rem + 3vw, 3.125rem);
	margin-top: 2rem;
}

.link-btn-w img {
	max-width: 30px;
	text-align: end;
}

.link-btn-w p {
	margin: 0;
	white-space: nowrap;
	font-weight: bold;
}

.link-btn-w:hover {
	color: #000;
	opacity: .8;
}

.link-btn-or {
	display: flex;
	/*background-color: #fff;*/
	border: solid 1px #db4117;
	border-radius: 100px;
	justify-content: space-between;
	align-items: center;
	color: #db4117;
	padding-top: .5rem;
	padding-bottom: .5rem;
	padding-right: .5rem;
	padding-left: clamp(1.25rem, -0.475rem + 3vw, 3.125rem);
	margin-top: 2rem;
}

.link-btn-or img {
	max-width: 30px;
	text-align: end;
}

.link-btn-or p {
	margin: 0;
	white-space: nowrap;
	font-weight: bold;
}

.link-btn-or:hover {
	color: #000;
	opacity: .8;
}

.flex-flex-point {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    align-items: center;
}

.flex-flex {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    align-items: center;
}


.flex-c {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
}

.flex-c-r {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
}



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

.flex-c {
    display: block;
}	
	
.flex-c-r{
	flex-direction: column-reverse;
	}	
	

	
.flex-26 img {
    width: 26%;
}	
	
.flex-76 img {
    width: 76%;
}	
	
.box-520 {
    max-width: 400px;
   }	
	
.box-420 {
    max-width: 290px;
}	
	
}

@media screen and (max-width: 560px) {
	
.main-area-clip {
    height: 70px;
    }
	
.flex-flex {
    display: block;
    }	
	
.white-box {
    padding: 20px 10px;
}	
	
.sub-fv .fv-ttl-re {
    top: -10px;
	}
	
}