#main #ttl h1{
 background: url(../img/diy/bg_ttl.jpg) no-repeat center center;
 background-size: cover;
}
#sec1{
 background: url(../img/diy/bg1.jpg) no-repeat center center;
 padding: 100px 10px;
 background-size: cover;
}
#sec1 .inner{
 background: rgba(255,255,255,0.85);
 box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
 width: 500px;
 height: 500px;
 border-radius: 50%;
 margin-left: auto;
 margin-right: auto;
 display: flex;
 justify-content: center;
 align-items: center;
 text-align: center;
}
#sec2 .bg{
 background: url(../img/diy/bg2.jpg) no-repeat center center;
 background-size: cover;
}
#sec2 .list{
 text-align: center;
 display: flex;
 justify-content: center;
}
#sec2 .list li{
 display: flex;
 width: 240px;
 height: 240px;
 background: #fff;
 border-radius: 50%;
 border:solid 4px #071F4F;
 position: relative;
 align-items: center;
 justify-content: center;
 margin: 15px;
}
#sec2 .list li .inner{
 width: 100%;
}
#sec2 .list li .icon{
 position: absolute;
 width: 80px;
 height: auto;
 top: -45px;
 left: 50%;
 margin-left: -40px;
}
#sec2 .list2{
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}
#sec2 .list2 li{
 width: 30%;
 display: flex;
 align-items: center;
 background: #071F4F;
 color: #fff;
 margin: 5px;
 padding: 10px;
 box-sizing: border-box;
 position: relative;
}
#sec2 .list2 li:before{
 display: block;
 content: "";
 border-left: 12px solid #fff;
 border-bottom: 12px solid transparent;
 position: absolute;
 left: 0px;
 top: 0px;
}
#sec2 .list2 li a{
 display: flex;
 align-items: center;
 width: 100%
}
#sec2 .list2 li .icon{
 width: 45px;
 margin-right: 5px;
 text-align: center;
}

/*
===================================================
        sp
===================================================
*/
@media screen and (max-width: 768px) {
 #sec1{
  padding: 50px 10px;
 }
 #sec1 .inner{
  padding: 30px 15px;
  width: 90%;
  height: auto;
  border-radius: 0%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
 }
 #sec2 .bg{
  padding: 50px 10px;
 }
 #sec2 .list{
  display: block;
 }
 #sec2 .list li{
  display: flex;
  width: auto;
  height: auto;
  background: #fff;
  border-radius: 0%;
  border:solid 4px #071F4F;
  position: relative;
  align-items: center;
  justify-content: center;
  margin: 15px auto;
  padding: 15px;
 }
 #sec2 .list li .icon{
  position: absolute;
  width: 50px;
  height: auto;
  top: 5px;
  left: 5px;
  margin-left: 0px;
 }
 #sec2 .list2{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
 }
 #sec2 .list2 li{
  width: 100%;
  display: flex;
  align-items: center;
  background: #071F4F;
  color: #fff;
  margin: 5px;
  padding: 10px;
  box-sizing: border-box;
  position: relative;
 }
 #sec2 .list2 li:before{
  display: block;
  content: "";
  border-left: 12px solid #fff;
  border-bottom: 12px solid transparent;
  position: absolute;
  left: 0px;
  top: 0px;
 }
 #sec2 .list2 li .icon{
  width: 45px;
  margin-right: 5px;
  text-align: center;
 }
}