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

@import url('https://fonts.googleapis.com/css?family=Bowlby+One');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700');
@import url(https://fonts.googleapis.com/earlyaccess/sawarabimincho.css);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url('https://fonts.googleapis.com/css?family=Roboto:400,900,100i&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cantarell&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100;1,200&display=swap');

.sponly {
	display: none;
}
.spmask {
	display: block;
}

a {
	color: #3855cb;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}

/*------------------------------
	contents
------------------------------*/
#contents {
	padding: 0 0 80px 0;
}

/*------------------------------
	kv
------------------------------*/
#kv {
	margin-bottom: 70px;
	position: relative;
}
#kv .pic {
	width: 100%;
	position: relative;
	z-index: 2;
	opacity: 0;
}
#kv .pic img {
	width: 100%;
	vertical-align: bottom;
}
#kv .textBox {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 4;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	opacity: 0;
}
#kv .textBox .txtsub {
	width: 100%;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
}
#kv .textBox .txt {
	width: 100%;
	text-align: center;
	font-size: 40px;
	font-weight: bold;
	padding-top: 25px;
	margin-bottom: 20px;
}
#kv .textBox span {
	color: #d81e00;
}
#kv .line {
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: 40px;
	width: 100%;
	height: 1px;
	background-color: #9d9d9d;
	z-index: 3;
	width: 0px;
}

/*------------------------------
	readMessage
------------------------------*/
#readMessage {
	position: relative;
}
#readMessage .slideApp {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
}
#readMessage .slideApp .picb {
	position: relative;
	overflow: hidden;
}
#readMessage .slideApp .picb img {
	vertical-align: bottom;
}
#readMessage .slideApp .picb .cover {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: #fff;
}
#readMessage .inner {
	padding: 90px 10px 0px;
	max-width: 1100px;
	margin: 0 auto;
	min-height: 773px;
	position: relative;
	z-index: 3;
}
#readMessage .inner .title {
	position: relative;
	padding-bottom: 50px;
	z-index: 3;
	line-height: 1.2;
	font-size: 40px;
	font-weight: 700;
}
#readMessage .inner .title span {
	font-size: 28px;
}
#readMessage .inner p {
	font-size: 16px;
	line-height: 1.9;
	padding-bottom: 50px;
	position: relative;
	z-index: 3;
}
#readMessage .inner .pic {
	position: absolute;
	left: -40px;
	top: 0;
	z-index: 2;
}

/*------------------------------
	slider
------------------------------*/
#slider {
	width: 100%;
	margin-bottom: 90px;
}
#slider .pic img {
	width: 100%;
}

/*------------------------------
	possibility
------------------------------*/
#possibility .h2Box {
	border-bottom: solid 1px #e5e5e5;
	margin-bottom: 80px;
	position: relative;
}
#possibility .h2Box h2 {
	text-align: center;
	line-height: 1.4;
	position: relative;
	top: 20px;
}
#possibility .h2Box h2 span.title {
	font-size: 28px;
	font-weight: 700;
	background: #fff;
	padding: 0 25px;
}
#possibility .h2Box h2 span.red {
	font-family: 'Roboto', Open Sans;
	color: #bd3601;
	font-size: 16px;
	background: #fff;
}
/*------------------------------*/
#possibility {
	padding-bottom: 75px;
	position: relative;
}
#possibility .slideApp {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
}
#possibility .slideApp .pic {
	position: relative;
	overflow: hidden;
}
#possibility .slideApp .pic img {
	vertical-align: bottom;
}
#possibility .slideApp .pic .cover {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: #fff;
}
#possibility .inner {
	max-width: 1170px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	position: relative;
	z-index: 3;
}
#possibility .inner .possibilityBox {
	width: calc(33.3% - 70px);
	width: -webkit-calc(33.3% - 70px);
	margin: 0 35px;
}
#possibility .inner .possibilityBox .pic {
	max-width: 320px;
	margin-bottom: 40px;
}
#possibility .inner .possibilityBox .pic img {
	width: 100%;
	vertical-align: bottom;
}
#possibility .inner .possibilityBox .num {
	width: 100%;
	position: relative;
}
#possibility .inner .possibilityBox .num span {
	position: absolute;
	right: 30px;
	top: -50px;
	font-family: 'Overpass', sans-serif;
	color: #bd3601;
	font-style: italic;
	font-size: 50px;
}
#possibility .inner .possibilityBox h3 {
	max-width: 320px;
	font-size: 20px;
	line-height: 1.4;
	padding-bottom: 20px;
}
#possibility .inner .possibilityBox p {
	max-width: 320px;
	font-size: 14px;
	line-height: 1.8;
}
@media (min-width : 601px) and (max-width : 1050px){
	#possibility .inner .possibilityBox {
		width: calc(33.3% - 30px);
		width: -webkit-calc(33.3% - 30px);
		margin: 0 15px;
	}
	#possibility .inner .possibilityBox .num span {
		right: 20px;
	}
}

