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

/*--------------------------------------------------------------
#top-area
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	#top-area {
		margin: 0 0 50px 0;
		padding: 0;
		position: relative;
	}
	
	#top-area .img {
		margin: 2%;
		padding: 0;
		background: url("img/top_img.jpg") top center no-repeat;
		background-size: cover;
		border-radius: 20px;
		height: 50vh;
	}
	
	#top-area .box {
		margin: -40px 0 0 0;
		padding: 0;
		text-align: center;
	}
	
	#top-area .box span {
		margin: 0;
		padding: 0;
		font-size: 50px;
		font-weight: 800;
		-webkit-text-stroke-width: 2px;
		-webkit-text-stroke-color: black;
		color: #FFF;
		line-height: 1;
	}
	
	#top-area .box h1 {
		margin: 10px 0 0 10px;
		padding: 0;
		font-size: 16px;
		font-weight: 600;;
		letter-spacing: 1px;
	}
	
}

/* Small than tablet */
@media (min-width: 768px) {
	
	                                                                                                                                                                                                                                                                                                                                        
	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	#top-area {
		margin: 0 0 4.16vw 0;
		padding: 0;
		position: relative;
	}
	
	#top-area .img {
		margin: 2% 2% 0 25%;
		padding: 0;
		background: url("img/top_img.jpg") top center no-repeat;
		background-size: cover;
		border-radius: 2.5vw;
		height: 36.6vw;
	}
	
	#top-area .box {
		margin: 0;
		padding: 0;
		position: absolute;
		top: 50%;
		left: 5%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		text-align: left;
	}
	
	#top-area .box span {
		margin: 0;
		padding: 0;
		font-size: 6.66vw;
		font-weight: 600;
		-webkit-text-stroke-width: 2px;
		-webkit-text-stroke-color: black;
		color: #FFF;
		line-height: 1;
	}
	
	#top-area .box h1 {
		margin: 1.25vw 0 0 0.83vw;
		padding: 0;
		font-size: 1.5vw;
		font-weight: 600;;
		letter-spacing: 1px;
	}
	
}

/*--------------------------------------------------------------
#interview-area
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	#interview-area {
		margin: 0 20px;
		padding: 0;
	}
	
	
	
}

/* Small than tablet */
@media (min-width: 768px) {
	
	                                                                                                                                                                                                                                                                                                                                        
	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	#interview-area {
		margin: 0 5% 5% 5%;
		padding: 0;
	}
	
}

