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

@media screen and (max-width:640px){
	.text-wrapper{
		font-size: 1.5vh;
		width: 90%;
		position: absolute;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
		text-align:center;
	}
	.default-message{
		width:100%;
		font-size: 2vh;
	}
	main::after{
		clear: inherit!important;
		content:""!important;
	}
	.lr-fr{
		width:100%;
		height:calc(100vh - 105px);
		position:relative;
		left:0;
		z-index: 50;
		font-size:0;
		overflow: hidden;
	}
	.lr-fr .split-leftfr{
		width:100%;
		height:100%;
		position:relative;
		top:0;
		left:0;
		display:inline-block;
		vertical-align:top;
		z-index: 55;
	}
	.lr-fr .split-leftfr .left{
		width:100%;
		height:100%;
		position:relative;
		top:0;
		left:0;
		background: url(../images/leftbg-sp.jpg) no-repeat;
		background-size: cover;
		background-position: center center;
		font-size: 2vh;
		overflow: hidden;
		z-index:55;
	}
	.lr-fr .split-leftfr .left .text-wrapper{
		width: 90%;
		position: absolute;
		top:48%;
		left:50%;
		transform:translate(-50%,-50%);
		text-align:center;
	}
	.lr-fr .split-leftfr .left .default-message{
		font-size: 5.0vw;
	}
	.lr-fr .split-leftfr .left .default-title{
		font-size: 4vw;
		margin:9vw 0 0 0;
		font-weight: 600;
	}
	.lr-fr .split-leftfr .left .default-line{
		background-color:black;
		width:20%;
		height: 4px;
		display:block;
		margin:5vw auto 6vw auto;
	}
	.lr-fr .split-leftfr .left .default-txt{
		font-size: 3.8vw;
	}
	.lr-fr .split-leftfr .left .default-txt1{
		margin:0 0 5vw 0;
	}
	.lr-fr .split-leftfr .left .default-txt2{
		margin:0 0 5vw 0;
	}
	.lr-fr .split-leftfr .left .default-txt3{
		margin:0 0 0 0;
	}
	.lr-fr .split-leftfr .split.left.black{
		display: none!important;
	}
	
	.split-rightfr .display-pc{
		display: none!important;
	}
	.split-rightfr .display-mb{
		display: block!important;
	}
	.split-rightfr{
		width: 100%;
		position: relative;
		z-index: 100;
	}
	.split-rightfr .img-fr{
		width: 100%!important;
		float:inherit!important;
		font-size:0;
	}
	.split-rightfr .profile-fr{
		width:100%;
	}
	.split-rightfr .profile-fr .inner{
		width:100%;
	}
	.split-rightfr .profile-fr .column{
		width:100%;
		font-size:0;
	}
	.split-rightfr .profile{
		width:100%;
		display:inline-block;
		cursor: pointer;
		background: url(../images/grad_bg.png) no-repeat;
		background-size: cover;
		position: relative;
		overflow: hidden;
		margin:0;
		padding:0;
	}
	.split-rightfr .profile .mobilebg{
		width: 100%;
		height: 200px;
		background-color: #000;
		position: absolute;
		left:0;
		bottom:-100%;
		z-index: 100;
		transition: 0.4s all;
	}
	.split-rightfr .profile .mobilebg.active{
		width: 100%;
		height: 200px;
		position: absolute;
		left:0;
		top:inherit!important;
		bottom:0%!important;
		z-index: 100;
		
	}
	.split-rightfr .profile .mobilebg .text-wrapper{
		text-align: center;
	}
	.split-rightfr .profile .mobilebg #message{
		color:#fff;
		display:block;
		margin-bottom: 2vw;
		font-size: 4.4vw;
		text-align: center;
	}
	.split-rightfr .profile .mobilebg #job-title{
		color:#fff;
		display:inline-block;
		font-size: 3.3vw;
	}
	.split-rightfr .profile .mobilebg #name{
		color:#fff;
		display:inline-block;
		padding-left:20px;
		font-size: 3.6vw;
	}
	.split-rightfr .profile .profilelinkfr{
		display: block;
	}
	.split-rightfr .profile .profilelink{
		display: inline-block;
		position: absolute;
		top:15px;
		right:-3vw;
		padding: 0 7vw 0.2vw 5vw;
		z-index: 55;
		font-size: 5vw;
		background-color: #000;
		border-radius: 6vw;
		color:#fff;
		transition: 0.3s all;
		border:solid 3px transparent;
	}
	.split-rightfr .profile::before{
		content:"";
		display:block;
		padding-top:100%;
		margin:0;
	}
	.split-rightfr .profile img{
		height: 100%;
		width:100%;
		position: absolute;
		top:0;
		left:0;
		transition: 1s;
		z-index:3;
	}
	.split-rightfr .profile img.back_img{
		opacity: 0;
		position: absolute;
		top:0;
		left:0;
		z-index: 1;
		transition:1s all;
	}
	.split-rightfr .profile.active img.back_img{
		opacity: 1;
	}
	
	html.mobile.yoko .lr-fr{
		width:100%;
		height:auto!important;
		position:relative;
		left:0;
		z-index: 50;
		font-size:0;
	}
	html.mobile.yoko .lr-fr .split-leftfr{
		height: auto!important;
	}
	html.mobile.yoko .lr-fr .split-leftfr .left{
		height: auto!important;
	}
	html.mobile.yoko .lr-fr .split-leftfr .left .text-wrapper{
		position: relative!important;
		padding: 80px 0 120px 0!important;
		transform:none!important;
		left:0;
		top:0;
		margin:0 auto;
	}
	html.mobile.yoko .split-rightfr .profile .mobilebg{
		width: 100%;
		min-height:200px;
	}
}


