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

@import url('https://fonts.googleapis.com/css?family=Bowlby+One');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
@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=Barlow:wght@100;400;600;700&family=Overpass:wght@200;300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500&display=swap');

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

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

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

/*------------------------------
	kv
------------------------------*/
#kv {
	position: relative;
	overflow: hidden;
}
#kv .sliderBox {
	width: 140%;
	position: relative;
	left: -20%;
	z-index: 2;
	opacity: 0;
	opacity: 1;
}
#kv .sliderBox img {
	width: 100%;
	vertical-align: bottom;
}
#kv .textBox {
	position: absolute;
	left: 0;
	top: 5%;
	width: 100%;
	height: 100%;
	z-index: 6;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	opacity: 0;
	opacity: 1;
}
#kv .textBox .txtsub {
	width: 100%;
	text-align: center;
	font-size: 12px;
	color: #fff;
}
#kv .textBox .txtsub span {
	border-bottom: solid 1px #fff;
	text-align: center;
	padding: 0 15px;
}
#kv .textBox .txt {
	width: 100%;
	text-align: center;
	font-size: 24px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	padding-top: 10px;
	color: #fff;
}
#kv .textBox .txt span.lineBox {
	position: relative;
}
#kv .textBox .txt span.lineBox::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 100%;
	height: 1px;
	background-color: #fff;
	z-index: 3;
}
#kv .textBox .txt span.color {
	color: #fff100;
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
	position: absolute;
	bottom: 10px !important;
	width: 100%;
}

/*------------------------------
	readMessage
------------------------------*/
#readMessage {
	position: relative;
	background:url("../images/bg_read.jpg") no-repeat center center;
	background-size: cover;
background-color:rgba(255,255,255,0.4);
background-blend-mode:lighten;
}
#readMessage .inner {
	padding: 50px 0 20px;
	text-align: center;
	position: relative;
}
#readMessage .inner img {
	width: 100%;
	vertical-align: bottom;
}
#readMessage .photo1 {
	position: absolute;
	left: calc(50% - 620px);
	top: 220px;
	width: 60px;
	display: none;
}
#readMessage .photo2 {
	position: absolute;
	left: calc(50% + 330px);
	bottom: 110px;
	width: 60px;
	display: none;
}
#readMessage .title {
	padding-bottom: 30px;
	font-size: 18px;
	line-height: 1.7;
	font-weight: bold;
}
#readMessage .inner p {
	font-size: 14px;
	line-height: 2.1;
	padding-bottom: 28px;
}

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

/*------------------------------
	possibility
------------------------------*/
/*------------------------------*/
#possibility {
	position: relative;
	padding-top: 40px;
	padding-bottom: 60px;
}
#possibility .slideApp {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
}
#possibility .slideApp .pic {
	position: relative;
	overflow: hidden;
	width: 120px;
}
#possibility .slideApp .pic img {
	width: 100%;
	vertical-align: bottom;
}
#possibility .slideApp .pic .cover {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: #fff;
}
#possibility .possibilityBox {
	position: relative;
	display: block;
	box-sizing: border-box;
	padding: 60px 0;
}
#possibility .possibilityBox.first {
	padding-top: 0;
	 /*
	width: calc(33.3% - 70px);
	width: -webkit-calc(33.3% - 70px);
	margin: 0 35px;
	 */
}
#possibility .possibilityBox.odd{
	background-color: #fff;
}
#possibility .possibilityBox.even{
	background-color: #f0faff;
}
#possibility .possibilityBox .inner,
#possibility .possibilityBox02 .inner {
	position: relative;
	max-width: 1170px;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 0 10px;
	z-index: 3;
}
#possibility .possibilityBox.odd .box{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
}
#possibility .possibilityBox.even .box{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#possibility .possibilityBox .pic {
	width: 100%;
	margin: 0 auto 20px;
}
#possibility .possibilityBox .pic img {
	width: 100%;
	vertical-align: bottom;
}
#possibility .possibilityBox .num {
	width: 100%;
	position: relative;
}
#possibility .possibilityBox .num span {
	position: absolute;
	left: 50%;
	margin-left: 120px;
	top: -40px;
	font-family: 'Overpass', sans-serif;
	color: #bd3601;
	font-style: italic;
	font-size: 50px;
}
#possibility .possibilityBox .textBox{
	width: 100%;
}
#possibility .possibilityBox h3 {
	font-size: 20px;
	line-height: 1.4;
	border-left: solid 3px #2bb4fc;
	padding: 2px 0 2px 5px;
	margin-bottom: 10px;
}
#possibility .possibilityBox p {
	font-size: 14px;
	line-height: 1.8;
}