/*--------------------------------------------------------------
.profile-area
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	.profile-area {
		margin: 0;
		padding: 0;
		position: relative;
	}
	
	.model1 {
		margin: 0;
		padding: 0;
		background: url("img/profile_ground1.jpg") no-repeat;
		background-position: top 70px left 0;
		background-size: cover;
		line-height: 0;
	}
	
	.model2 {
		margin: 0;
		padding: 0;
		background: url("img/profile_ground2.jpg") no-repeat;
		background-position: top 70px left 0;
		background-size: cover;
		line-height: 0;
	}
	
	.model3 {
		margin: 0;
		padding: 0;
		background: url("img/profile_ground3.jpg") no-repeat;
		background-position: top 70px left 0;
		background-size: cover;
		line-height: 0;
	}
	
	.model1 img {
		margin: 0 10%;
		padding: 0;
		width: 80%;
	}
	
	.model2 img {
		margin: 0 10%;
		padding: 0;
		width: 80%;
	}
	
	.model3 img {
		margin: 0 10%;
		padding: 0;
		width: 80%;
	}
	
	.profile-area dl {
		margin: 20px 0 0 0;
		padding: 0 0 20px 0;
		border-right: 3px solid #A7E0B1;
	}
	
	.profile-area dl dt {
		margin: 0 0 15px 0;
		padding: 0;
		font-size: 18px;
		font-weight: 600;
		letter-spacing: 1px;
		line-height: 2;
	}
	
	.profile-area dl dt span {
		margin: 0;
		padding: 0 5px;
		background: #A7E0B1;
		border: 2px solid #000;
	}
	
	.profile-area dl dd {
		margin: 0;
		padding: 0;
		font-size: 20px;
		font-weight: 500;
		letter-spacing: 1px;
	}
	
	.profile-area dl dd span.career {
		margin: 0;
		padding: 0;
		font-size: 13px;
		display: block;
	}
	
	.profile-area dl dd span.en {
		margin: 0;
		padding: 0;
		font-size: 10px;
		font-weight: 600;
		color: #FCABC3;
		display: block;
	}
	
}

/* Small than tablet */
@media (min-width: 768px) {
	
	                                                                                                                                                                                                                                                                                                                                        
	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	.profile-area {
		margin: 0;
		padding: 0;
		position: relative;
	}
	
	.model1 {
		margin: 0;
		padding: 0;
		background: url("img/profile_ground1.jpg") no-repeat;
		background-position: top 5.83vw left 0;
		background-size: cover;
		line-height: 0;
	}
	
	.model2 {
		margin: 0;
		padding: 0;
		background: url("img/profile_ground2.jpg") no-repeat;
		background-position: top 5.83vw left 0;
		background-size: cover;
		line-height: 0;
	}
	
	.model3 {
		margin: 0;
		padding: 0;
		background: url("img/profile_ground3.jpg") no-repeat;
		background-position: top 5.83vw left 0;
		background-size: cover;
		line-height: 0;
	}
	
	.model1 img {
		margin: 0 0 0 5vw;
		padding: 0;
		width: 41.6vw;
	}
	
	.model2 img {
		margin: 0 0 0 50px;
		padding: 0;
		width: 40.8vw;
	}
	
	.model3 img {
		margin: 0 0 0 3px;
		padding: 0;
		width: 49.5vw;
	}
	
	.profile-area dl {
		margin: 0;
		padding: 0;
		position: absolute;
		top: 60%;
		left: 55%;
		-webkit-transform: translateY(-50%); /* Safari用 */
		transform: translateY(-50%);
		border-right: 0 solid #A7E0B1;
	}
	
	.profile-area dl dt {
		margin: 0 0 2.5vw 0;
		padding: 0;
		font-size: 1.83vw;
		font-weight: 600;
		letter-spacing: 1px;
		line-height: 2;
	}
	
	.profile-area dl dt span {
		margin: 0;
		padding: 0 0.41vw;
		background: #A7E0B1;
		border: 2px solid #000;
	}
	
	.profile-area dl dd {
		margin: 0;
		padding: 0;
		font-size: 2.08vw;
		font-weight: 500;
		letter-spacing: 1px;
	}
	
	.profile-area dl dd span.career {
		margin: 0;
		padding: 0;
		font-size: 1.16vw;
		display: block;
	}
	
	.profile-area dl dd span.en {
		margin: 0;
		padding: 0;
		font-size: 1.08vw;
		font-weight: 600;
		color: #FCABC3;
		display: block;
	}
	
	
	
}

