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

/* 共通 */

body{
	background-color: #fff;
}

.inner{
	max-width: 906px;
	margin: 0 auto;
}

#contentsBlock{
	font-size: 1.8rem;
	font-weight: 700;
	color: #0B2364;
}

section p{
	text-align: left;
}

#pagetop a{
	color: #0B2364;
}

#pagetop a:before,
#pagetop a:after{
	background: #0B2364;
}

.link_area ul li a{
	font-size: 2.0rem;
}

.bg01,.bg02,.bg03{
	position: relative;
	z-index: 5;
}

.bg01:before,
.bg02:before,
.bg02:after,
.bg03:before{
	content: "";
	position: absolute;
	right: 0;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: -1;
}

.bg01:before{
	top: 0;
	width: 69.5%;
	aspect-ratio: 1 / 0.3684;
	background-image: url("/recruit/img/bg_recruit01_pc.png");
}

.bg02:before{
	top: 0;
	width: 100%;
	aspect-ratio: 1 / 0.203;
	background-image: url("/recruit/img/bg_recruit02_pc.png");
}

.bg02:after{
	bottom: -1px;
	width: 100%;
	aspect-ratio: 1 / 0.2555;
	background-image: url("/recruit/img/bg_recruit03_pc.png");
}

.bg03:before{
	top: 0;
	width: 100%;
	aspect-ratio: 1 / 0.1325;
	background-image: url("/recruit/img/bg_recruit04_pc.png");
}

.sample {
	overflow:hidden;
	box-shadow:0 4px 20px rgba(0, 0, 0, 0.2);
	margin:0 auto;
	width:300px;
	height:300px;
	background-color:#fff;
}

	.sample svg use {
		fill:#3168dd;
		animation:wave linear 4s infinite;
	}

	.sample svg use:nth-of-type(2),
	.sample svg use:nth-of-type(3) {
		opacity:0.2;
	}

	.sample svg use:nth-of-type(2) {
		animation-duration:5s;
	}

	.sample svg use:nth-of-type(3) {
		animation-duration:3s;
	}

@keyframes wave {
	from {
		transform:translate(0);
	}
	to {
		transform:translate(-50%);
	}
}

@media screen and (max-width: 767px){
	.contents {
    	padding: 0 20px;
	}
	
	.bg01:before{
		background-image: url("/recruit/img/bg_recruit01_sp.png");
		aspect-ratio: 1 / 0.3944;
		width: 94.5%;
	}
	
	.bg02:before{
		background-image: url("/recruit/img/bg_recruit02_sp.png");
		aspect-ratio: 1 / 0.333;
	}
	
	.bg02:after{
		background-image: url("/recruit/img/bg_recruit03_sp.png");
		aspect-ratio: 1 / 0.384;
	}
	
	.bg03:before{
		background-image: url("/recruit/img/bg_recruit04_sp.png");
		aspect-ratio: 1 / 0.182;
	}
}

/* recruitingMessage */

#recruitingMessage{
	position: relative;
	padding: 110px 0 43px;
}

#recruitingMessage figure.rellax {
	position: absolute;
}

#recruitingMessage figure.rellax img{;
	box-shadow: 5px 10px 20px 0px rgba(11, 35, 100,0.4);
    border-radius: 16px;
}

#recruitingMessage figure.rellax.img01{
	width: 17.6%;
    top: 44px;
    right: 12.6%;
}

#recruitingMessage figure.rellax.img02{
	width: 17.6%;
    top: 343px;
    left: 53px;
}

#recruitingMessage figure.rellax.img03{
	width: 17.6%;
	top: 512px;
    right: 24px;
}

#recruitingMessage figure.rellax.img04{
	width: 22%;
    bottom: 390px;
    left: 12.7%;
}

#recruitingMessage figure.rellax.img05{
	width: 12%;
    bottom: 210px;
    right: 13.5%;
}