/*------------------------------
	interview
------------------------------*/
#middlePic {
	width: 100%;
	height: 415px;
	margin-bottom: 50px;
	position: relative;
	overflow: hidden;
}
#middlePic .pllaBox {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 415px;

	background:url("../images/pic_middle.jpg") no-repeat center top;
	background-size: 140% auto;
}
@media (max-width : 850px){
	#middlePic {
		height: 300px;
	}
	#middlePic .pllaBox {
		height: 300px;
	}
}

/*------------------------------
	interview
------------------------------*/
#interview .inner h2 {
	text-align: center;
	margin-bottom: 30px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.4;
}
#interview .inner h2 span {
	font-family: 'Roboto', Open Sans;
	color: #bd3601;
	font-size: 16px;
}
/*------------------------------*/
#interview1 .profile {
	border-top: solid 1px #e5e5e5;
	padding: 90px 0 40px;
	background-color: #ffffff;
}
#interview2 .profile {
	padding: 90px 0 40px;
	background-color: #f8f8f8;
}
@media (max-width : 1000px){
#interview1 .profile {
	padding: 90px 10px 40px;
}
#interview2 .profile {
	padding: 90px 10px 40px;
}
}
#interview .profile .profileInner {
	max-width: 850px;
	margin: 0 auto 50px;
}
#interview1 .profile .profileInner {
	display: flex;
}
#interview2 .profile .profileInner {
	display: flex;
	flex-direction: row-reverse;
}
#interview .profile .left {
	width: 50%;
}
#interview .profile .left .pic {
	max-width: 26.5em;
}
#interview .profile .left .pic img {
	width: 100%;
}
#interview .profile .right {
	width: calc(50% - 40px);
	width: -webkit-calc(50% - 40px);
	padding: 20px 20px 0;
}
#interview .profile .right .num {
	font-family: 'Overpass', sans-serif;
	padding-bottom: 20px;
	color: #bd3601;
	font-style: italic;
	font-size: 50px;
}
#interview .profile .right h3 {
	font-size: 20px;
	line-height: 1.8;
	padding-bottom: 50px;
}
#interview .profile .right .name {
	display: inline;
	background-color: #000000;
	color: #ffffff;
	font-size: 14px;
	padding: 4px 8px 4px;
}
#interview .profile .right .job {
	font-size: 14px;
	line-height: 1.9;
	padding-top: 12px;
}
#interview .moreBtn {
	max-width: 848px;
	margin: 0 auto;
	border: solid 1px #959595;
	color: #959595;
	text-align: center;
	padding: 18px 0;
	cursor: pointer;
	font-size: 12px;
}
#interview .moreBtn span:after {
	content: "▼";
	font-size: 12px;
}
#interview .moreBtn span.open:after {
	content: "▲";
	font-size: 12px;
}
@media (max-width : 850px){
	#interview .profile .left .pic {
		width: 18.75em;
	}
	#interview .profile .left .pic img {
		width: 100%;
	}
}
/*------------------------------*/
#interview .interviewText {
	padding-bottom: 100px;
	display: none;
	position: relative;
}
#interview1 .interviewText {
	position: relative;
}
#interview1 .interviewText .slideApp {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
}
#interview1 .interviewText .slideApp .pic {
	position: relative;
	overflow: hidden;
}
#interview1 .interviewText .slideApp .pic img {
	vertical-align: bottom;
}
#interview1 .interviewText .slideApp .pic .cover {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: #fff;
}
#interview .interviewText .textBox {
	max-width: 850px;
	margin: 0 auto;
	position: relative;
	z-index: 3;
}
#interview .interviewText .textBox .text {
	padding: 45px 50px;
	background-color: #ffffff;
}
#interview .interviewText .textBox .text h4 {
	margin-bottom: 30px;
	font-size: 20px;
	padding-bottom: 12px;
	border-bottom: dotted 1px #e5e5e5;
}
#interview .interviewText .textBox .text h4 span {
	font-family: 'Cantarell', Open Sans;
	font-size: 22px;
	padding-right: 4px;
	color: #bd3601;
}
#interview .interviewText .textBox .text p {
	font-size: 16px;
	line-height: 1.9;
}
#interview .interviewText .textBox .text:nth-child(even) {
	background-color: #f9f9f9;
}
#interview .interviewText .textBox .pic {
	max-width: 850px;
	margin: 2.5em auto 0;
}
#interview .interviewText .textBox .pic img {
	width: 100%;
}

