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


/* contents01 */

.contents01 .layout-whiteback {
	padding: 60px 50px;
	text-align: center;
}

/* contents02 */

.contents02 .box-text {
	text-align: center;
	margin-bottom: 30px;
}

/* layout01 */

.layout01 {
	width: 740px;
	margin-bottom: 80px;
}

.layout01 .box {
	background-color: #ECF6FF;
	border-radius: 5px;
	padding: 22px;
	position: relative;
}

.layout01 .box::after {
	content: "";
	position: absolute;
left: 0px;
bottom: 0px;
	background-image: url("../../images/recruit/arrow.svg");
background-position: center bottom;
background-repeat: no-repeat;
	background-size: auto 100%;
	width: 100%;
	height: 9px;
	margin-bottom: -20px;
}

.layout01 .box:last-child::after {
	display: none;
}

.layout01 .box:not(:last-child) {
	margin-bottom: 30px;
}

.layout01 .box:last-child {
	background-color: #50A0FE;
}

.layout01 h6 {
	font-size: 20px;
line-height: 1.2;
font-weight: 600;
}

.layout01 .box:last-child h6 {
	color: #FFF;
}

.layout01 h6 a {
	color: #3379CB;
	font-weight: 600;
	text-decoration: underline;
}

/* layout02 */

.layout02 {
	width: 100%;
	background : -moz-linear-gradient(50% 0% -90deg,rgba(73, 189, 248, 1) 0%,rgba(153, 160, 249, 1) 100%);
  background : -webkit-linear-gradient(-90deg, rgba(73, 189, 248, 1) 0%, rgba(153, 160, 249, 1) 100%);
  background : -webkit-gradient(linear,50% 0% ,50% 100% ,color-stop(0,rgba(73, 189, 248, 1) ),color-stop(1,rgba(153, 160, 249, 1) ));
  background : -o-linear-gradient(-90deg, rgba(73, 189, 248, 1) 0%, rgba(153, 160, 249, 1) 100%);
  background : -ms-linear-gradient(-90deg, rgba(73, 189, 248, 1) 0%, rgba(153, 160, 249, 1) 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#49BDF8', endColorstr='#99A0F9' ,GradientType=0)";
  background : linear-gradient(180deg, rgba(73, 189, 248, 1) 0%, rgba(153, 160, 249, 1) 100%);
	border-radius: 5px;
	position: relative;
	padding: 40px 55px 80px;
	position: relative;
}

.layout02::before {
	content: "";
	position: absolute;
left: 6px;
top: 6px;
	right: 6px;
	bottom: 6px;
	background-color: #FFF;
	display: block;
	border-radius: 3px;
}

.layout02 .box-title, .layout02 .box-inner {
	position: relative;
}

.layout02 .box-title {
	margin-bottom: 25px;
}

.layout02 .box-inner {
	display: flex;
  justify-content: space-between;
flex-wrap: wrap;
}

.layout02 .box {
	width: 360px;
	border-radius: 5px;
	position: relative;
	background-color: #ECF6FF;
	padding: 35px 40px 40px;
	text-align: left;
}

.layout02 .box::before {
	content: "";
	position: absolute;
right: 0px;
bottom: 0px;
	background-image: url("../../images/recruit/icon01.svg");
background-position: right bottom;
background-repeat: no-repeat;
	background-size: auto 100%;
	width: 96px;
	height: 109px;
	margin-bottom: -74px;
}

.layout02 .box:nth-child(1)::before {
	background-image: url("../../images/recruit/icon02.svg");
}


.layout02 .box:nth-child(2)::before {
	background-image: url("../../images/recruit/icon01.svg");
}


.layout02 h3, .layout02 h4 {
color: #50A0FE;
line-height: 1.2;
font-weight: 600;
}

.layout02 h3 {
	font-size: 33px;
	font-family: "Montserrat", sans-serif;
	line-height: 0.8;
	font-style: italic;
}

.layout02 h4 {
	padding-top: 10px;
}

.layout02 h6 {
	text-align: right;
	line-height: 1.6;
	font-weight: 400;
	padding-top: 10px;
}

.contents01 p.text-kome {
    text-align: right;
	font-size: 13px;
line-height: 1.2;
font-weight: 400;
    margin-bottom: 25px;
}

/* layout03 */

.layout03 table {
	width: 100%;
}

.layout03 tr {
	border-bottom-style : solid;
border-color : #50A0FE;
border-width : 1px;
}

.layout03 th, .layout03 td {
	padding: 30px 0px;
	vertical-align: middle;
	line-height: 1.6;
	text-align: left;
}

.layout03 th {
color: #50A0FE;
font-weight: 500;
	width: 25%;
}


/* layout04 */

.layout04 {
	width: 100%;
	text-align: left;
}

.layout04 .box:not(:last-child) {
	margin-bottom: 15px;
}

.faq-box {
	display: none;/*はじめは非表示*/
	background-color: #FFF;
	padding: 28px;
	border-radius: 5px;
}

.faq {
	position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    transition: all .5s ease;
	background-color: #3379CB;
	padding: 28px;
	padding-right: 35px;
	border-radius: 5px;
}

.faq h6 {
	color: #FFF;
line-height: 1.4;
font-weight: 500;
}

.faq h6, .faq-box p {
	position: relative;
	padding-left: 40px;
}

.faq h6::before, .faq-box p::before {
	content: "";
	position: absolute;
left: 0px;
top: 0px;
	font-family: "Montserrat", sans-serif;
	font-size: 22px;
line-height: 0.8;
	font-weight: 600;
}

.faq h6::before {
	content: "Q.";
}

.faq-box p::before {
	content: "A.";
	color: #3379CB;
	top: 5px;
}

.faq::before,
.faq::after{
    position: absolute;
    content:'';
    width: 20px;
    height: 1px;
    background-color: #FFF;
	 transition: all .5s ease;
    
}
.faq::before{
    top:50%;
    right: 30px;
    transform: rotate(0deg);
    
}
.faq::after{    
    top:50%;
    right: 30px;
    transform: rotate(90deg);

}
/*　closeというクラスがついたら形状変化　*/

.faq.close::after{
  transform: rotate(180deg);
}

.sp-view {
	display: none;
}