@charset "utf-8";


/* -----------------------------------------------------------
    area_ask_works
-------------------------------------------------------------- */
.area_ask {
	width: 100%;
    background: #fff;
    padding: 0;
	margin: 0;
	border-top: 2px solid #0c2c3a;
	position: fixed;
	z-index: 100;
	bottom: 0;
}

.area_ask .box_txt {
	text-align: center;
	position: relative;
	padding: 10px 0 15px;
}
.area_ask .box_txt::before,
.area_ask .box_txt::after{
	display: block;
    content: '';
	position: absolute;
	z-index: 1;
}
.area_ask .box_txt::before{
    width: 87px;
    height: 125px;
    background: url(../img/img_freeask01.png) no-repeat center / contain;
    bottom: 0;
	left: 240px;
    /*left: calc(((100% - 1100px) / 2) + 160px);*/
}
.area_ask .box_txt::after{
    width: 95px;
    height: 144px;
    background: url(../img/img_freeask02.png) no-repeat center / contain;
    bottom: -20px;
    /*right: calc(((100% - 1100px) / 2) + 150px);*/
	right: 240px;
}
.area_ask .btn {
	width: 500px;
	margin: 0 auto;
}
.area_ask .btn a{
	width: 100%;
	color: #fff;
	font-size: 2.2rem;
    font-weight: bold;
	padding: 15px 0;
	background: #E94647;
    border: 1px solid #E94647;
    border-radius: 8px;
	box-shadow: 0 5px 0 #a03536;
	overflow: hidden;
	-webkit-transition: all .2s;
    transition: all .2s;
	position: relative;
	display: block;
}
.area_ask .btn a::before{
	content: "";
    background-image: linear-gradient(130deg,hsla(0,0%,100%,0) 20%,hsla(0,0%,100%,.5) 0,hsla(0,0%,100%,0) 80%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
    -webkit-animation: shiny 5s infinite linear;
    animation: shiny 5s infinite linear;
}
@-webkit-keyframes shiny {
  0% {
    left: -50%
  }
  20% {
    left: 120%
  }
  to {
    left: 120%
  }
}
@keyframes shiny {
  0% {
    left: -50%
  }
  20% {
    left: 120%
  }
  to {
    left: 120%
  }
}
.area_ask .btn a:hover{
	border: 1px solid #E94647;
	/*
	-webkit-transform: translateY(4px);
    transform: translateY(4px);
	*/
	-webkit-transform: translateY(2px);
    transform: translateY(2px);
	background: #E94647;
    box-shadow: 0 2px 0 #a03536;
}

@media screen and (max-width: 768px){
	
	.area_ask {
		margin: 0;
		padding: 0;
	}

	.area_ask .box_txt {
		width: 100%;
		border-right: none;
		border-left: none;
		box-sizing: border-box;
		padding: 10px 15px 15px 80px;
		display: flex;
	}

	.area_ask .box_txt::before{
		width: 65px;
		background: url(../img/img_freeask01.png) no-repeat center / contain;
		bottom: -10px;
		height: 110px;
		left: 5px;
	}

	.area_ask .box_txt::after{
		display: none;
	}

	.area_ask h3.title {
		font-size: 22px;
		font-weight: bold;
	}

	.area_ask .lead {
		padding: 10px 0 0;
		font-size: 100%;
	}

	.area_ask .txt {
		padding: 20px 0 0;
		font-size: 88%;
		line-height: 1.75;
		text-align: left;
	}

	.area_ask .txt_sub {
		font-size: 14px;
		margin: 20px 0 0;
	}
	.area_ask .txt_sub::before {
		margin-right: 10px;
	}
	.area_ask .txt_sub::after {
		margin-left: 10px;
	}

	
	.area_ask .btn {
		width: 100%;
	}
	.area_ask .btn a{
		width: auto;
		padding: 15px 0;
		box-shadow: 0 4px 0 #a03536;
		font-size: 1.8rem;
		line-height: 1.4;
	}


}