/*------------------------------
	faq
------------------------------*/
#faq {
	padding: 80px 0;
	position: relative;
}
#faq .slideApp {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
}
#faq .slideApp .pic {
	position: relative;
	overflow: hidden;
}
#faq .slideApp .pic img {
	vertical-align: bottom;
}
#faq .slideApp .pic .cover {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: #fff;
}
#faq .inner {
	max-width: 850px;
	margin: 0 auto;
	position: relative;
	z-index: 3;
}
#faq .inner h2 {
	text-align: center;
	margin-bottom: 30px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.4;
}
#faq .inner h2 span {
	font-family: 'Roboto', Open Sans;
	color: #bd3601;
	font-size: 16px;
}
/*------------------------------*/
#faq #qaBox {
	padding: 40px 20px;
}
#faq #qaBox dl {
	width: 100%;
}
#faq #qaBox dt {
	padding: 30px 0;
	padding-left: 50px;
	line-height: 1.7;
	border-top: dotted 1px #e5e5e5;
	font-size: 18px;
	font-weight: 700;
	position: relative;
	cursor: pointer;
}
#faq #qaBox dt:first-child {
	border-top: none;
}
#faq #qaBox dt .stateIcon {
	position: absolute;
	right: 0;
	top: 18px;
	width: 54px;
	height: 54px;
	background: url("../images/icon_plus.gif") no-repeat center center;
	background-color: #f1f1f1;
}
#faq #qaBox dt .stateIcon.act {
	background: url("../images/icon_minus.gif") no-repeat center center;
	background-color: #f1f1f1;
}
#faq #qaBox dd {
	line-height: 1.9;
	font-size: 16px;
	border-bottom: none;
	padding: 10px 0 30px 50px;
	position: relative;
	display: none;
}
#faq #qaBox dt span {
	font-family: 'Cantarell', Open Sans;
	position: absolute;
	left: 0;
	top: 20px;
	line-height: 1.7;
	vertical-align: bottom;
	font-size: 26px;
}
#faq #qaBox dd span {
	position: absolute;
	left: 0;
	top: -2px;
	font-family: 'Cantarell', Open Sans;
	color: #bd3601;
	font-size: 26px;
}

