@charset "UTF-8";
/* CSS Document */
.member_catch {
	color: #fff;
}
.sub_vg .member_catch .js-scroll {
	mix-blend-mode: unset;
}
.member_catch dl {
	width: 40%;
}
.member_catch dl dt {
	font-size: 36px;
	font-weight: 600;
	letter-spacing: 0.1em;
}
.member_catch dl dt p{
	text-shadow: rgba(0,0,0,0.7) 0px 0px 5px, rgba(0,0,0,0.7) 0px 0px 5px;;
}
.member_catch dl dd p {
	text-shadow: rgba(0,0,0,0.7) 0px 0px 5px,
	rgba(0,0,0,0.7) 0px 0px 5px;
}
.member_catch dl dd {
	letter-spacing: 0.1em;
	line-height: 1.5;
}
.member_catch .motion-txt {
	text-align: left;
}
.member_catch dl .js-scroll {
	 width: 30%;
    left: 15%;
}
.member_catch dl .js-scroll:nth-child(1){
	top: 40%;
}
.member_catch dl .js-scroll:nth-child(2){
	top: 55%;
	font-weight: 600;
}
.member_catch dl .js-scroll:nth-child(3){
	top: 65%;
}
.member_area .sub_vg {
	height: 60vh;
}
.member {
	position: relative;
}
.member .text_box {
	text-align: center;
}
.member_area .font_l{
	font-family: Oswald;
    color: rgba(50, 138, 190, 1);
    font-size: 7em;
    font-weight: bold;
	position: relative;
    width: 100%;
}
.member .font_l {
	margin-bottom: 5%;
}
.sp_try_scratch,
.pc_try_scratch{
	padding: 2% 0;
}
.sp_try_scratch {
	display: none;
}
.sp_try_scratch span,
.pc_try_scratch span{
	display: inline-block;
    width: 60px;
    vertical-align: middle;
    margin-bottom: 3px;
    height: 16px;
	background:rgba(0,0,0,.6);
}
.red_box {
	background-color: rgba(255, 255, 255, 0.6);
	padding: 3%;
	position: relative;
	margin: 15% 0 5%;
}
.red_box .font_l {
	position: absolute;
    top: -90px;
    left: 0;
	text-align: center;
}
.red_box .br1,
.red_box .br2,
.red_box .br3,
.red_box .br4,
.red_box .br5{
	background-color: #e30606;
	position: absolute;
}
.red_box .text_01 {
	padding: 3% 0;
	text-align: left;
}
.br1{
	top: 0;
	right: 70%;
	height: 3px;
	width: 0;
	
}
.br2{
	top: 0;
	left: 0;
	width: 3px;
	height: 0;
	
}
.br3{
	bottom: 0;
	left: 0;
	height: 3px;
	width: 0;
}
.br4 {
	right: 0;
	bottom: 0;
	width: 3px;
	height: 0;
}
.br5 {
	right: 0;
	top: 0;
	height: 3px;
	width: 0;
}
.line_w .br1 {
	animation: width30 .2s linear 0s 1 normal forwards;
}
.line_w .br2 {
	animation: height100 .2s linear .2s normal forwards;
}
.line_w .br3 {
	animation: width100 .2s linear .4s normal forwards;
}
.line_w .br4 {
	animation: height100 .2s linear .6s normal forwards;
}
.line_w .br5 {
	animation: width30 .2s linear .8s normal forwards;
}
.question {
	position: relative;
	margin: 8% 0;
}
.question dl {
	width: 60%;
	text-align: left;
	background:#fff;
}
.question dl dt {
	font-weight: 600;
	padding: 3% 0 3%;
	font-size: 18px;
	line-height: 1.5;
	border-bottom: 3px solid #e30606;
	text-align: left;
}
.question dl dd {
	text-align: left;
}
.question:nth-child(odd) dl .js-scroll:nth-child(2) {
	font-weight: 600;
	padding: 3% 0;
}
.question:nth-child(odd) dl .js-scroll:nth-child(3) {
	line-height: 1.5;
	padding: 3% 10% 3% 0;
}
.question:nth-child(even) dl .js-scroll:nth-child(2) {
	font-weight: 600;
	padding: 3% 0 3% 10%;
}
.question:nth-child(even) dl .js-scroll:nth-child(3) {
	line-height: 1.5;
	padding: 3% 0 3% 10%;
}
.question:nth-child(even) dl dt {
	padding: 3% 0 3% 10%;
}
.questions .question:nth-child(odd) dl,
.questions .question:nth-child(even) .trim_q{
	float: left;
}
.questions .question:nth-child(even) dl,
.questions .question:nth-child(odd) .trim_q{
	float: right;
}
.questions .motion-inner{
    /*display: block!important;*/
    width: 100%;
}
.motion-txt {
    width: 100%;
}
.questions .question:nth-child(odd) .blue_line {
	content: '';
    position: absolute;
    height: 3px;
    width: 0;
    transform: rotate(-45deg);
    background: rgba(50, 138, 190, .6);
    -webkit-transition: width .2s;
    -o-transition: width .2s;
    transition: width .2s;
    z-index: -1;
    top: -65px;
    right: -100px;
    -webkit-transform-origin: right top;
    -ms-transform-origin: right top;
    transform-origin: right top;
}
.questions .question:nth-child(even) .blue_line,
.dayoff .blue_line{
	content: '';
    position: absolute;
    height: 3px;
    width: 0;
    transform: rotate(45deg);
    background: rgba(50, 138, 190, .6);
    -webkit-transition: width .2s;
    -o-transition: width .2s;
    transition: width .2s;
    z-index: -2;
    top: -65px;
    left: -100px;
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
}
.trim_q {
	padding-top: 5%;
	width: 40%;
	position: relative;
}
.trim_q img{
	object-fit: cover;
}
.message_mem {
	position: relative;
}
.message_mem .inner {
	position: relative;
    top: -20%;
    height: 270px;
}
.message_mem .red_box {
	position: absolute;
	top: -210px;
	text-align: center;
}
.message_mem .red_box .text_02 {
	padding-top: 5%;
}
.message_mem .red_box .text_01 {
	padding: 2% 0;
}
.message_mem .red_box h2{
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 0.1em;
	padding: 20px;
	border-bottom: 3px solid #000;
	display: inline-block;
}
.message_mem .red_box .br1,
.message_mem .red_box .br3,
.message_mem .red_box .br5{
	height: 4px;
}
.message_mem .red_box .br2,
.message_mem .red_box .br4{
	width: 4px;
} 
.message_mem .red_square {
	z-index: 2;
	bottom: -190%;
    left: -12%;
	position: absolute;
}
.dayoff {
	margin-top: 5%;
	position: relative;
}
.dayoff .blue_square {
	right: 0;
    bottom: -10%;
    position: absolute;
}
.dayoff .blue_line {
	top: -92%;
}
.dayoff .inner {
	position: relative;
}
.trim_05 {
	position: absolute;
	left: 0;
	top: -20%;
	width: 50%;
	height: 312px;
}
.blue_box {
	background-color: rgba(255, 255, 255, .6);
	padding: 3% 5% 1%;
	width: 45%;
	position: relative;
	margin: 15% 0 5% auto;
	z-index: -2;
}
.blue_box .font_l {
	position: absolute;
    top: -90px;
    left: 0;
	text-align: center;
}
.blue_box .br1,
.blue_box .br2,
.blue_box .br3,
.blue_box .br4,
.blue_box .br5{
	background-color: rgba(50, 138, 190, .8);
	position: absolute;
}
.blue_box h2{
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	padding: 10px 160px;
	background-color: rgb(50, 138, 190);
}