/*------------------------------*/
#possibility .possibilityBox02{
	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding: 60px 0 0;
}
#possibility .possibilityBox02 .hd h3{
	width: 8em;
	font-size: 20px;
	line-height: 1.4;
	border-left: solid 3px #2bb4fc;
	padding: 2px 0 2px 5px;
	border-left: solid 3px #2bb4fc;
	margin-bottom: 40px;
}
#possibility .possibilityBox02 .dataBox{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
}
#possibility .possibilityBox02 .dataBox .data01,
#possibility .possibilityBox02 .dataBox .data02{
	position: relative;
	text-align: center;
}
#possibility .possibilityBox02 .dataBox .data01{
	width: 100%;
	border-bottom: dotted 1px #2bb4fc;
	box-sizing: border-box;
	padding-bottom: 30px;
	margin-bottom: 30px;
}
#possibility .possibilityBox02 .dataBox .data02{
	width: 100%;
	padding-left: 0;
}
#possibility .possibilityBox02 .dataBox .data01 img{
	width: 100%;
}
#possibility .possibilityBox02 .dataBox .data02 img{
	width: 40%;
	margin-bottom: 50px;
}
#possibility .possibilityBox02 .dataBox h4{
	font-size: 18px;
	font-weight: bold;
	background-color: #2bb4fc;
	color: #fff;
	box-shadow: 6px 6px 0 #026abf;
	padding: 10px;
	margin: 0 auto 40px;
}
#possibility .possibilityBox02 .dataBox .data01 h4{
	width: 15em;
}
#possibility .possibilityBox02 .dataBox .data02 h4{
	width: 12em;
}
#possibility .possibilityBox02 .dataBox .data02 p{
	font-size: 42px;
	font-weight: bold;
	color: #2bb4fc;
	font-family: 'Noto Sans JP', sans-serif;
}
#possibility .possibilityBox02 .dataBox .data02 p span.big{
	font-size: 90px;
	font-family: 'Overpass', sans-serif;
}
#possibility .possibilityBox02 .dataBox .data02 p.caption{
	font-size: 12px;
	font-weight: normal;
	color: #333;
	font-family: 'Noto Sans JP', sans-serif;
	margin-top: 20px;
}

/*------------------------------
	data
------------------------------*/
#data {
	padding-top: 60px;
	padding-bottom: 50px;
	position: relative;
}
#data .inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 10px;
}
#data .inner .pic img {
	width: 100%;
	vertical-align: bottom;
}

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

	background:url("../images/bg_parallax.jpg") no-repeat center top;
	background-size: 100% auto;
}

