@charset "utf-8";

/*=====================================================================================
	
	Document    : style.css
	Description : PC用（幅900px以上）
 
=====================================================================================*/

.hdS {
	background:url(../image/hd-photo.jpg) no-repeat center top;
}

.md {
	background:url(../../image/md-ic/star.png) no-repeat center top;
	padding-top:50px;
}

.ct .block:first-child {
	padding-bottom:0;
}

.text-ib {
  display: inline-block;
}


/*-------------------------------------------------------
   ジョイコス住宅システムとは
-------------------------------------------------------*/

.block01-A {
	text-align:center;
	position:relative;
  min-height: 80px;
}

.block01-A p {
	text-align:left;
	padding-right:200px;
}	

.block01-A .pic {
	position:absolute;
	right:0;
	top:50px;
}

@media screen and (max-width:1060px) {
	.block01-A .pic {
    right:20px;
  }
}


/*-------------------------------------------------------
   photo
-------------------------------------------------------*/

#loopslider-wp {
	width:100%;
	overflow:hidden;
}

#loopslider {
	margin:0 auto;
	width:2000px;
	height:300px;
	text-align:left;
	position:relative;
	overflow:hidden;
}

#loopslider ul {
	float:left;
	display:inline;
	overflow:hidden;
}

#loopslider ul li {
	width:400px;
	height:300px;
	float:left;
	display:inline;
	overflow:hidden;
}

#loopslider ul:after {
	content:".";
	height:0;
	clear:both;
	display:block;
	visibility:hidden;
}

#loopslider ul {
	display:inline-block;
	overflow:hidden;
}

	
@media screen and (max-width:800px) {
	#loopslider,
	#loopslider ul {
		width:1800px;
		height:150px;
	}

	#loopslider ul li {
		width:200px;
		height:150px;
	}
}


/*-------------------------------------------------------
   メリット
-------------------------------------------------------*/

.block01-B {
	max-width:100% !important;
	background:url(../../image/bg-black5.png) repeat center top;
}

.block01-B dl {
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
}

.block01-B dt:before {
	font-size:60px;
	font-family:"Times New Roman", Times, serif;
	font-style:italic;
	display:block;
	width:60px;
	margin-top:5px;
	float:left;
}

.block01-B dt.no1:before {
	content:"1";
}
.block01-B dt.no2:before {
	content:"2";
}
.block01-B dt.no3:before {
	content:"3";
}
.block01-B dt.no4:before {
	content:"4";
}

.block01-B dt {
	font-weight:bold;
	padding-bottom:0.5em;
}

.block01-B dd {
	padding-left:60px;
}


/*-------------------------------------------------------
   特徴
-------------------------------------------------------*/

.block01-C {
}

.block01-C .item {
  display: flex;
  flex-wrap: wrap;
  margin: 48px auto 0;
  text-align: left;
  gap: 20px;
}

.block01-C .description {
  order: 2;
  width: calc(50% - 10px);
}

.block01-C .item h4 {
  margin-bottom: 8px;
}

.block01-C .item ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.block01-C .item ul li::before {
  content: "・";
}

.block01-C .item .img {
  order: 1;
  width: calc(50% - 10px);
  text-align: center;
}

.block01-C .item .img img {
  width: 100%;
  height: auto;
}

@media screen and (max-width:800px) {
  .block01-C .item {
    width: 100%;
    max-width: 640px;
    justify-content: center;
  }

  .block01-C .description {
    order: 1;
    width: 100%;
  }

  .block01-C .item .img {
    order: 2;
    width: 100%;
    max-width: 480px;
  }
}


/*-------------------------------------------------------
   リンク
-------------------------------------------------------*/

.block01-D {
  width: 100%;
  max-width: 640px;
  padding: 24px;
  margin: 0 auto 60px;
  box-sizing: border-box;
  /* border:1px solid #c3c3c3 */
}
@media screen and (max-width:680px) {
  .block01-D {
    width: calc(100% - 40px);
    margin: 0 20px 60px;
  }
}

.block01-D p {
  margin-bottom: 12px;
  color: #D07112;
  font-weight: bold;
}

.block01-D a {
  transition: 0.3s;
}
.block01-D a:hover {
  opacity: .7;
}