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

	変数設定

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.container {
  width: 1200px;
  margin: 0 auto;
  margin: 0 auto;
}

@media screen and (max-width: 1200px) {
  .container {
    width: 90%;
    margin: 0 auto;
  }
}
@media screen and (max-width: 768px) {
  .container {
    width: calc(100% - 40px);
    margin: 0 auto;
  }
}
/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	common

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*--------------------------------------------------------------
	titleBlock
--------------------------------------------------------------*/
#titleBlock {
  background-image: url("../../design/img/title_bg.jpg");
  color: #000;
}

/*--------------------------------------------------------------
	leadBlock
--------------------------------------------------------------*/
/*--------------------------------------------------------------
	serviceBlock
--------------------------------------------------------------*/
#serviceBlock {
  padding: 120px 0;
  overflow: hidden;
}
#serviceBlock h4 {
  text-align: center;
  background: #231815;
  color: #fff;
  padding: 10px;
  margin-bottom: 20px;
}

/*--------------------------------------------------------------
	cherishBlock
--------------------------------------------------------------*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	index

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*--------------------------------------------------------------
	leadBlock
--------------------------------------------------------------*/
#design #contentsBlock {
  background-image: url("../../design/img/contents_bg.jpg");
}

/*--------------------------------------------------------------
	menuBlock
--------------------------------------------------------------*/
#menuBlock ul {
  color: #fff;
  overflow: hidden;
}
#menuBlock li {
  float: left;
  width: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
#menuBlock section {
  padding: calc(120px / 2);
}
#menuBlock h3 {
  font-size: 1.75rem;
  text-shadow: 0px 0px 3px #231815;
}
#menuBlock p {
  text-shadow: 0px 0px 3px #231815;
}
#menuBlock li:nth-child(1) {
  background-image: url("../../design/img/web.jpg");
}
#menuBlock li:nth-child(2) {
  background-image: url("../../design/img/graphic.jpg");
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	web

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*--------------------------------------------------------------
	leadBlock
--------------------------------------------------------------*/
#web #contentsBlock {
  background-image: url("../../design/img/web_benefit_bg.jpg");
}
#web #contentsBlock dl {
  float: left;
  width: calc(50% - 20px);
}
#web #contentsBlock dl:nth-child(1) {
  margin-right: 40px;
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	graphic

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*--------------------------------------------------------------
	leadBlock
--------------------------------------------------------------*/
#graphic #leadBlock h3 {
  font-size: 2.5rem;
}

#graphic #contentsBlock {
  background-image: url("../../design/img/graphic_contents_bg.jpg");
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	result

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*--------------------------------------------------------------
	resultBlock
--------------------------------------------------------------*/
#resultBlock {
  padding-bottom: 120px;
}
#resultBlock .archive_list:nth-child(1) {
  margin-bottom: 120px;
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

	flow

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*--------------------------------------------------------------
	leadBlock
--------------------------------------------------------------*/
#flow #leadBlock h3 {
  font-size: 2.5rem;
}

/*--------------------------------------------------------------
	flowBlock
--------------------------------------------------------------*/
#flowBlock {
  padding: 120px;
  background: url("../../design/img/flow.jpg") center no-repeat;
  background-size: cover;
  overflow: hidden;
}
#flowBlock section {
  float: left;
  width: calc(50% - 40px);
  color: #fff;
}
#flowBlock section:nth-child(1) {
  margin-right: 40px;
}
#flowBlock h4 {
  text-align: center;
  font-size: 1.5rem;
  background: #fabe00;
  padding: 10px;
}
#flowBlock li {
  overflow: hidden;
  padding: 40px;
  background: rgba(35, 24, 21, 0.85);
  border-bottom: 1px dotted #999;
}
#flowBlock li div {
  float: left;
}
#flowBlock li .step_no {
  position: relative;
  text-align: center;
  line-height: 1;
  width: 80px;
  height: 80px;
  padding-top: 15px;
  background: #fabe00;
  border-radius: 100%;
  margin-right: 20px;
}
#flowBlock li .step_no span {
  display: block;
  font-size: 2rem;
}
#flowBlock li .step_no::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  bottom: -20px;
  left: 0;
  right: 0;
  margin: 0 auto;
  border: solid 8px transparent;
  border-top: solid 14px #fabe00;
}
#flowBlock li .flow_box {
  width: calc(100% - 100px);
}
#flowBlock li .flow_box h5 {
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1.6;
  margin-bottom: 10px;
}
#flowBlock li:last-child {
  border-bottom: none;
}
#flowBlock li:last-child .step_no::before {
  display: none;
}

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

  	common

  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
  /*--------------------------------------------------------------
  	titleBlock
  --------------------------------------------------------------*/
  /*--------------------------------------------------------------
  	leadBlock
  --------------------------------------------------------------*/
  /*--------------------------------------------------------------
  	serviceBlock
  --------------------------------------------------------------*/
  #serviceBlock {
    padding: calc(120px / 2) 0;
  }
  /*--------------------------------------------------------------
  	cherishBlock
  --------------------------------------------------------------*/
  /*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

  	index

  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
  /*--------------------------------------------------------------
  	leadBlock
  --------------------------------------------------------------*/
  /*--------------------------------------------------------------
  	menuBlock
  --------------------------------------------------------------*/
  #menuBlock li {
    float: none;
    width: 100%;
  }
  #menuBlock section {
    padding: calc(120px / 4) calc(120px / 4) calc(120px / 2) calc(120px / 4);
  }
  /*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

  	web

  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
  /*--------------------------------------------------------------
  	leadBlock
  --------------------------------------------------------------*/
  #web #contentsBlock dl {
    float: none;
    width: 100%;
  }
  #web #contentsBlock dl:nth-child(1) {
    margin: 0 0 20px 0;
  }
  /*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

  	graphic

  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
  /*--------------------------------------------------------------
  	leadBlock
  --------------------------------------------------------------*/
  #graphic #leadBlock h3 {
    font-size: 2rem;
    line-height: 1.6;
  }
  /*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

  	result

  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
  /*--------------------------------------------------------------
  	resultBlock
  --------------------------------------------------------------*/
  #resultBlock {
    padding-bottom: calc(120px / 2);
  }
  #resultBlock .archive_list:nth-child(1) {
    margin-bottom: calc(120px / 2);
  }
  /*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

  	flow

  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
  /*--------------------------------------------------------------
  	leadBlock
  --------------------------------------------------------------*/
  #flow #leadBlock h3 {
    font-size: 2rem;
    line-height: 1.6;
  }
  /*--------------------------------------------------------------
  	flowBlock
  --------------------------------------------------------------*/
  #flowBlock {
    padding: calc(120px / 4) 0;
  }
  #flowBlock section {
    float: none;
    width: 100%;
  }
  #flowBlock section:nth-child(1) {
    margin: 0 0 20px 0;
  }
  #flowBlock h4 {
    font-size: 1.25rem;
    line-height: 1.4;
  }
  #flowBlock li {
    padding: 20px;
  }
  #flowBlock li .step_no {
    width: 50px;
    height: 50px;
    padding-top: 10px;
    font-size: 0.8rem;
  }
  #flowBlock li .step_no span {
    display: block;
    font-size: 1.5rem;
  }
  #flowBlock li .step_no::before {
    bottom: -18px;
  }
  #flowBlock li .flow_box {
    width: calc(100% - 70px);
  }
}/*# sourceMappingURL=design.css.map */