#recruitingMessage .hd02-02{
	font-family: 'Zen Kaku Gothic New', sans-serif;
    font-style: normal;
    font-weight: 900;
    font-size: 4.8rem;
    letter-spacing: 0.05em;
    line-height: 1.46;
}

#recruitingMessage .hd02-02 span{
	font-family: 'Crete Round', serif;
	font-weight: 400;
	font-style: italic;
	padding-left: 8px;
}

#recruitingMessage .message_area{
	max-width: 366px;
    width: 100%;
    margin: 38px 0 0 42.2%;
}

#recruitingMessage .message_area p{
	line-height: 3.1;
    letter-spacing: 0.05em;
}

#recruitingMessage .message_area p:not(:first-of-type){
	margin-top: 57px;
}

#recruitingMessage .btn_wrap{
	max-width: 980px;
    width: 100%;
    margin: 187px auto 0;
}

#recruitingMessage .btn_wrap ul{
	display: flex;
	justify-content: space-between;
}

#recruitingMessage .btn_wrap ul li{
	width: 30.5%;
}

@media screen and (max-width: 767px){
	#recruitingMessage{
		padding: 180px 0 102px;
	}
	
	#recruitingMessage > figure.rellax.img01 {
		width: 21%;
		top: 18px;
		right: 18%;
	}
	
	#recruitingMessage > figure.rellax.img02 {
		width: 21%;
    	top: 405px;
		left: 9px;
	}
	
	#recruitingMessage > figure.rellax.img03 {
		width: 26%;
		top: 508px;
		right: 15px;
	}
	
	#recruitingMessage > figure.rellax.img04 {
		width: 26%;
		bottom: 541px;
		left: 2.7%;
	}
	
	#recruitingMessage > figure.rellax.img05 {
		width: 21.5%;
    	bottom: 469px;
		right: 3.5%;
	}
	
	#recruitingMessage> figure.rellax img{
		border-radius: 8px;
		box-shadow: 4px 6px 10px 0px rgba(11, 35, 100,0.4);
	}
	
	#recruitingMessage .hd02-02{
		font-size: 9.6vw;
	}
	
	#recruitingMessage .hd02-02 span{
		padding-left: 6px;
	}
	
	#recruitingMessage .message_area{
		margin: 293px auto 0;
	}
	
	#recruitingMessage .btn_wrap ul{
		flex-direction: column;
	}
	
	#recruitingMessage .btn_wrap{
		margin: 337px auto 0;
		padding: 0 18px;
	}
	
	#recruitingMessage .btn_wrap ul li{
		width: 100%;
	}
	
	#recruitingMessage .btn_wrap ul li:not(:first-of-type){
		margin-top: 23px;
	}
}

@media screen and (max-width: 540px){
	#recruitingMessage > figure.rellax.img01 {
		width: 32%;
	}
	
	#recruitingMessage > figure.rellax.img02 {
		width: 32%;
		top: 348px;
	}
	
	#recruitingMessage > figure.rellax.img03 {
		width: 32%;
		top: 476px;
	}
	
	#recruitingMessage > figure.rellax.img04 {
		width: 40%;
	}
	
	#recruitingMessage > figure.rellax.img05 {
		width: 21.5%;
	}
}

/* topMessage */

#topMessage{
	background-color: #D5E3FF;
	padding: 264px 0 359px;
	overflow: hidden;
}

#topMessage .hd02-02{
	width: 56.3%;
    margin: 0 0 0 auto;
}

#topMessage .flex{
	justify-content: space-between;
}

#topMessage .flex .box01{
	width: 38%;
    margin: 36px 0 0 -21px;
}

#topMessage .flex .box02{
	width: 39%;
    margin-left: 4%;
}

#topMessage .flex .box03{
	display: flex;
	align-items: flex-end;
	width: 15%;
	margin: 0 -15px -35px 0;
}

#topMessage .flex .box01 figure img,
#topMessage .flex .box03 figure img{
	box-shadow: 5px 10px 20px 0px rgba(11, 35, 100,0.4);
    border-radius: 50%;
}

