@charset "utf-8";

article{
  padding: 80px 0 80px;
}
@media only screen and (max-width: 768px) {
  article{
    padding: 40px 0 40px;
  }
}

.cont_img h1 {
  background: url(../images/page_title.png) no-repeat top 58px center;
  padding-top: 400px;
}

.cont h3 {
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  clear: both;
  font-weight: bold;
  border-left: none;
  border-bottom: none;
  ;
}

.cont .container {
  padding-bottom: 0;
}

/* 勤怠管理のこんな「お悩み」ございませんか？ */

.nayami{
  background: #eeeeee;
  margin-top: 60px;
}
@media only screen and (max-width: 768px) {
  article.nayami{
    padding: 70px 0 40px;
  }
}

.nayami .inner{
  position: relative;
}

.nayami .nayamiTitle {
  background: #fff;
  width: 612px;
  text-align: center;
  border-radius: 10px;
  font-size: 24px;
  padding: 7px 0;
  color: #000000;
  font-weight: bold;
  margin: 0;
  border-left: none;
  border: solid 1px #a1a1a1;
  -webkit-box-shadow: 12px 14px 10px -12px rgb(0 0 0 / 35%);
  box-shadow: 12px 14px 10px -12px rgb(0 0 0 / 35%);
  position: absolute;
  top: -111px;
  left: 174px;
}
@media only screen and (max-width: 768px) {
  .nayami .nayamiTitle {
    width: 100%;
    font-size: 18px;
    top: -110px;
    left: 0;
  }
}

.nayami .nayamiTitle span {
  color: #004382;
}

.nayami .nayamiTitle::after {
  content: '';
  background: url(../images/arrow.png) no-repeat;
  position: absolute;
  top: 54px;
  left: 0;
  right: 0;
  margin: auto;
  display: block;
  height: 20px;
  width: 25px;
}
@media only screen and (max-width: 768px) {
  .nayami .nayamiTitle::after {
    top: 74px;
  }
}

.nayamiBox{
  width: 300px;
  background: #fff;
  border-radius: 10px;
  padding: 40px;
  -webkit-box-shadow: 10px 14px 15px -1px rgba(0, 0, 0, 0.5);
  box-shadow: 10px 14px 15px -1px rgba(0, 0, 0, 0.15);
}
@media only screen and (max-width: 768px) {
    .nayamiBox{
      width: 100%;
      padding: 20px;
      margin-bottom: 40px;
    }
  }

  @media only screen and (max-width: 768px) {
    .nayamiBox:last-of-type{
       margin-bottom: 0;
    }
}

.nayami .nayamiBox h4{
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  clear: both;
  font-weight: bold;
  border-left: none;
  border-bottom: none;
  text-align: center;
  color: #1557a0;
  font-size: 18px;
}

.nayamiBox picture {
  width: 142px;
  margin: 30px auto 30px;
}
@media only screen and (max-width: 768px) {
  .nayamiBox picture {
    margin: 10px auto 20px;
  }
}

/* そのお悩みKIZUNAで解決できます！ */

.kaiketu{

}

.kaiketu .kaiketuTitle {
  background: #fff;
  text-align: center;
  font-size: 24px;
  padding: 0;
  color: #1557a0;
  font-weight: bold;
  margin: 0;
  border-left: none;
  margin-bottom: 60px;
  border-bottom: none;
}
@media only screen and (max-width: 768px) {
  .kaiketu .kaiketuTitle {
    font-size: 20px;
  }
}

.kaiketu .kaiketuTitle span{
  background: url(../images/nayami_h3.png) no-repeat bottom;
  width: 190px;
  padding-top: 35px;
  height: 0;
  overflow: hidden;
  display: inline-block;
}
@media only screen and (max-width: 768px) {
  .kaiketu .kaiketuTitle span{
    width: 120px;
    padding-top: 22px;
    background-size: contain;
    margin: 0 5px;
  }
}

.kaiketuBox{
  position: relative;
  border: solid 4px #1557a0;
  border-radius: 10px;
  width: 300px;
  background: #fff;
  border-radius: 10px;
  padding: 40px;
}
@media only screen and (max-width: 768px) {
  .kaiketuBox{
    width: 100%;
    padding: 40px 20px 20px;
    margin-bottom: 50px;
  }
}

@media only screen and (max-width: 768px) {
  .kaiketuBox:last-of-type{
    margin-bottom: 0;
  }
}

.kaiketuBox .icon{
  font-size: 21px;
    font-weight: bold;
    background: #f18700;
    color: #fff;
    width: 100px;
    text-align: center;
    padding: 5px 0;
    border-radius: 25px;
    position: absolute;
    top: -25px;
    left: calc(50% - 50px);
}

.kaiketuBox h4{
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    clear: both;
    font-weight: bold;
    border-left: none;
    border-bottom: none;
    text-align: center;
    color: #1557a0;
    font-size: 18px;
}

