/* キャッチコピー */
#catch-copy{
  padding-bottom: 80px;
  text-align: center;
}
#catch-copy .title{
  padding-top: 63px;
  text-align: center;
}
#catch-copy .title img{
  width:405px;
  object-fit: contain;
}
#catch-copy .description{
  padding-top: 25px;
  font-size: 20px;
  line-height: 2em;
}
#catch-copy .c1{
  display: flex;
  justify-content: center;
}
#catch-copy .button{
  padding-top: 40px;
}
#catch-copy .button a{
  width: 320px;
  height: 60px;
  font-size: 16px;
}
#catch-copy .image{
  padding-top: 15px;
}
#catch-copy .image img{
  width: 938px;
  object-fit: contain;
}

/* デザインハブの概要 */
#designhub{
  height: 560px;
  display: flex;
}
#designhub .text{
	padding-left: 40px;
  padding-right: 40px;
  width:580px;
}
#designhub .text h2{
	padding-top: 129px;
  padding-bottom: 30px;
}
#designhub .description{
  line-height: 2em;
}
#designhub .link{
  padding-top:42px;
  padding-left:0;
}
#designhub .image{
  padding-top: 80px;
  /* IEで表示崩れる対策 */
  position: relative;
}
#designhub .image img{
  width: 620px;
  height: 480px;
  object-fit: contain;
  /* IEで表示崩れる対策 */
  position: absolute;
  right: 0px;
  bottom: 0px;
}

/* デザインハブの特徴（メリット） */
#merit{
  padding-bottom: 80px;
}

#merit .title{
	padding-top: 80px;
  padding-bottom: 20px;
  text-align: center;
}
#merit .c1{
  display: flex;
  justify-content: space-between;
  flex-wrap:wrap;
  margin-left: 80px;
  margin-right: 80px;
}
#merit .div3{
  margin-top: 20px;
  width: 333px;
  height: 227px;
  text-align: center;
}
#merit .div3 h3{
  margin-top:20px;
  font-size: 24px;
}
#merit .div3 div{
  margin-top:10px;
  color: #323232;
}
#merit .image{
  margin-top: 0px;
  margin-left: 0px;
}
#merit .image img{
  height: 80px;
  object-fit: contain;
}
#merit .c2{
  display: flex;
  justify-content: center;
}
#merit .button3{
  margin-top: 40px;
}
#merit .button3 a{
  width: 320px;
  height: 60px;
  font-size: 16px;
}

/* デザインシステムのテンプレート */
#template{
  padding-bottom: 80px;
}

#template .text{
	text-align: center;
  width: 640px;
  padding-top: 80px;
  padding-left:320px;
}
#template h2{
	padding-top:10px;
  padding-bottom:31px;
}
#template .point{
  font-size:24px;
  color: #03A9F4;
  font-weight: bold;
}
#template .text .description{
  line-height: 2em;
}

#template .c1{
  display: flex;
  justify-content: space-between;
  padding-top: 60px;
  padding-left: 40px;
  padding-right: 40px;
}
#template .div2{
  width: 580px;
}
#template .div2 h3{
  padding-top:32px;
  padding-bottom:20px;
  text-align: center;
}
#template .div2 .text2{
  width:500px;
  padding-left:40px;
  padding-right:40px;
}
#template .image{
  width: 580px;
  margin-top: 0;
  text-align: center;
}
#template .image img{
  width: 100px;
  object-fit: contain;
}
#template .c2{
  display: flex;
  justify-content: center;
}
#template .button3{
  padding-top: 30px;
}
#template .button3 a{
  width: 240px;
  height: 48px;
  font-size: 16px;
}


/* 料金プラン */
#cost{
  padding-bottom: 80px;
  text-align: center;
}

#cost h2{
	padding-top:80px;
  padding-bottom:10px;
}

/* 推奨環境 */
#requirements{
  padding-bottom: 80px;
  text-align: center;
}

#requirements h2{
	padding-top:80px;
  padding-bottom:10px;
}

#requirements .c1{
  display: flex;
  justify-content: space-between;
  padding-top: 60px;
  padding-left: 40px;
  padding-right: 40px;
}

#requirements .text2{
  text-align: center;
  width: 100%;
  line-height: 2em;
}