@charset "utf-8";
/* CSS Document */
.bg-img-voice{
    background: url( "../recruit/i/pagetitle-voice@2x.jpg") no-repeat center top;
    background-size: cover;
}
article{
		margin-bottom: 3rem;
}

/*--------------------
 吹き出しを作る
--------------------*/
.balloon {
margin-bottom: 2em;
position: relative;
}
.balloon:before,.balloon:after {
clear: both;
content: "";
display: block;
}
.balloon figure {
width: 60px;
height: 60px;
}
.balloon-image-left {
float: left;
margin-right: 20px;
}
.balloon-image-right {
float: right;
margin-left: 20px;
}
.balloon figure img {
width: 100%;
height: 100%;
border: 1px solid #aaa;
border-radius: 50%;
margin: 0;
}
.balloon-image-description {
padding: 5px 0 0;
font-size: 10px;
text-align: center;
}
.balloon-text-right,.balloon-text-left,
.balloon-text-right1,.balloon-text-left1, 
.balloon-text-right2,.balloon-text-left2, 
.balloon-text-right3,.balloon-text-left3, 
.balloon-text-right4,.balloon-text-left4{
position: relative;
padding: 10px;
border: 1px solid;
border-radius: 10px;
max-width: -webkit-calc(100% - 120px);
max-width: calc(100% - 120px);
display: inline-block;
}
.balloon-text-right{
border-color: #db6c00;
color: #db6c00;
}
.balloon-text-right1{
border-color: #f9bf2f;
color: #f9bf2f;
}
.balloon-text-right2{
border-color: #99413f;
	color: #99413f;
}
.balloon-text-right3{
border-color: #11714e;
color: #11714e;
}
.balloon-text-right4{
border-color: #63b482;
color: #63b482;
}

.balloon-text-left {
border-color: #65af68;
color: #65af68;
}

.balloon-text-left1 {
border-color: #b84504;
color: #b84504;
}

.balloon-text-left2{
border-color: #06333b;
color: #06333b;
}

.balloon-text-left3 {
border-color: #7ab227;
color: #7ab227;
}

.balloon-text-left4 {
border-color: #aaa;
}
.balloon-text-right,
.balloon-text-right1,
.balloon-text-right2,
.balloon-text-right3,
.balloon-text-right4{
float: left;
}
.balloon-text-left,
.balloon-text-left1,
.balloon-text-left2,
.balloon-text-left3,
.balloon-text-left4{
float: right;
}
.balloon p {
margin: 0 0 20px;
}
.balloon p:last-child {
margin-bottom: 0;
}
/* 三角部分 */
.balloon-text-right:before,
.balloon-text-right1:before,
.balloon-text-right2:before,
.balloon-text-right3:before,
.balloon-text-right4:before{
position: absolute;
content: '';
border: 10px solid transparent;
/*border-right: 10px solid #aaa;*/
top: 15px;
left: -20px;
}
.balloon-text-right:before{
border-right: 10px solid #db6c00;
}
.balloon-text-right1:before{
border-right: 10px solid #f9bf2f;
}
.balloon-text-right2:before{
border-right: 10px solid #99413f;
}
.balloon-text-right3:before{
border-right: 10px solid #11714e;
}
.balloon-text-right4:before{
border-right: 10px solid #63b482;
}
.balloon-text-right:after,
.balloon-text-right1:after,
.balloon-text-right2:after,
.balloon-text-right3:after,
.balloon-text-right4:after{
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #fff;
top: 15px;
left: -19px;
}
.balloon-text-left:before,
.balloon-text-left1:before,
.balloon-text-left2:before,
.balloon-text-left3:before,
.balloon-text-left4:before{
position: absolute;
content: '';
border: 10px solid transparent;
/*border-left: 10px solid #aaa;*/
top: 15px;
right: -20px;
}
.balloon-text-left:before{
border-left: 10px solid #65af68;
}
.balloon-text-left1:before{
border-left: 10px solid #b84504;
}
.balloon-text-left2:before{
border-left: 10px solid #06333b;
}
.balloon-text-left3:before{
border-left: 10px solid #7ab227;
}
.balloon-text-left4:before{
border-left: 10px solid #aaa;
}
.balloon-text-left:after,
.balloon-text-left1:after,
.balloon-text-left2:after,
.balloon-text-left3:after,
.balloon-text-left4:after{
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #fff;
top: 15px;
right: -19px;
}

/* スクロールすると下からふわっとさせるためのコード */
.inview {
  /* 要素を透明にする */
  opacity: 0;
  /* 30px下げる */
  transform: translateY(30px);
  /* 2秒かけて、変化させる */
  transition: opacity 1.5s, transform 1s;
}

.inview.active {
  opacity: 1;
  transform: translateY(0px);
}

@media (min-width: 1000px) {
	article{
		margin-bottom: 5rem;
	}
	.balloon{
		width: 80%;
		margin: 0 auto 3rem auto;	
	}
	.balloon-text-right,.balloon-text-left,
	.balloon-text-right1,.balloon-text-left1,
	.balloon-text-right2,.balloon-text-left2,
	.balloon-text-right3,.balloon-text-left3,
	.balloon-text-right4,.balloon-text-left4{
		max-width: -webkit-calc(100% - 150px);
		max-width: calc(100% - 150px);
	}
}
@media (max-width: 480px) {

	.balloon-text-right,.balloon-text-left,
	.balloon-text-right1,.balloon-text-left1,
	.balloon-text-right2,.balloon-text-left2,
	.balloon-text-right3,.balloon-text-left3,
	.balloon-text-right4,.balloon-text-left4{
		max-width: -webkit-calc(100% - 80px);
		max-width: calc(100% - 80px);
	}
}