.kaiketuBox picture {
  width: 142px;
  margin: 10px auto 30px;
}
@media only screen and (max-width: 768px) {
  .kaiketuBox picture {
    margin: 10px auto 20px;
  }
}

/* クラウド勤怠システムdynaCloudの特徴５つの特徴 */
.tokutyou{
	padding-bottom: 0;
}
.renkei{
	padding-bottom: 50px;
}
.tokutyou .tokutyouTitle{
    background: url(../images/tokutyou_h3.png) no-repeat bottom;
    width: 393px;
    padding-top: 48px;
    height: 0;
    overflow: hidden;
    margin: auto auto 40px;
    background-size: contain;
  }
  @media only screen and (max-width: 768px) {
    .tokutyou .tokutyouTitle{
      width: 90.625%;
    }
	  .renkei {
    padding-bottom: 30px;
}
  }

.tokutyou ul li {
  font-size: 16px;
  font-weight: bold;
  padding: 10px 0 5px 49px;
  margin: 0 0 20px 50px;
}
@media only screen and (max-width: 768px) {
  .tokutyou ul li {
    font-size: 15px;
    padding: 5px 0 0px 35px;
    margin: 0 0 20px 0;
  }
}

.tokutyou ul li:nth-of-type(1){
    background: url(../images/no1.png)no-repeat;
    background-size: contain;
	width: 43%;
	
}
.tokutyou ul li:nth-of-type(2){
    background: url(../images/no2.png)no-repeat;
    background-size: contain;
	width: 43%;
	
	
}
.tokutyou ul li:nth-of-type(3){
    background: url(../images/no3.png)no-repeat;
    background-size: contain;
	width: 43%;
}
.tokutyou ul li:nth-of-type(4){
    background: url(../images/no4.png)no-repeat;
    background-size: contain;
	
}
.tokutyou ul li:nth-of-type(5){
    background: url(../images/no5.png)no-repeat;
    background-size: contain;
	width: 43%;
}

.flexBox-ja-fw-Pc {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

@media only screen and (max-width: 768px) {
  .tokutyou ul li:nth-of-type(1){
    background-size: 30px;
	width: 100%;
  }
}
@media only screen and (max-width: 768px) {
  .tokutyou ul li:nth-of-type(2){
    background-size: 30px;
	width: 100%;
  }
}
@media only screen and (max-width: 768px) {
  .tokutyou ul li:nth-of-type(3){
    background-size: 30px;
	width: 100%;
  }
}@media only screen and (max-width: 768px) {
  .tokutyou ul li:nth-of-type(4){
    background-size: 30px;
	width: 100%;
  }
}@media only screen and (max-width: 768px) {
  .tokutyou ul li:nth-of-type(5){
    background-size: 30px;
	width: 100%;
  }
}

/*　豊富な外部連携　*/
.renkei ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 50px;
	/*width: 980px;*/
	width: 100%;
}
.renkei ul li{
	width: 23%;
    margin-bottom: 15px;
    /* border: 1px solid #000000; */
    background: #5B595A;
    border-radius: 7px;
    text-align: center;
    color: #fff;
    padding: 4px;
}
.items{
	width: 980px;
	padding-top: 30px;
	padding-bottom: 30px;
	margin: 0 auto;
}
.dynacloud{
	width: 980px;
	position: relative;
	margin-top: 50px;
	margin: 0 auto;
	/*margin: 2em 0;*/
	padding-top: 35px;
	padding-bottom: 30px;
	border: solid 4px #1557a0;
	border-radius: 10px;
}
.dynacloud .dynatitle{
	background: #f18700;
    color: #fff;
    border-radius: 20px;
    position: absolute;
    display: inline-block;
    top: -27px;
    left: 30%;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    padding: 13px 20px;
}
.dynacloud p{
	font-size: 17px;
	line-height: 2em;
	font-weight: bold;
}
.logorenkei{
	background: url("../../images/common/logo_renkei2.png");
	width: 120px;
	height: 116px;
	margin: 0px auto;
}
.logorenkei p{
    font-size: 37px;
    color: #38A042;
    margin-top: 23px;
    margin-left: 23px;
}
.dynawrapper{
	display: flex;
	justify-content: space-between;
	margin-right: 170px;
    margin-left: 120px;
}
.clouudsystem{
	line-height: 1.5em;
	padding-top:10px;
}
.clouudsystem p{
	color: #3F8FEF;
	font-size: 18px;
}
p.dynacloudkintai{
	font-size: 35px;
	font-weight: bold;
	color: #3F8FEF;
	width: 200px;
}
.dynacloudkintai img{
	width: 345px;
}
.clouudsystem .cloudbox{
	background: #f18700;
    color: #fff;
    border-radius: 20px;
    text-align: center;
    padding: 2px 15px;
	font-size:15px;
	margin-bottom: 15px;
}