#topMessage .message_area{
	margin-top: 65px;
}

#topMessage .message_area p{
	line-height: 3.1;
}

#topMessage .message_area p:not(:first-of-type){
	margin-top: 57px;
}

@media screen and (max-width: 767px){
	#topMessage {
		padding: 195px 0 234px;
	}
	
	#topMessage .hd02-02{
		width: auto;
		margin: 0;
		padding: 0 10px;
	}
	
	#topMessage .flex{
		flex-direction: column;
	}
	
	#topMessage .flex .box01 {
		width: 69.5%;
		margin: 64px 0 0 -3px;
	}
	
	#topMessage .flex .box02 {
		width: 100%;
		margin: 49px 0 0;
		padding: 0 10px;
	}
	
	#topMessage .flex .box03{
		width: 43%;
		margin: 53px 26px 0px auto;
	}
	
	#topMessage .message_area {
		margin-top: 20px;
	}
	
	#topMessage .message_area p {
    	line-height: 2.67;
	}
	
	#topMessage .message_area p:not(:first-of-type) {
    	margin-top: 47px;
	}
	
	#topMessage .flex .box01 figure img, #topMessage .flex .box03 figure img{
		box-shadow: 4px 6px 10px 0px rgba(11, 35, 100,0.4);
	}
}

/* interview */

#interview{
	margin-top: -42px;
}

#interview .sub_text{
	font-size: 1.7rem;
	font-weight: 500;
	padding: 0 0 16px 33px;
}

#interview .ttl_wrap{
	align-items: flex-end;
}

.tab_btn_wrap{
	position: relative;
	margin-top: 80px;
}

.tab_btn_wrap:before{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #02229A;
	z-index: -1;
}

.tab_btn_wrap ul{
	display: flex;
	justify-content: space-between;
}

.tab_btn_wrap ul li{
	width: 32.2%;
}

.tab_btn{
	display: block;
	line-height: 62px;
	font-size: 2.0rem;
	color: #fff;
	background-color: rgba(2, 34, 154,1.0);
	border-top: 2px solid #02229A;
	border-right: 2px solid #02229A;
	border-left: 2px solid #02229A;
	border-radius: 16px 16px 0 0;
	letter-spacing: 0.4em;
    text-indent: 0.4em;
	padding: 0 0 2px;
	transition: all .3s;
}

.tab_btn:hover{
	background-color: rgba(2, 34, 154,0.8);
}

.tab_btn.active{
	background-color: #fff;
	color: #02229A;
}

.tab_item{
	margin: 79px auto 0;
}

.tab_item .textBox{
	margin-left: 9%;
}

.tab_item .textBox .message{
	font-size: 3.2rem;
    letter-spacing: 0.15em;
    line-height: 1.62;
}

.tab_item .textBox .name{
	font-size: 2.4rem;
	font-weight: 500;
	letter-spacing: 0.2em;
    line-height: 1.9;
	margin-top: 34px;
}

.tab_item .textBox .name span{
	font-size: 2.0rem;
    font-weight: 400;
    letter-spacing: -0.005em;
}

.interview_contents{
	max-width: 720px;
	margin: 78px auto 0;
}

.interview_contents dl:not(:first-of-type){
	margin-top: 70px;
}

.interview_contents dt.question{
	font-size: 3.2rem;
	text-align: left;
}

.interview_contents dt.question span{
	font-family: 'Crete Round', serif;
	font-weight: 400;
	font-size: 4.0rem;
	font-style: italic;
	letter-spacing: -0.03em;
}

.interview_contents dd.answer{
	font-size: 1.7rem;
    font-weight: 500;
    text-align: left;
    line-height: 1.9;
    margin-top: 32px;
}

#interview .link_area{
	max-width: 348px;
	margin: 88px auto 0;
}

#interview .link_area ul{
	display: flex;
	justify-content: space-between;
}

#interview .link_area ul li a{
	position: relative;
	font-size: 2.0rem;
	color: #02229A;
}

