@charset "UTF-8";
/* CSS Document */



/*-----------
gencyo
-----------*/


.gencyo_contents{
  width: 820px;
  border-top: 1px solid #aaa9a1;
  padding: 70px 90px 80px;
}

h3{
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.gencyo_contents > p{
  font-size: 16px;
  margin-bottom: 40px;
  text-align: left;
}

#grouping ul{
  width: 100%;
  display:flex;
  flex-wrap:wrap;
}

#grouping ul li{
  width: 48%;
  padding: 5px;
  box-sizing: border-box;
  background: #fff;
  text-align: center;
}

#grouping ul li:first-child{
  margin-right: 4%;
}

#grouping ul li> p > img{
  width: 143px;
  height: 47px;
  padding: 10px 0 15px;
}
#grouping ul li > img{
  width: 100%;
}

#pattern table{
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  table-layout: fixed;
  background: #fff;
}

#pattern table tr{
  border-bottom: 1px solid #cccccc;
}

#pattern table tr:last-child{
  border-bottom: none;
}

#pattern table tr th{
  background: #ececec;
  vertical-align: middle;
  font-size: 16px;
  font-weight: bold;
  width: 180px;
}

#pattern table tr th span{
  font-size: 12px;
}

#pattern table td{
  border-left: 1px solid #cccccc;
  padding: 1.4em 1.8em;
  box-sizing: border-box;
}

#pattern table td img{
  width: 100%;
}

#pattern table td img.img_side{
  padding: 0 30px;
  box-sizing: border-box;
}

#pattern table td img.img_pattern{
  width: 143px;
}

.flow_img{
  width: 820px;
  height: 991px;
  background: url("../img/gencyo_flow.png") no-repeat left top;
  background-size: 820px auto;
}

.flow_img img{
  display: none;
}

#download.gencyo_contents{
  width: 890px;
  padding: 70px 55px 80px;
}

.btn_download{
  width: 890px;
  display:flex;
  flex-wrap:wrap;
}

.btn_download li{
  width: 440px;
}

.btn_download li:first-child{
  margin-right: 10px;
}

.btn_download li a{
  display: block;
  width: 440px;
  background: #1b365d url("../../common/img/arrow_r_w.png") no-repeat center right 12px;
  background-size: 9px auto;
  border-radius: 3px;
  color: #fff;
  margin: 0 auto;
  font-size: 16px;
  line-height: 23px;
  text-align: center;
  padding: 15px 10px 15px 30px;
  box-sizing: border-box;
  position: relative;
}

.btn_download li a img{
  position: absolute;
  top: 12px;
  left: 25px;
}

.btn_download li a span {
  font-family:"Meiryo";
  letter-spacing: -0.5em;
}


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


.gencyo_contents{
  width: 100%;
  padding: 30px 0 40px;
}

h3{
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.gencyo_contents > p{
  font-size: 16px;
  margin-bottom: 40px;
  text-align: left;
}

#grouping ul{
  width: 100%;
  display:flex;
  flex-wrap:wrap;
}

#grouping ul li{
  width: 48%;
  padding: 5px;
  box-sizing: border-box;
  background: #fff;
  text-align: center;
}

#grouping ul li:first-child{
  margin-right: 4%;
}

#grouping ul li> p > img{
  width: 70%;
  height: auto;
}
#grouping ul li > img{
  width: 100%;
}

#pattern table tr th{
  width: 70px;
  padding: .8em;
  box-sizing: border-box;
  font-size: 11px;
}

#pattern table tr th span{
  font-size: 11px;
}

#pattern table td{
  border-left: 1px solid #cccccc;
  padding: .6em;
  box-sizing: border-box;
}

#pattern table td img.img_side{
  padding: 0;
}

#pattern table td img.img_pattern{
  width: 80%;
}

.flow_img{
  width: 100%;
  height: auto;
  background: none;
}

.flow_img img{
  display: block;
  width: 100%;
}

#download.gencyo_contents{
  width: 100%;
  padding: 30px 0 40px;
}

.btn_download{
  width: 100%;
  display: block;
}

.btn_download li{
  width: 100%;
}

.btn_download li:first-child{
  margin: 0 0 10px;
}

.btn_download li a{
  display: block;
  width: 100%;
  background: #1b365d url("../../common/img/arrow_r_w.png") no-repeat center right 12px;
  background-size: 9px auto;
  border-radius: 3px;
  color: #fff;
  margin: 0 auto;
  font-size: 16px;
  line-height: 23px;
  text-align: center;
  padding: 14px 25px 14px 48px;
  box-sizing: border-box;
  position: relative;
}

.btn_download li a img{
  position: absolute;
  top: 50%;
  left: 15px;
  margin-top: -15px;
}

}