/*--------------------------------------------------------------
@media
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	#main-contents .contents h1,
	#main-contents .contents h2 {
		margin-left: 20px;
	}
	
	#main-contents .contents h3 {
		padding-left: 20px;
	}

	.recruit-navi {
		margin: 0 auto;
		padding: 0;
		text-align: center;
	}

	.recruit-navi ul {
		margin: 0;
		padding: 0;
	}
	
	.recruit-navi ul li {
		margin: 0 20px 0 0;
		padding: 0;
		line-height: 80px;
		font-size: 12px;
		color: #20b4e0;
	}
	
	.recruit-main-image {
		position: relative;
		margin: 0;
		padding: 0;
	}
	
	.photo-area {
		width: 100%;
		height: 250px;
		margin: 0 0 100px 0;
		padding: 0;
		overflow: hidden;
	}

	.staff-data {
		color: #fff;
		margin: 0;
		padding: 10px 20px;
		text-align: left;
		position: absolute;
		right: 0;
		bottom: -80px;
		list-style: none;
	}
	
	.staff-data li {
		background-color: #4fbee7;
		font-size: 12px;
		margin: 10px 0;
		padding: 5px 20px;
		color: #fff;
	}
	
	.staff-data .working {
		background-color: #fff;
		color: #4fbee7;
		display: inline-block;
	
	}
	
	.staff-data .name {
		display: block;
		font-size: 20px;
		margin: 0;
	}
	
	.name span {
		color: #4c4c4c;
		font-size: 12px;
		margin: 0 0 0 20px;
		vertical-align: middle;
		line-height: 20px;
	}
	
	.job {
		display: inline-block;
	}
	
	#main-contents .contents .text-area h2 {
		margin-top: 10px;
	}
	
	.middle-img {
		margin: 0;
		padding: 60px 40px;
		width: 100%;
		height: auto;
		box-sizing: border-box;
		position: relative;
	}
	
	.middle-img .middle-main {
		width: 100%;
		height: auto;
	}
		
	.capsule {
		width: 50px;
		height: auto;
		position: absolute;
		top: 0;
		left: 10px;
	}
	
	.medicine {
		width: 100px;
		height: auto;
		position: absolute;
		bottom: 0;
		right: 10px;
	}

	.under-box {
		background: url(../../../images/dot-bg.jpg) repeat;
		background-size: 8px 8px;
		position: relative;
		margin: 0 0 30px 0;
		padding: 30px 20px 0 20px;
	}
	
	.jaggie {
		position: absolute;
		top: 0;
		right: 0;
		line-height: 0;
		width: 100%;
		height: auto;
	}

	.future span {
		margin: 0 0 30px 0;
		padding-top: 60px;
		font-size: 18px;
		font-weight: 600;
		float: left;
		color: #20b4e0;
		display: block;
		position: relative;
	}
	
	.future p {
		clear: left;
		overflow: hidden;
		margin: 0;
		padding: 30px 0 0 0;
	}
	
	.future .area-image {
		color: #20b4e0;
		font-size: 20px;
		font-weight: 600;
		width: auto;
		height: auto;
		text-align: center;
		letter-spacing: 3px;
	}
	
	.future .area-image span {
		float: none;
		font-size: 14px;
		font-weight: 500;
		margin: 0;
		padding: 0;
	}
	
	.future .area-image img {
		width: 195px;
		height: 195px;
		object-fit: cover;
		border-radius: 50%;
		margin-bottom: 30px;
	}
	
	.right {
		float: none;
		clear: both;
	}
	
	.balloon {
		position: absolute;
		top: 30px;
		left: 20px;
		width: 120px;
		height: auto;
	}

}
/* Small than tablet */
@media (min-width: 768px) {
	
	#main-contents .contents h1,
	#main-contents .contents h2 {
		margin-left: 10px;
	}
	
	#main-contents .contents h3 {
		padding-left: 30px;
	}

	.photo-area {
		margin: 0 0 70px 0;
		height: 300px;
	}

	.staff-data {
		bottom: -90px;
	}
	
	.staff-data li {
		font-size: 14px;
	}

	.staff-data .working {
		font-size: 16px;
	}
	
	.staff-data .name {
		font-size: 26px;
	}
	
	.staff-data .name span {
		font-size: 14px;
	}
		
	.middle-img {
		margin: 0;
		padding: 60px 80px 100px 80px;
		width: 100%;
	}
		
	.capsule {
		width: 80px;
		height: auto;
	}
	
	.medicine {
		width: 160px;
		height: auto;
	}

	.under-box {
		padding: 50px 30px 0 30px;
	}

	.future span {
		margin: 0 0 30px 0;
		padding-top: 50px;
		margin-left: 0;
		font-size: 22px;
	}
	
	.future .area-image {
		font-size: 20px;
	}
	
	.future .area-image span {
		font-size: 14px;
	}
	
	.future .area-image img {
		margin-bottom: 30px;
	}

	.balloon {
		top: 40px;
		left: 30px;
		width: 140px;
		height: auto;
	}

}


/* Larger than tablet */
@media (min-width: 992px) {
	
		
	#main-contents .contents h1,
	#main-contents .contents h2 {
		margin-left: 25px;
	}
	
	#main-contents .contents h3 {
		padding-left: 0;
	}
	
	.side-navi dl .staff-name{
		padding-left: 45px;
	}
	
	.recruit-navi {
		display: none;
	}
	
	.photo-area {
		width: 90%;
		height: 400px;
	}

	.staff-data {
		font-size: 14px;
		right: 0;
		bottom: 20px;
	}
	
	.staff-data .working {
		font-size: 15px;
	}
	
	.staff-data .name {
		font-size: 28px;
	}
	
		
	.middle-img {
		margin: 0;
		padding: 60px 80px 100px 80px;
	}
	
	.capsule {
		width: 80px;
		height: auto;
		position: absolute;
	}
	
	.medicine {
		width: 160px;
		height: auto;
	}

	.under-box {
		padding: 100px 20px 0 20px;
	}

	.future span {
		margin: 0 0 30px 40px;
		padding: 0;
		font-size: 22px;
		font-weight: 600;
		float: left;
	}
	
	.future p {
		margin: 0;
		padding: 0 40px;
	}
	
	.future .area-image {
		font-size: 20px;
	}
	
	.future .area-image span {
		font-size: 14px;
	}
	
	.future .area-image img {
		margin-bottom: 30px;
	}
	
	.right {
		float: right;
		clear: none;
	}
	
	.balloon {
		top: 20px;
		left: 40px;
		width: 150px;
		height: auto;
	}
}