.blue_box .js-scroll:nth-child(2) {
	text-align: center;
}
.blue_box .js-scroll:nth-child(3),
.blue_box .js-scroll:nth-child(4){
	margin: 3%;
}
.blue_box .js-scroll:nth-child(4){
	width: 105%;
}
.blue_box .text_01 {
	padding: 3% 0;
	text-align: left;
}
.blue_box .text_02 {
	border-bottom: 2px solid #e30606;
	display: inline;
}
.dayoff .blue_box .br1,
.dayoff .blue_box .br3,
.dayoff .blue_box .br5{
	height: 4px;
}
.dayoff .blue_box .br2,
.dayoff .blue_box .br4{
	width: 4px;
} 

#wScratchPad_670{
	display: inline-block;
	position: relative;
	width: 670px;
	height: 70px;
	cursor: url("../../../img/recruit_common/coin.svg"),url("../../../img/recruit_common/coin.png"),url("../../../img/recruit_common/coin.cur"),pointer!important;
}
#wScratchPad_670 p {
	font-weight: 600;
	font-size: 30px;
	padding-top: 18px;
	letter-spacing: 0.1em;
	text-align: center;
	position: relative;
}
#wScratchPad_670 p.disable-select::before {
	content:'';
	-webkit-transition: width 1s linear;
    -o-transition: width 1s linear;
    transition: width 1s linear;
	width: 1%;
	position: absolute;
	left: -40vw;
    top: 65%;
    display: inline-block;
    height: 3px;
    background-color: #000;
}
#wScratchPad_670 p.disable-select.line_w::before {
	width: 40vw;
	overflow: visible;
}
#wScratchPad_670 img{
	z-index: -3;
	top: 0;
}
canvas {
	top: 0;
	left: 0;
}
.interview {
	margin: 10% 0 5%;
}
.interview .font_l {
	text-align: center;
	top: -12%;
    position: absolute;
}
.interview .ttl_02 {
	padding: 6% 0 3%!important;
}
.interview .greybox {
    width: 85%;
    left: 50%;
    -webkit-transform: translate(-50%,0%);
    -moz-transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%);
    -o-transform: translate(-50%,0%);
    transform: translate(-50%,0%);
}
.interview .line_red {
	width: 1%;
	position: absolute;
	right: 0;
}
.interview .line_red.line_w {
	width: 80%;
}
.interview .slider {
	padding: 2% 0;
}
.interview .slick-slide {
	transition: .5s ease;
  	transform: scale(0.9);
	margin: 0!important;
}
.interview .slick-current {
	transform: scale(1);
}
.interview .slick-current li {
	box-shadow: none!important; 
}
.interview .slider .slick-dots, .interview .slider button{
	display: block!important;
	margin: 0 auto;
	bottom: 0;
}
@media screen and (max-width:1024px) {
	.member_area .font_l {
		font-size: 6em;
		margin-bottom: 4%;
	}
	.member_area .sub_vg {
		height: 50vh;
	}
	.member_catch dl dt {
		font-size: 34px;
	}
	.member_catch dl .js-scroll:nth-child(2) {
		font-size: 15px;
	}
	.member_catch dl .js-scroll:nth-child(3) {
		top: 68%;
	}
	.hidden_area {
		padding-top: 0%;
	}
	#wScratchPad_670 {
		width: 594px;
		height: 62px;
	}
	#wScratchPad_670 p {
		font-size: 26px;
	}
	.question {
		margin: 5% 0;
	}
	.question dl dt {
		font-size: 16px;
	}
	.question dl dd {
		font-size: 14px;
	}
	.question:nth-child(odd) dl .js-scroll:nth-child(2) {
		 padding: 2% 0;
	}
	.question:nth-child(odd) dl .js-scroll:nth-child(3) {
		padding: 1% 10% 3% 0;
	}
	.question:nth-child(even) dl .js-scroll:nth-child(2) {
		padding: 2% 0 2% 10%;
	}
	.question:nth-child(even) dl .js-scroll:nth-child(3) {
		padding: 1% 0 3% 10%;
	}
	.red_box .font_l {
		top: -75px;
	}
	.message_mem .red_box h2{
		font-size: 16px;
		top: -200px;
	}
	.blue_box {
		margin: 7% 0 5% auto;
	}
	.blue_box h2 {
		padding: 10px 128px;
	}
}
@media screen and (max-width:900px) {
	.member_area .font_l {
		font-size: 5em;
	}
	#wScratchPad_670 p {
		font-size: 24px;
		padding-top: 14px;
	}
	.member .btnarea {
		margin: 2rem auto 2rem;
	}
	.member .red_box {
		margin: 12% 0 5%;
		padding: 3% 3% 2%;
	}
	.red_box .font_l {
		top: -62px;
	}
	.question {
		margin: 4% 0;
	}
	.question dl {
		width: 55%;
	}
	.question dl dt {
		font-size: 14px;
		padding: 3% 36% 3% 0;
	}
	.question:nth-child(even) dl dt {
		padding: 3% 26% 3% 0%;
	}
	.red_square, .blue_square {
		width: 100px;
		height: 100px;
	}
	.dayoff .blue_square {
		right: -5%;
		bottom: -50%;
	}
	.blue_box {
		margin: 5% 0 5% auto;
	}
	.blue_box .font_l {
		top: -65px;
	}
	.blue_box h2 {
		padding: 10px 106px;
		font-size: 16px;
	}
	.blue_box .js-scroll:nth-child(3) {
		padding-right: 26%;
	}
	#wScratchPad_670_670 {
		width: 540px;
		height: 56px;
	}
	
}
@media screen and (max-width:768px) {
	.member_catch dl dt {
		font-size: 30px;
	}
	.message_mem .red_box h2{
		font-size: 14px;
	}
	.member_catch dl .js-scroll:nth-child(2){
		font-size: 14px;
		top: 60%;
	}
	.member_catch dl .js-scroll:nth-child(3) {
		top: 74%;
		font-size: 14px;
	}
	.pc_try_scratch {
		display: none;
	}
	.sp_try_scratch {
		display: block;
	}
	#wScratchPad_670 {
		width: 460px;
		height: 48px;
	}
	#wScratchPad_670 p {
		font-size: 20px;
	}
	.member_area .sub_vg {
		height: 40vh;
	}
	.member_area .font_l {
		font-size: 4em;
	}
	.question dl dd {
		font-size: 12px;
	}
	.trim_q {
		width: 45%;
	}
	.red_square, .blue_square {
		width: 80px;
		height: 80px;
	}
	.question {
		margin: 2% 0;
	}
	.question dl dt {
		font-size: 12px;
		padding: 3% 22% 3% 0;
	}
	.question:nth-child(even) dl dt {
		padding: 3% 12% 3% 0%;
	}
	.message_mem .red_box {
		margin: 15% 8% 5%;
		top: -140px;
	}
	.red_box .font_l {
		top: -44px;
	}
	.message_mem .red_box .text_02 {
		padding-top: 4%;
	}
	.message_mem .red_box .text_01 {
		padding: 1% 0;
	}
	.dayoff {
		margin-top: 10%;
	}
	.trim_05 {
		height: 240px;
	}
	.blue_box h2 {
		padding: 8px 98px;
		font-size: 14px;
	}
	.interview .font_l {
		top: -8%;
	}
}
@media screen and (max-width:500px) {
	.member_area .sub_vg {
		height: 35vh;
	}
	.member_catch dl .js-scroll {
		width: 45%;
	}
	.member_catch dl dt {
		font-size: 20px;
	}
	.member_catch dl .js-scroll:nth-child(1) p{
		font-size: 16px;
		top: 43%;
	}
	.member_catch dl .js-scroll:nth-child(2){
		font-size: 11px;
		top: 53%;
	}
	.message_mem .red_box h2{
		font-size: 11px;
	}
	.member_catch dl .js-scroll:nth-child(3) {
		top: 65%;
		font-size: 11px;
	}
	.member_area .font_l {
		font-size: 2em;
	}
	#wScratchPad_670 p.disable-select::before {
		height: 2px;
	}
	#wScratchPad_670 {
		width: 320px;
		height: 33px;
	}
	#wScratchPad_670 p {
		font-size: 14px;
		padding-top: 9px;
	}
	.red_square, .blue_square {
		width: 60px;
		height: 60px;
	}
	.member .btnarea {
		margin: 1rem auto 1rem;
	}
	.scratch_btn {
		width: 75px;
	}
	.red_box .font_l {
		top: -26px;
	}
	.member .red_box {
		margin: 12% 0 8%;
	}
	.trim_03 {
		height: 180px;
	}
	.trim_q {
		width: 80%;
	}
	.questions .question:nth-child(even) .trim_q {
		margin-left: 6%;
	}
	.questions .question:nth-child(odd) .trim_q {
		margin-right: 6%;
	}
	.question dl {
		width: 90%;
	}
	.question dl dt {
		border-bottom: 2px solid #e30606;
	}
	.br1,
	.br3,
	.br5,
	.message_mem .red_box .br1,
	.message_mem .red_box .br3,
	.message_mem .red_box .br5,
	.dayoff .blue_box .br1,
	.dayoff .blue_box .br3,
	.dayoff .blue_box .br5{
	height: 2px;
	}
	.br2,
	.br4,
	.message_mem .red_box .br2,
	.message_mem .red_box .br4,
	.dayoff .blue_box .br2,
	.dayoff .blue_box .br4{
	width: 2px;
	}
	.message_mem .red_box {
		margin: 15% 6% 5%;
	}
	.message_mem .red_box h2 {
		padding: 10px;
	}
	.message_mem .red_box .text_01 {
    	padding: 1% 0 2%;
		line-height: 1.6;
	}
	.dayoff {
		margin-top: 20%;
	}
	.trim_05 {
		height: 180px;
		width: 85%;
		top: -26%;
	}
	.blue_box{
		z-index: 2;
		width: 85%;
		padding: 7% 5% 1%;
	}
	.blue_box .font_l {
		top: -12px;
	}
	.blue_box .js-scroll:nth-child(4) {
		width: 99%;
	}
	.interview .font_l {
		top: -6%;
	}
	.interview .btnarea {
		margin: 2rem auto 2rem;
	}
}
	@media screen and (max-width:360px) {
	#wScratchPad_670 {
		width: 280px;
		height: 29px;
	}
	#wScratchPad_670 p {
		font-size: 12px;
	}
	.member_catch dl .js-scroll {
		width: 70%;
	}
	.member_catch dl .js-scroll:nth-child(1) {
		top: 34%;
	}
	.member_catch dl .js-scroll:nth-child(2) {
		top: 50%;
	}
	.dayoff {
		margin-top: 40%;
	}	
}
@media all and (-ms-high-contrast: none){
	.question dl dd,
	.member_catch dl .js-scroll:nth-child(1) p,
	.blue_box .text_02{
		line-height: 2;
	}
	.sub_imgBox img{
		background-position-y:top!important;
	}
}