/*------------------------------
	interview
------------------------------*/
#interview {
	background-color: #f0faff;
	padding-top: 60px;
}
#interview2 {
	padding-top: 30px;
}
/*------------------------------*/
#interview .moreBtn {
	max-width: 850px;
	margin: 0 auto;
	padding: 0 10px;
	padding-bottom: 50px;
}
#interview .moreBtn .detail {
	width: calc(100% - 2px);
	border: solid 1px #959595;
	color: #959595;
	text-align: center;
	padding: 14px 0;
	cursor: pointer;
	font-size: 12px;
}
#interview .moreBtn span:after {
	content: "▼";
	font-size: 12px;
}
#interview .moreBtn span.open:after {
	content: "▲";
	font-size: 12px;
}
/*------------------------------*/
#interview .profile {
	max-width: 1100px;
	margin: 0 auto 74vw;
	position: relative;
}
#interview .profile .pic {
	width: 100%;
	vertical-align: bottom;
	position: relative;
	z-index: 1;
}
#interview .profile .pic img {
	width: 100%;
	vertical-align: bottom;
}
#interview .profile .profileInner {
	position: absolute;
	left: 10px;
	top: 0;
	z-index: 3;
	width: calc(100% - 20px);
}
#interview .profile .profileInner .num {
	margin: 27vw 0 10px;
	background-color: #575757;
	color: #fff;
	padding: 5px 10px;
	display: inline-block;
	font-family: 'Roboto', Open Sans;
}
#interview .profile .profileInner h3 {
	line-height: 1.3;
	margin-bottom: 10px;
	color: #fff;
	font-size: 22px;
}
#interview .profile .profileInner h3 span {
	display: inline-block;
	background-color: #00adff;
	padding: 4px 6px;
	margin-bottom: 8px;
}
#interview .profile .profileInner .nameBox {
	display: inline-block;
	padding: 10px 12px;
	background:url("../images/bg_name.png");
	background-color: rgba(255,255,255,0.8);
}
#interview .profile .profileInner .nameBox .name {
	color: #fff;
	display: inline-block;
	padding: 6px 8px 6px 10px;
	font-size: 14px;
	background-color: #000;
	margin-bottom: 10px;
}
#interview .profile .profileInner .nameBox .job {
	font-size: 14px;
	font-weight: bold;
	line-height: 1.6;
}
/*------------------------------*/
.interviewText {
	background-color: #fff;
	padding: 25px 0 20px;
}
#interview .inner {
	padding: 0 10px;
}
#interview .textBox {
	max-width: 950px;
	margin: 0 auto;
	position: relative;
}
#interview .textBox.reverse {
	flex-direction: row-reverse;
}
#interview .textBox .text {
	width: 100%;
	padding-bottom: 30px;
}
#interview .textBox .text h4 {
	margin-right: 40%;
	margin-bottom: 20px;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.6;
	padding-bottom: 10px;
	border-bottom: solid 1px #dcdcdc;
}
#interview .textBox .text p {
	font-size: 14px;
	line-height: 1.8;
}
#interview .textBox .pic {
	position: absolute;
	right: 0;
	top: 4px;
	width: 35%;
}
#interview .textBox .pic img {
	width: 100%;
	vertical-align: bottom;
}
#interview .interviewText .picWide {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 10px;
}
#interview .interviewText .picWide img {
	width: 100%;
	vertical-align: bottom;
}
/*------------------------------*/
#interview .interviewText {
	padding-bottom: 40px;
	display: none;
	position: relative;
}
#interview1 .interviewText {
	position: relative;
}

/*------------------------------
	faq
------------------------------*/
#faq {
	padding: 40px 10px;
	position: relative;
}
#faq .slideApp {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
}
#faq .slideApp .pic {
	position: relative;
	overflow: hidden;
	width: 120px;
}
#faq .slideApp .pic img {
	width: 100%;
	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: 20px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
}
#faq .inner h2 span {
	font-family: 'Roboto', Open Sans;
	color: #bd3601;
	font-size: 14px;
}
/*------------------------------*/
#faq #qaBox {
	padding: 20px 10px;
}
#faq #qaBox dl {
	width: 100%;
}
#faq #qaBox dt {
	padding: 15px 40px 15px 30px;
	line-height: 1.7;
	border-top: dotted 1px #e5e5e5;
	font-size: 14px;
	font-weight: 700;
	position: relative;
	cursor: pointer;
}
#faq #qaBox dt:first-child {
	border-top: none;
}
#faq #qaBox dt .stateIcon {
	position: absolute;
	right: 0;
	top: 12px;
	width: 27px;
	height: 27px;
	background: url("../images/icon_plus.gif") no-repeat center center;
	background-size: 10px auto;
	background-color: #f1f1f1;
}
#faq #qaBox dt .stateIcon.act {
	background: url("../images/icon_minus.gif") no-repeat center center;
	background-size: 10px auto;
	background-color: #f1f1f1;
}
#faq #qaBox dd {
	line-height: 1.9;
	font-size: 14px;
	border-bottom: none;
	padding: 10px 0 30px 30px;
	position: relative;
	display: none;
}
#faq #qaBox dt span {
	font-family: 'Cantarell', Open Sans;
	position: absolute;
	left: 0;
	top: 10px;
	line-height: 1.7;
	vertical-align: bottom;
	font-size: 18px;
}
#faq #qaBox dd span {
	position: absolute;
	left: 0;
	top: 6px;
	font-family: 'Cantarell', Open Sans;
	color: #bd3601;
	font-size: 18px;
}

