/* タイトル　*/
#title{
  height: 112px;
}
#title .text{
  padding-top: 30px;
  text-align: center;
}
#title h1{
  font-size: 32px;
}

/* デザインシステムの作成と共有 */
#func1{
  display: flex;
}
#func1 .left{
  width: 440px;
  height: 415px;
  padding-top:145px;
  padding-right:40px;
  padding-left:40px;
}
#func1 .right{
  width: 720px;
  height: 480px;
  padding-top:80px;
  padding-right:40px;
}
#func1 .left div{
  margin-top: 22px;
  line-height: 2em;
}
#func1 h2{
  line-height: 40px;
}
#func1 img{
  width: 720px;
  height: 480px;
  object-fit: contain;
}

/* 再利用可能なUIコンポーネント */
#func2{
  display: flex;
}
#func2 .right{
  width: 440px;
  height: 447px;
  padding-top:113px;
  padding-left:40px;
  padding-right:40px;
}
#func2 .left{
  width: 720px;
  height: 560px;
  padding-top:80px;
  padding-left:40px;
}
#func2 .right div{
  margin-top: 22px;
  line-height: 2em;
}
#func1 h2{
  line-height: 40px;
}
#func2 img{
  width: 720px;
  height: 480px;
  object-fit: contain;
}

/* 複数のデザインシステムを管理 */
#func3{
  display: flex;
}
#func3 .left{
  width: 440px;
  height: 431px;
  padding-top:129px;
  padding-right:40px;
  padding-left:40px;
}
#func3 .right{
  width: 720px;
  height: 480px;
  padding-top:80px;
  padding-right:40px;
}
#func3 .left div{
  margin-top: 22px;
  line-height: 2em;
}
#func3 h2{
  line-height: 40px;
}
#func3 img{
  width: 720px;
  height: 480px;
  object-fit: contain;
}

/* コンテンツ */
#contents{
  padding-bottom: 80px;
  text-align: center;
}
#contents h2{
  padding-top:80px;
}
#contents .c2{
  display: flex;
  justify-content:space-between;
  flex-wrap:wrap;
  padding-left: 40px;
  padding-right: 40px;
}
#contents .div2{
  margin-top: 60px;
  width: 580px;
}
#contents .c2 h3{
  padding-top: 10px;
  margin-bottom: 0;
}
#contents .c2 .image{
  margin: 0;
}
#contents img{
  width: 580px;
  height: 400px;
}