@charset "utf-8";


/* ===========================================================================================================================
	button
=========================================================================================================================== */


.support .btn_form {
	background:#5AC1C6;
	line-height:normal;
	padding-top:0px;
	width:180px;
	margin-top:20px;
	margin-bottom:10px;
}


.support .btn_form:hover {
	background:#3dabb0;
}


.support .btn_form span {
	font-size:1.8rem;
	background:transparent;
	padding:15px 15px;
}


.support .btn_form::after {
	content: "";
  position: absolute;
  bottom: -45px;
  left: 0;
  right: 0;

  margin-left: auto;
  margin-right: auto;

  border-top: 15px solid transparent;
  border-right: 15px solid #5AC1C6;
  border-left: 0;
  border-bottom: 0;

  width: 0px;
  height: 0;

  transform: rotate(45deg);
}


.support .btn_form:hover::after {
	border-right:15px solid #3dabb0;
}


.support .btn_form:hover .txt_up {
	background:#3dabb0;
}


/**************************************************************
* creator_description
**************************************************************/


.creator_description .row {
	margin-bottom: 15px;
}


.creator_description .main_content {
    display: flex;
    align-items: center;
  }


.creator_description .main_content .headline_type3 {
      margin-bottom: 0;
    }


.creator_description .main_content img {
      border-radius: 4px;
    }


@media screen and (max-width: 599px) {
    .creator_description .main_content {
      flex-direction: column;
      row-gap: 10px;
      margin-bottom: 0;
    }
	.creator_description .row .col_4 {
    margin-left: auto;
    margin-right: auto;
		width: 100%;
    text-align: center;
	}

    .creator_description .row .col_4 img {
      width: 100%;
    }
}


/**************************************************************
* feature
**************************************************************/


.feature_item {
	margin-bottom:10px;

	border-radius:5px;
	border:1px solid var(--color-gray03);

	overflow: hidden;;
}


.feature_item_header {
	background-color:#40474E;

	padding: 10px 10px 8px;
}


.feature_item_header h4 {
	color: #FFF;
	font-size: 1.9934rem;

  position: relative;
}


.feature_item_header h4 > * {
  display: inline-block;
  vertical-align: middle;
}


.feature_item_header h4 .number {
  background-color: #F00E22;
  border-radius: 20px;

  width: 35px;
  height: 35px;

  color: #FFF;
  text-align: center;
  font-size: 2rem;

  padding: 5px;
  margin-right:10px;
}


.feature_item_header h4 .text {
  width: calc(100% - 90px);
}


.feature_item_header h4 .button {
  text-align: center;
  color: #979A9F;

  width: 30px;
  height: 38px;

  position: absolute;
  top: 0;
  bottom: 0;
  right: 5px;

  margin: auto;
  padding: 6px 5px;

  background-color: #FFF;
  border: 1px solid var(--color-gray03);
}


.feature_item_txt {
	background-color: var(--color-gray01);

	padding: 15px 10px;
	display:none;
}


.feature_item .feature_item_txt img {
	float:right;

	border-radius:10px;
	margin-left:10px;
}


@media screen and (max-width: 768px) {
	.feature_item .feature_item_txt img {
		width:40%;
	}
	.feature_item .col_3 {
		float:left;
		width:auto;
		margin-bottom:5px;
		margin-right:5px;
	}
	.feature_item .col_3:first-child {
		width:100%;
		float:none;
	}
	.feature_item_header h4 {
		font-size:1.772rem;
	}
}


@media screen and (max-width: 599px) {
	.feature_item_header {
		padding:8px 10px;
	}
	.feature_item_header h4 {
		font-size:1.575rem;
	}

	.feature_item_header h4 .number {
		width: 25px;
		height: 25px;

		font-size: 1.772rem;

	  padding: 1px;
	}

  .feature_item_header h4 .button {
    padding: 3px;

    width: 20px;
    height: 28px;
  }
}


/**************************************************************
* 掲載企業
**************************************************************/


.box_type2 {
	margin-bottom: 45px;
}


/*************************************************************
* お仕事開始までのフロー
*************************************************************/


.flow .box_type10:nth-of-type(2) {
			position: relative;
			z-index: 3;
		}


.flow .box_type10:nth-of-type(3) {
			position: relative;
			z-index: 4;
		}


.flow .box_type10:nth-of-type(4) {
			position: relative;
			z-index: 5;
		}


.flow .box_type10:nth-of-type(5) {
			position: relative;
			z-index: 6;
		}
/*# sourceMappingURL=creator.css.map */