/*------------------------------
	recruit
------------------------------*/
#recruit {
	padding: 60px 0 40px;
}
#recruit .inner {
	max-width: 850px;
	margin: 0 auto;
}
/*------------------------------*/
.headline {
	text-align: center;
}
#possibility .headline {
	padding-bottom: 40px;
}
#data .headline {
	padding-bottom: 30px;
}
#interview .headline {
	padding-bottom: 30px;
}
.headline .headlineNo {
	margin-bottom: 16px;
	font-size: 32px;
	color: #111;
	font-family: 'Oswald', sans-serif;
	font-weight: 200;
}
.headline .headlineNo span {
	position: relative;
}
.headline .headlineNo span::before {
	content: "";
	position: absolute;
	left: -18px;
	top: calc(50% + 2px);
	width: 12px;
	height: 1px;
	background-color: #000;
}
.headline .headlineNo span::after {
	content: "";
	position: absolute;
	right: -18px;
	top: calc(50% + 2px);
	width: 12px;
	height: 1px;
	background-color: #000;
}
.headline h2 {
	margin-bottom: 20px;
	font-size: 24px;
	line-height: 1.4;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
}
.headline .sub {
	font-family: 'Roboto', Open Sans;
	color: #2bb4fc;
	font-size: 10px;
	position: relative;
}
.headline .sub::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -16px;
	width: 1px;
	height: 14px;
	background-color: #000;
}
#recruit p.caption{
	width: 100%;
	margin: -15px auto 20px;
	text-align: center;
	font-size: 12px;
}
#recruit p.caption02{
	width: 100%;
	margin: 20px auto 0;
	text-align: center;
	font-size: 12px;
	line-height: 1.6;
}
/*------------------------------*/
#recruit .tableBox {
	background-color: #ffffff;
	padding: 20px 10px;
}
#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: 15px 0;
	line-height: 1.7;
	vertical-align: top;
	font-size: 16px;
	width: 100px;
	text-align: left;
}
#recruit .tableBox table td {
	padding: 17px 0;
	line-height: 1.7;
	vertical-align: bottom;
	font-size: 14px;
	text-align: left;
}
#recruit .tableBox table td span {
	font-weight: bold;
}
#recruit .tableBox table td span.dotto {
	display: none;
}
#recruit .tableBox table td.center {
	text-align: center;
	padding: 0;
	font-size: 14px;
}

/*------------------------------
	entryBtn
------------------------------*/
/*
#entryBtn {
	padding: 0 10px 40px;
}
*/
/*------下記新卒サイトバナーあり-------*/
#entryBtn {
	padding: 0 20px 20px;
}
/*------------------------------*/
#entryBtn .btn {
	max-width: 848px;
	margin: 0 auto;
	border: solid 1px #ce000d;
}
#entryBtn .btn a {
	background-color: #ce000d;
	color: #ffffff;
	display: block;
	font-family: 'Roboto', Open Sans;
	font-weight: 400;
	font-size: 18px;
	padding: 16px 0;
	text-align: center;
	text-decoration: none;
	transition-duration: 0.3s;
}
#entryBtn .btn a:hover {
	background-color: #ffffff;
	color: #ce000d;
}

/*------------------------------
	internshipBtn
------------------------------*/
#internshipBtn {
	padding: 0 10px 48px;
}
#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: 18px;
	padding: 16px 0;
	text-align: center;
	text-decoration: none;
	transition-duration: 0.3s;
}
#internshipBtn .btn a:hover {
	background-color: #fff;
	color: #bd3601;
}

/*------------------------------
	returnBtn
------------------------------*/
#returnBtn {
	padding: 10px 0;
	text-align: center;
}
#returnBtn a {
	font-weight: 700;
	text-decoration: none;
	font-size: 16px;
	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: 24px 0;
	margin-bottom: 40px;
}
#contact .inner {
	max-width: 850px;
	margin: 0 auto;
}
#contact .inner h3 {
	display: flex;
	align-items: center;
	text-align: center;
	width: 140px;
	margin: 0 auto 12px;
	font-size: 18px;
	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: 10px;
	font-size: 14px;
}
#contact .inner li:last-of-type{
	margin-bottom: 0;
}

/*------------------------------
	banner
------------------------------*/
#banner{
	position: relative;
	width: 100%;
	background-color: #fff;
	box-sizing: border-box;
	padding: 40px 0;
}
#banner .inner {
	max-width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 0 10px;
}
#banner .bannerBox{
	width: 100%;
	margin: 0 auto;
	transition: 0.3s;
	cursor: pointer;
}
#banner .bannerBox a{
	display: block;
	width: 100%;
}
#banner .bannerBox img{
	width: 100%;
}
#banner .bannerBox a:hover{
	opacity: 1;
}