@media screen and (min-width: 641px) {
	html.pc{
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	html.pc body{
		width: 100%;
		height: 100%;
	}
	html.pc main{
		width: 100%;
		height: 100%;
	}
	html.pc .scrollbar_container{
		width: 100%;
		height: 100vh;
		overflow-x: hidden;
	}
	html.pc .scrollbar_hidden {
		display: block;
		height: 100vh;
		overflow-y: scroll;
	}
	html.pc .scrollbar_hidden {
		width: calc(100% + 17px);
	}
	html.pc.nonwin .scrollbar_hidden {
		padding-right:17px;
	}
	html.pc.win.chrome .scrollbar_hidden {
		padding-right:17px;
	}
	::-webkit-scrollbar {
		width: 0px;
	}
	
	main::after{
		clear: inherit!important;
	}
	.lr-fr{
		width:50%;
		height:calc(100% - 105px);
		position:fixed;
		left:0;
		z-index: 50;
		font-size:0;
	}
	.lr-fr .split-leftfr{
		width:100%;
		height:100%;
		position: absolute;
		top:0;
		left:0;
		display:inline-block;
		vertical-align:top;
		z-index: 55;
	}
	.lr-fr .split-leftfr .left{
		width:100%;
		height:100%;
		position: absolute;
		top:0;
		left:0;
		background: url(../images/leftbg-pc.jpg) no-repeat;
		background-size: cover;
		background-position: center center;
		left:0;
		font-size: 2vh;
		overflow: hidden;
		z-index:55;
	}
	.lr-fr .split-leftfr .left .text-wrapper{
		width: 90%;
		position: absolute;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
		text-align:center;
	}
	.lr-fr .split-leftfr .left .default-message{
		font-size: 2.0vw;
	}
	.lr-fr .split-leftfr .left .default-title{
		font-size: 1.5vw;
		margin:5vw 0 0 0;
		font-weight: 600;
	}
	.lr-fr .split-leftfr .left .default-line{
		background-color:black;
		width:20%;
		height: 4px;
		display:block;
		margin:2vw auto 2.5vw auto;
	}
	.lr-fr .split-leftfr .left .default-txt{
		font-size: 1.4vw;
	}
	.lr-fr .split-leftfr .left .default-txt1{
		margin:0 0 2.5vw 0;
	}
	.lr-fr .split-leftfr .left .default-txt2{
		margin:0 0 2.5vw 0;
	}
	.lr-fr .split-leftfr .left .default-txt3{
		margin:0 0 0 0;
	}
	.lr-fr .split-leftfr .left.black{
		width:100%;
		height:100%;
		position: absolute;
		top:0;
		left:0;
		background-image: none;
		background-color: #000;
		left:0;
		font-size: 2vh;
		overflow: hidden;
		z-index:56;
		opacity: 0;
		transition: 0.4s all;
	}
	.lr-fr .split-leftfr .left.black.active{
		opacity: 1;
	}
	.lr-fr .split-leftfr .left.active #message{
		color:#fff;
		display:block;
		margin-bottom: 5vw;
		font-size: 2.4vw;
	}
	.lr-fr .split-leftfr .left.active #job-title{
		color:#fff;
		display:inline-block;
		font-size: 1.8vw;
	}
	.lr-fr .split-leftfr .left.active #name{
		color:#fff;
		display:inline-block;
		padding-left:20px;
		font-size: 2.1vw;
	}
	.lr-fr .split-leftfr .left.active .line{
		background-color:black;
		width:112px;
		height: 5px;
		display:block;
		margin:0 auto;
	}
	.lr-fr .split-leftfr .left.active .ml13 {
	}
	.lr-fr .split-leftfr .left.active .ml13 .letter {
	  display: inline-block;
	  line-height: 1em;
	}
	/* textanimation */
	.lr-fr .split-leftfr .left.active .ml13 .brdiv{
		width: 100%;
		height: 2vh;
	}

	
	.split-rightfr .display-pc{
		display: block;
	}
	.split-rightfr .display-mb{
		display: none;
	}
	.split-rightfr{
		width: 100%;
		position: relative;
		z-index: 100;
	}
	.split-rightfr .img-fr{
		width: 50%!important;
		float: right;
		font-size:0;
	}
	.split-rightfr .profile-fr{
		width:100%;
	}
	.split-rightfr .profile-fr .inner{
		width:100%;
	}
	.split-rightfr .profile-fr .column{
		width:100%;
		font-size:0;
	}
	.split-rightfr .profile{
		width:50%;
		display:inline-block;
		cursor: pointer;
		background: url(../images/grad_bg.png) no-repeat;
		background-size: cover;
		position: relative;
		overflow: hidden;
		margin:0;
		padding:0;
	}
	.split-rightfr .profile::before{
		content:"";
		display:block;
		padding-top:100%;
		margin:0;
	}
	.split-rightfr .profile .profilelinkfr{
		display: block;
	}
	.split-rightfr .profile .profilelink{
		display: inline-block;
		position: absolute;
		top:10px;
		right:-10vw;
		padding: 0.2vw 1.8vw 0.3vw 1.3vw;
		z-index: 55;
		font-size: 1.3vw;
		background-color: #000;
		border-radius: 2vw;
		color:#fff;
		transition: 0.3s all;
	}
	.split-rightfr .profile:hover .profilelink{
		right:-1vw;
		background-color: #000;
		color:#fff;
	}
	.split-rightfr .profile img{
		height: 100%;
		width:100%;
		position: absolute;
		top:0;
		left:0;
		transition: 1s;
		z-index:3;
	}
	.split-rightfr img.back_img{
		opacity: 0;
		position: absolute;
		top:0;
		left:0;
		z-index: 1;
	}
	.split-rightfr .profile:hover img.back_img{
		opacity: 1;
	}
	.active{
		background: black;
		font-size: 2vh;
		overflow: hidden;
		opacity:1;
		position: absolute;
		top:0;
		left:0;
		z-index:1;
	}
	
	
	html.tablet.tate .text-wrapper{
		font-size: 1.5vh;
		width: 90%;
		position: absolute;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
		text-align:center;
	}
	html.tablet.tate .default-message{
		width:100%;
		font-size: 2vh;
	}
	
	html.tablet main::after{
		clear: inherit!important;
		content:""!important;
	}
	html.tablet .lr-fr{
		width:100%;
		height:calc(100vh - 165px);
		position:relative;
		left:0;
		z-index: 50;
		font-size:0;
	}
	html.tablet .lr-fr .split-leftfr{
		width:100%;
		height:100%;
		position:relative;
		top:0;
		left:0;
		display:inline-block;
		vertical-align:top;
		z-index: 55;
	}
	html.tablet .lr-fr .split-leftfr .left{
		width:100%;
		height:100%;
		position:relative;
		top:0;
		left:0;
		background: url(../images/leftbg-pc.jpg) no-repeat;
		background-size: cover;
		background-position: center center;
		font-size: 2vh;
		overflow: hidden;
		z-index:55;
	}
	html.tablet .lr-fr .split-leftfr .left .text-wrapper{
		width: 90%;
		position: absolute;
		top:49%;
		left:50%;
		transform:translate(-50%,-50%);
		text-align:center;
	}
	html.tablet .lr-fr .split-leftfr .left .default-message{
		font-size: 4.0vw;
	}
	html.tablet .lr-fr .split-leftfr .left .default-title{
		font-size: 3vw;
		margin:5vw 0 0 0;
		font-weight: 600;
	}
	html.tablet .lr-fr .split-leftfr .left .default-line{
		background-color:black;
		width:20%;
		height: 4px;
		display:block;
		margin:4vw auto 5vw auto;
	}
	html.tablet .lr-fr .split-leftfr .left .default-txt{
		font-size: 2.8vw;
	}
	html.tablet .lr-fr .split-leftfr .left .default-txt1{
		margin:0 0 5vw 0;
	}
	html.tablet .lr-fr .split-leftfr .left .default-txt2{
		margin:0 0 5vw 0;
	}
	html.tablet .lr-fr .split-leftfr .left .default-txt3{
		margin:0 0 0 0;
	}
	html.tablet .lr-fr .split-leftfr .left.black{
		width:100%;
		height:100%;
		position: absolute;
		top:0;
		left:0;
		background-image: none;
		background-color: #000;
		font-size: 2vh;
		overflow: hidden;
		z-index:56;
		opacity: 0;
		transition: 0.4s all;
		display: none!important;
	}
	html.tablet .lr-fr .split-leftfr .left.black.active{
		opacity: 1;
	}
	html.tablet .lr-fr .split-leftfr .left.active #message{
		color:#fff;
		display:block;
		margin-bottom: 5vw;
		font-size: 2.4vw;
	}
	html.tablet .lr-fr .split-leftfr .left.active #job-title{
		color:#fff;
		display:inline-block;
		font-size: 1.8vw;
	}
	html.tablet .lr-fr .split-leftfr .left.active #name{
		color:#fff;
		display:inline-block;
		padding-left:20px;
		font-size: 2.1vw;
	}
	html.tablet .lr-fr .split-leftfr .left.active .line{
		background-color:black;
		width:112px;
		height: 5px;
		display:block;
		margin:0 auto;
	}
	html.tablet .lr-fr .split-leftfr .left.active .ml13 {
	}
	html.tablet .lr-fr .split-leftfr .left.active .ml13 .letter {
	  display: inline-block;
	  line-height: 1em;
	}
	/* textanimation */
	html.tablet .lr-fr .split-leftfr .left.active .ml13 .brdiv{
		width: 100%;
		height: 2vh;
	}

	
	html.tablet .split-rightfr .display-pc{
		display: none!important;
	}
	html.tablet .split-rightfr .display-mb{
		display: block!important;
	}
	html.tablet .split-rightfr{
		width: 100%;
		position: relative;
		z-index: 100;
	}
	html.tablet .split-rightfr .img-fr{
		width: 100%!important;
		float:inherit!important;
		font-size:0;
	}
	html.tablet .split-rightfr .profile-fr{
		width:100%;
	}
	html.tablet .split-rightfr .profile-fr .inner{
		width:100%;
	}
	html.tablet .split-rightfr .profile-fr .column{
		width:100%;
		font-size:0;
	}
	html.tablet .split-rightfr .profile{
		width:50%;
		display:inline-block;
		cursor: pointer;
		background: url(../images/grad_bg.png) no-repeat;
		background-size: cover;
		position: relative;
		overflow: hidden;
		margin:0;
		padding:0;
	}
	html.tablet .split-rightfr .profile .mobilebg{
		width: 100%;
		height: 200px;
		background-color: #000;
		position: absolute;
		left:0;
		bottom:-100%;
		z-index: 100;
		transition: 0.4s all;
	}
	html.tablet .split-rightfr .profile .mobilebg.active{
		width: 100%;
		height: 200px;
		position: absolute;
		left:0;
		top:inherit!important;
		bottom:0%!important;
		z-index: 100;
		
	}
	html.tablet .split-rightfr .profile .mobilebg .text-wrapper{
		text-align: center;
	}
	html.tablet .split-rightfr .profile .mobilebg #message{
		color:#fff;
		display:block;
		margin-bottom: 2vw;
		font-size: 2.4vw;
		text-align: center;
	}
	html.tablet .split-rightfr .profile .mobilebg #job-title{
		color:#fff;
		display:inline-block;
		font-size: 1.8vw;
	}
	html.tablet .split-rightfr .profile .mobilebg #name{
		color:#fff;
		display:inline-block;
		padding-left:20px;
		font-size: 2.1vw;
	}
	html.tablet .split-rightfr .profile::before{
		content:"";
		display:block;
		padding-top:100%;
		margin:0;
	}
	html.tablet .split-rightfr .profile img{
		height: 100%;
		width:100%;
		position: absolute;
		top:0;
		left:0;
		transition: 1s;
		z-index:3;
	}
	html.tablet .split-rightfr img.back_img{
		opacity: 0;
		position: absolute;
		top:0;
		left:0;
		z-index: 1;
	}
	html.tablet .split-rightfr .profile:hover img.back_img{
		opacity: 1;
	}
	
	html.tablet.yoko .lr-fr{
		width:100%;
		height:auto!important;
		position:relative;
		left:0;
		z-index: 50;
		font-size:0;
	}
	html.tablet.yoko .lr-fr .split-leftfr{
		height: auto!important;
	}
	html.tablet.yoko .lr-fr .split-leftfr .left{
		height: auto!important;
	}
	html.tablet.yoko .lr-fr .split-leftfr .left .text-wrapper{
		position: relative!important;
		padding: 80px 0 120px 0!important;
		transform:none!important;
		left:0;
		top:0;
		margin:0 auto;
	}
	html.tablet.yoko .split-rightfr .profile .mobilebg{
		width: 100%;
		height: initial!important;
	}
}
@media screen and (min-width: 1300px) {
	.lr-fr .split-leftfr .left .default-message{
		font-size: 26px;
	}
	.lr-fr .split-leftfr .left .default-title{
		font-size:22px;
		margin:70px 0 0 0;
		font-weight: 600;
	}
	.lr-fr .split-leftfr .left .default-line{
		background-color:black;
		width:20%;
		height: 4px;
		display:block;
		margin:20px auto 25px auto;
	}
	.lr-fr .split-leftfr .left .default-txt{
		font-size: 18px;
	}
	.lr-fr .split-leftfr .left .default-txt1{
		margin:0 0 25px 0;
	}
	.lr-fr .split-leftfr .left .default-txt2{
		margin:0 0 25px 0;
	}
	.lr-fr .split-leftfr .left .default-txt3{
		margin:0 0 0 0;
	}
	
	.lr-fr .split-leftfr .left.active #message{
		color:#fff;
		display:block;
		font-size: 30px;
		margin-bottom:50px;
	}
	.lr-fr .split-leftfr .left.active #job-title{
		color:#fff;
		display:inline-block;
		font-size: 18px;
	}
	.lr-fr .split-leftfr .left.active #name{
		color:#fff;
		display:inline-block;
		padding-left:20px;
		font-size:24px;
	}
	.split-rightfr .profile .profilelink{
		font-size: 18px;
	}
}