#interview .link_area ul li a:hover{
	color: #4977CC;
}

#interview .link_area ul li.back a{
	padding-left: 55px;
}

#interview .link_area ul li.next a{
	padding-right: 55px;
}

#interview .link_area ul li a:before{
	content: "";
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    border-right: solid 4px #02229A;
    border-bottom: solid 4px #02229A;
    transform-origin: center center;
    transition: all .3s;
}

#interview .link_area ul li.back a:before{
	left: 0;
    transform: translateY(-50%) rotate(135deg) translate(0,0);
}

#interview .link_area ul li.next a:before{
	right: 0;
    transform: translateY(-50%) rotate(-45deg) translate(0,0);
}

@media screen and (max-width: 767px){
	#interview {
    	margin-top: 102px;
	}
	
	#interview > .contents{
		padding: 0;
	}
	
	#interview .ttl_wrap{
		display: block;
	}
	
	#interview .ttl_wrap .hd02-02{
		padding: 0 10px;
	}
	
	#interview .sub_text{
		padding: 0 10px;
		margin-top: 15px;
		line-height: 1.9;
	}
	
	.tab_btn_wrap{
		margin-top: 76px;
	}
	
	.tab_btn_wrap ul{
		padding: 0 20px;
	}
	
	.tab_btn_wrap ul li {
    	width: 30%;
	}
	
	.tab_btn{
		font-size: 1.7rem;
		line-height: 38px;
	}
	
	.tab_item {
    	margin: 63px auto 0;
	}
	
	.tab_item .flex{
		flex-direction: column;
	}
	
	.tab_item .flex .imgBox figure{
		text-align: left;
	}
	
	.tab_item .textBox{
		margin: 47px 0 0;
	}
	
	.tab_item .textBox .message{
		font-size: 2.4rem;
	}
	
	.tab_item .textBox .name{
		line-height: 1.7;
		margin-top: 19px;
	}
	
	.interview_contents{
		margin: 64px auto 0;
	}
	
	.interview_contents dt.question{
		font-size: 2.4rem;
		line-height: 1.35;
		padding-left: 1.5em;
		text-indent: -1.6em;
	}
	
	.interview_contents dt.question span{
		letter-spacing: -0.06em;
	}
	
	.interview_contents dd.answer{
		margin-top: 38px;
	}
	
	#interview .link_area {
		max-width: none;
		padding: 0 31px;
		margin: 118px auto 0;
	}
}

/* guideline */

#guideline{
	background-color: #D5E3FF;
    margin-top: 136px;
    padding: 180px 0 120px;
}

#guideline > .inner{
	padding: 0 20px;
}

#guideline .tableStyle03 .indent li span{
	padding-right: 17px;
}

#guideline .contact_area{
	margin-top: 60px;
	max-width: 745px;
}

#guideline .contact_area > li > a{
	height: 65px;
	background-color: #02229A;
	border: 1px solid #0B2364;
}

#guideline .contact_area > li > a:hover{
	background-color: #fff;
	color: #02229A;
}

#guideline .contact_area > li.form > a:hover span.form_icon:before {
    background-image: url(/common/img/icon/icon_mail_blue02.svg);
}

@media screen and (max-width: 767px){
	#guideline{
		margin-top: 162px;
    	padding: 135px 0 120px;
	}
	
	#guideline > .inner{
		padding: 0 10px;
	}
	
	#guideline .tableStyle03 tr:last-of-type th{
		border-bottom: none;
	}
	
	#guideline .tableStyle03 .indent li{
		padding-left: 3em;
		text-indent: -3em;
	}
	
	#guideline .tableStyle03 .indent li span{
		padding: 0;
	}
	
	#guideline .contact_area > li.tel > a span {
    	padding: 0px 0 4px 10px;
	}
	
	#guideline .tel_icon:before{
		width: 18px;
		height: 18px;
	}
}

/* footer */

footer{
	margin-top: 0;
}