/*------------------------------
	recruit
------------------------------*/
#recruit {
	background: url("../images/bg_recruit.gif") repeat-x center top;
	background-size: auto 100%;
	padding: 80px 0;
}
#recruit .inner {
	max-width: 850px;
	margin: 0 auto;
}
#recruit .inner h2 {
	text-align: center;
	margin-bottom: 30px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.4;
}
#recruit .inner h2 span {
	font-family: 'Roboto', Open Sans;
	color: #bd3601;
	font-size: 16px;
}
#recruit .inner p.caption {
	text-align: center;
	margin-top: -20px;
	margin-bottom: 40px;
	font-size: 14px;
	font-weight: 300;
	padding-left: 1em;
	text-indent: -1em;
	line-height: 1.6;
	color: #333;
}
#recruit .inner p.caption02 {
	text-align: left;
	margin-top: 30px;
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 300;
	padding-left: 1em;
	text-indent: -1em;
	line-height: 1.6;
	color: #333;
}
/*------------------------------*/
#recruit .tableBox {
	background-color: #ffffff;
	padding: 40px 20px;
}
#recruit .tableBox table {
	width: 100%;
}
#recruit .tableBox table tr {
	border-bottom: solid 1px #e5e5e5;
}
#recruit .tableBox table tr:last-child {
	border-bottom: none;
}
#recruit .tableBox table th {
	font-weight: bold;
	padding: 25px 0;
	line-height: 1.7;
	vertical-align: top;
	font-size: 16px;
	width: 120px;
	text-align: left;
}
#recruit .tableBox table td {
	padding: 25px 0;
	line-height: 1.7;
	vertical-align: bottom;
	font-size: 16px;
	text-align: left;
}
#recruit .tableBox table td.center {
	text-align: center;
}

/*------------------------------
	entryBtn
------------------------------*/
#entryBtn {
	padding-bottom: 90px;
}
#entryBtn .btn {
	max-width: 848px;
	margin: 0 auto;
	border: solid 1px #bd3601;
}
#entryBtn .btn a {
	background-color: #bd3601;
	color: #ffffff;
	display: block;
	font-family: 'Roboto', Open Sans;
	font-weight: 400;
	font-size: 24px;
	padding: 32px 0;
	text-align: center;
	text-decoration: none;
	transition-duration: 0.3s;
}
#entryBtn .btn a:hover {
	background-color: #ffffff;
	color: #bd3601;
}
/*------------------------------
	internshipBtn
------------------------------*/
#internshipBtn {
	padding-bottom: 90px;
}
#internshipBtn .btn {
	max-width: 848px;
	margin: 0 auto;
	border: solid 1px #bd3601;
}
#internshipBtn .btn a {
	background-color: #fff;
	color: #bd3601;
	display: block;
	font-family: 'Roboto', Open Sans;
	font-weight: 400;
	font-size: 24px;
	padding: 32px 0;
	text-align: center;
	text-decoration: none;
	transition-duration: 0.3s;
}
#internshipBtn .btn a:hover {
	background-color: #bd3601;;
	color: #fff;
}

/*------------------------------
	returnBtn
------------------------------*/
#returnBtn {
	padding: 10px 0;
	text-align: center;
}
#returnBtn a {
	font-weight: 700;
	text-decoration: none;
	font-size: 18px;
	padding: 10px 0;
	color: #000000;
	border-bottom: solid 1px #e5e5e5;
}


/*------------------------------
	loading
------------------------------*/
.loadingWrap {
	width: 100%;
	height: 100%;
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index:1000;
	overflow: hidden;
}
.loadingWrap img{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -25px;
	margin-left: -25px;
	width: 50px;
}

/*------------------------------
	contact
------------------------------*/
#contact {
	position: relative;
	width: 100%;
	background-color: #fafafa;
	box-sizing: border-box;
	padding: 40px 0;
	margin-bottom: 60px;
}
#contact .inner {
	max-width: 850px;
	margin: 0 auto;
}
#contact .inner h3 {
	display: flex;
	align-items: center;
	text-align: center;
	width: 180px;
	margin: 0 auto 16px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
}
#contact .inner h3:before,
#contact .inner h3:after {
	border-top: solid 1px #bcbcbc;
	content: "";
	flex-grow: 1;
}
#contact .inner h3:before {
	margin-right: 10px;
}
#contact .inner h3:after {
	margin-left: 10px;
}
#contact .inner ul{
	text-align: center;
}
#contact .inner li{
	margin-bottom: 16px;
	font-size: 16px;
}
#contact .inner li:last-of-type{
	margin-bottom: 0;
}