.dynasetumei{
	margin-top: 10px;
}
p.seihin{
	text-align: right;
}
@media only screen and (max-width: 768px) {
	.renkei ul{
		display: block;
	}
	.dynacloudkintai img {
    width: 100%;
		margin-top: 25px;
}
	
}
@media only screen and (max-width: 768px){
	.renkei ul li{
		text-align: center;
		width: 100%;
	}
}
@media only screen and (max-width: 768px){
	.dynacloud{
		width: 100%;
		display: block;
		padding: 30px;
	}
	.dynawrapper{
		display: block;
		width: 100%;
		margin: 0;
	}
	.dynacloud p{
		font-size: 15px;
		width: 100%;
		text-align: center;
	}
	.dynacloud .dynatitle{
		left:3.5%;
		font-size: 15px;
	}
	.logorenkei img{
		display: block;
		margin: 15px auto;
	}
	p.dynacloudkintai{
		font-weight: bold;
		font-size: 25px;
	}
	.logorenkei p{
    font-size: 35px;
    color: #38A042;
    margin-top: 23px;
    margin-left: 0px;
    padding-top: 25px;
}
	.items{
		display: block;
		width: 90.625%;
		margin: 0 auto;
	}
	ul.gaiburenkei{
		text-align: center;
	}
	p.seihin{
		text-align: left;
		font-size: 14px;
	}
}
/* ビックリするほど勤怠管理が”ラク”になる！ */

.innerScroll{
  width: 980px;
  margin: auto;
}
@media only screen and (max-width: 768px) {
  .innerScroll{
    width: 95%;
    overflow-x: scroll;
  }
}

article.graph{
  padding-top: 0;
}

.graph table{
  width: 100%;
  text-align: center;
  margin: 80px auto 60px;
}
@media only screen and (max-width: 768px) {
  .graph table{
    margin: 40px auto 40px;
    width: 980px
  }
}

.graph tr:nth-of-type(3){
  border-top: solid 10px #fff;
}
.graph th{
  background: #16609b;
  width: 210px;
  padding: 20px 0;
  color: #fff;
  font-size: 18px;
  font-weight: normal;
  border-right: solid 2px #fff;
  border-bottom: solid 2px #fff;
}

.graph th:nth-of-type(2)::before{
  content: '';
  display: inline-block;
  width: 20px;
  padding-top: 24px;
  background-image: url(../images/graph_icon01.png);
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}

.graph th:nth-of-type(3)::before{
  content: '';
  display: inline-block;
  width: 18px;
  padding-top: 24px;
  background-image: url(../images/graph_icon02.png);
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}

.graph th:nth-of-type(4)::before{
  content: '';
  display: inline-block;
  width: 25px;
  padding-top: 22px;
  background-image: url(../images/graph_icon03.png);
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}

.graph th:nth-of-type(5)::before{
  content: '';
  display: inline-block;
  width: 20px;
  padding-top: 24px;
  background-image: url(../images/graph_icon04.png);
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}

.graph th span{
  margin-left: 8px;
}

.graph th:first-of-type{
  background: #fff;
  width: 132px;
}

.graph td{
  background: #eeeeee;
  border-right: solid 2px #fff;
  position: relative;
}

.graph td:last-of-type{
  border-right: none;
}

.graph .before{
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background: #0a2d51;
  padding: 60px 0;
  border-right: solid 2px #fff;
}

.graph .after{
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background: #ff8e14;
  padding: 60px 0;
  border-right: solid 2px #fff;
}

.graph .arrow{
  position: absolute;
  bottom: -34px;
  left: calc(50% - 35px);
  z-index: 1000;
  width: 70px;
}


.guide{
  background: #009437;
  color: #fff;
  font-size: 16px;
  display: inline-block;
  font-weight: bold;
  padding: 10px 25px;
  margin-bottom: 20px;
  border-radius: 25px;
}

/* デフォルトで入っていたもの */
@media only screen and (max-width: 768px) {
.cont_img h1 {
  background: url(../images/page_title_sp.png)no-repeat center;
  background-size: cover;
 /* padding-top: 39.58333%;*/
	padding-top: 46.58333%;
}
#service .img01, #service .img02 {
  width: 100%;
  padding-top: 50.75%;
  height: 0;
  overflow: hidden;
  background: url(../images/01_sp.jpg) no-repeat left top;
  background-size: 100%;
  margin-bottom: 20px;
}
#service .img02 {
  background-image: url(../images/02_sp.jpg);
  margin-top: 30px;
  margin-bottom: 0;
}

/* dl */
dl.base {
  margin: 20px 0 0;
}

/* ul */
ul.base {
  margin: 20px 0 0;
}
}