/*--------------------------------------------------------------
.contents
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	.contents {
		margin: 0 0 50px 0;
		padding: 0 5% 5% 5%;
		border-left: 3px solid #A7E0B1;
		border-right: 3px solid #A7E0B1;
		border-bottom: 3px solid #A7E0B1;
		border-radius: 0 0 30px 30px;
	}
	
	.contents dl {
		margin: 0 0 30px 0;
		padding: 0;
	}
	
	.contents dl.row {
		
	}
	
	.contents dl dt {
		margin: 0 0 20px 0;
		padding: 0;
		width: 100%;
	}
	
	.contents dl dt img {
		border-radius: 50px;
	}
	
	.contents dl dd {
		margin: 0;
		padding: 0;
		width: 100%;
	}
	
	.contents dl dd h4,
	.message h4 {
		margin: 0 0 15px 0;
		padding: 0;
		font-size: 20px;
		font-weight: 600;
		letter-spacing: 1px;
		text-indent: -1.4em;
		padding-left: 1.4em;
	}
	
	.contents dl dd h4 span,
	.message h4 span {
		margin: 0 5px 0 0;
		padding: 0;
		color: #7FD38E;
	}
	
	.contents dl dd p,
	.message p {
		margin: 0 0 50px 0;
		padding: 0;
		font-size: 13px;
		font-weight: 500;
		letter-spacing: 1px;
		line-height: 2;
	}
	
	.message {
		margin: 0;
		padding: 0 1.5%;
	}
	
}

/* Small than tablet */
@media (min-width: 768px) {
	
	                                                                                                                                                                                                                                                                                                                                        
	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	.contents {
		margin: 0 0 4.16vw 0;
		padding: 6.66vw 5% 5% 5%;
		border-left: 3px solid #A7E0B1;
		border-right: 3px solid #A7E0B1;
		border-bottom: 3px solid #A7E0B1;
		border-radius: 0 0 2.5vw 2.5vw;
	}
	
	.contents dl {
		margin: 0 0 2.5vw 0;
		padding: 0;
		display: flex;
		justify-content: space-between;
	}
	
	.contents dl.row {
		flex-direction: row-reverse;
	}
	
	.contents dl dt {
		margin: 0;
		padding: 0 1%;
		width: 48%;
	}
	
	.contents dl dt img {
		border-radius: 4.16vw;
	}
	
	.contents dl dd {
		margin: 0;
		padding: 0 1.5%;
		width: 47%;
	}
	
	.contents dl dd h4,
	.message h4 {
		margin: 0 0 1.25vw 0;
		padding: 0;
		font-size: 1.83vw;
		font-weight: 600;
		letter-spacing: 1px;
		text-indent: -1.4em;
		padding-left: 1.4em;
	}
	
	.contents dl dd h4 span,
	.message h4 span {
		margin: 0 0.41vw 0 0;
		padding: 0;
		color: #7FD38E;
	}
	
	.contents dl dd p,
	.message p {
		margin: 0 0 4.16vw 0;
		padding: 0;
		font-size: 1.16vw;
		font-weight: 500;
		letter-spacing: 1px;
		line-height: 2;
	}
	
	.message {
		margin: 0;
		padding: 0 1.5%;
	}
	
}


/*--------------------------------------------------------------
.btn-area
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	.btn-area{
		margin:  0 0 50px 0;
		font-size: 18px;
		font-weight: 600;
		letter-spacing: 1px;
		text-align: center;
	}
	
	.btn-area .btn{
		position: relative;
		overflow: hidden;
		text-decoration: none;
		display: inline-block;
		border: 2px solid #222;
		padding: 10px 40px;
		text-align: center;
		outline: none;
		transition: ease .2s;
		border-radius: 50px;
		box-shadow: 1px 5px 0 rgba(53,53,53,0.20);
		width: 270px;
	}
	
	.btn-area .btn{
		background: #FCABC3;
	}

	.btn-area .btn span {
		position: relative;
		z-index: 3;
		color: #222;
	}
	
	.btn-area .btn:hover span{
		color: #222;
	}
	
	.btn-area .bg2:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		background: #FDDAE4;/*背景色*/
		width: 100%;
		height: 100%;
		transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
		transform: scale(0, 1);
		transform-origin: right top;
	}
	
	.btn-area .bg2:hover:before{
		transform-origin: left top;
		transform: scale(1, 1);
	}
	
}

/* Small than tablet */
@media (min-width: 768px) {
	
	                                                                                                                                                                                                                                                                                                                                        
	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	.btn-area{
		margin:  0 0 8.33vw 0;
		font-size: 1.66vw;
		font-weight: 600;
		letter-spacing: 1px;
		text-align: center;
	}
	
	.btn-area .btn{
		position: relative;
		overflow: hidden;
		text-decoration: none;
		display: inline-block;
		border: 2px solid #222;
		padding: 0.83vw 3.33vw;
		text-align: center;
		outline: none;
		transition: ease .2s;
		border-radius: 4.16vw;
		box-shadow: 1px 0.41vw 0 rgba(53,53,53,0.20);
		width: 22.5vw;
	}
	
	.btn-area .btn{
		background: #FCABC3;
	}

	.btn-area .btn span {
		position: relative;
		z-index: 3;
		color: #222;
	}
	
	.btn-area .btn:hover span{
		color: #222;
	}
	
	.btn-area .bg2:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		background: #FDDAE4;/*背景色*/
		width: 100%;
		height: 100%;
		transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
		transform: scale(0, 1);
		transform-origin: right top;
	}
	
	.btn-area .bg2:hover:before{
		transform-origin: left top;
		transform: scale(1, 1);
	}
	
}