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

/* Ryoetsu denki
TOP
-----------------------------------------------------*/
/* ==============================================
    header
============================================== */
#globalHeader {
	transition: .6s;
}
#globalHeader header {
	display: none;
}
#globalHeader.fixed header {
	display: block;
}

#globalHeader #global-nav {
	position: absolute;
	width: 100%;
	background: rgba(255,255,255,0.9);
}

#globalHeader.fixed {
	position: fixed;
	top: 0;
	width: 100%;
	background: rgba(255,255,255,0.9);
	z-index: 98;
	transition: .6s;
}
/*#globalHeader.fixed header {
	position: inherit;
}*/

/*#globalHeader.fixed #main-visual {
	display: none;
}*/

body.home #globalHeader.fixed header h1 {
	display: block;
	padding: 6px 0;
	width: 200px;
}

body.home #globalHeader.fixed header h1 img {
	width: 100%;
}
body.home #globalHeader.fixed header h1 a {
	position: inherit;
	top: 0;
	left: 0;
	padding: 0;
	width: auto;
	z-index: 1;
	background: transparent;
	box-shadow: none;
}

@media screen and (max-width: 700px) {
	#globalHeader {
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 99;
		transform: translateY(0);
	}
	#globalHeader #global-nav {
		background: rgba(13,94,164,0.7);
	}
}

/* ==============================================
    main-visual
============================================== */
/*.slider{
  opacity: 0;
  transition: opacity .3s linear;
}
.slider.slick-initialized{
  opacity: 1;
}*/
#main-visual div.photo {
	display: flex;
	justify-content: space-between;
	
}
#main-visual div.photo>div {
	width: 33.3333%;
	overflow: hidden;
}

#main-visual div.photo ul {
	list-style: none;
	line-height: 0;
}
#main-visual div.photo li {

}

#main-visual div.photo img {
	width: 100%;
	vertical-align:top;
}

#main-visual h2 {
	font-size: 2.000em;
	font-weight: 400;
	/*font-family: 'M PLUS 1p', sans-serif;
	transform: rotate(0.05deg);*/
	font-family: 'Noto Sans JP', sans-serif;
	background: #cc0000;
	color: #fff;
	padding: 15px;
	text-align: center;
}
#main-visual h2 .strong {
	font-size: 1.313em;
	font-weight: 900;
}

#catchcopy span {
	display: inline-block;
	transition: transform 1.2s cubic-bezier(.25, 0, .3, 1), opacity 2s ease-out;
	will-change: transform;
}
#catchcopy span {
	opacity: 0;
	transform: translateX(200px);
	animation: fadeIn1 0.6s ease-out forwards;
}

/*#catchcopy span:nth-of-type(2) {
	animation-delay: 0.2s;
}
#catchcopy span:nth-of-type(3) {
	animation-delay: 0.4s;
}
#catchcopy span:nth-of-type(4) {
	animation-delay: 0.6s;
}*/


@keyframes fadeIn1 {
	0% {}
	100% { opacity: 1; transform: translateX(0); }
}


@media screen and (min-width: 701px) {
	/*#catchcopy span {
		animation-name: mainVisual-in;
		animation-duration: 1.0s;
	}*/
}

@keyframes mainVisual-in {
	0% {
		opacity: 0;
		transform: translateX(100px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}


@media screen and (max-width: 700px) {
	#main-visual {
		margin-top: 50px;
	}
	#main-visual h2 {
		font-size: 1.714em;
	}
}


.bnr_online-lecture {
	text-align: center;
	margin-bottom: 70px;
}

/* ==============================================
    background layout
============================================== */
#contents {
	padding-top: 12vw;
}
section {
	position: relative;
}
section#news,
section#business {
	background: #f0f3f5;
}
section#news {
	padding-bottom: 70px;
}



section#news::before {
	content: "";
	position: absolute;
	top: -5vw;
	left: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 5vw 100vw;
	border-color: transparent transparent #f0f3f5 transparent;
}

section#business {
	margin-bottom: 11vw;
	padding-bottom: 5vw;
}
section#business::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5vw 0 0 100vw;
	border-color: transparent transparent transparent #fff;
}


section#case {
	background: #eaf5ff;
	/*padding-bottom: 5vw;*/
}
section#case::before {
	content: "";
	position: absolute;
	top: -5vw;
	left: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 5vw 100vw;
	border-color: transparent transparent #eaf5ff transparent;
}
section#case::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5vw 0 0 100vw;
	border-color: transparent transparent transparent #fff;
}

section#company {
	padding-top: 5vw;
	margin-bottom: 100px;
}


/* ==============================================
    
============================================== */
section h2 {
	font-size: 2.250em;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	color: #2c2c2c;
	letter-spacing: 0.2em;
	text-indent: 0.2em;
	text-align: center;
	margin-bottom: 20px;
}
section h2::first-letter {
	color: #db0f21;
}
section h2 span {
	font-size: 14px;
	letter-spacing: 0.2em;
	display: block;
}

@media screen and (max-width: 700px) {
	section h2 {
		font-size: 1.714em;
	}
}


/* ==============================================
    news
============================================== */

#news .btn_list {
	text-align: right;
	margin-bottom: 10px;
}
#news .btn_list a {
	display: inline-block;
	color: #000;
}
#news .btn_list a::after {
	content: "";
	display: inline-block;
	background: url("image/arrow3_r.svg") no-repeat 0 0 / contain;
	width: 24px;
	height: 24px;
	margin-left: 10px;
	vertical-align: middle;
	transition: .2s;
}
#news .btn_list a:hover {
	text-decoration: none;
	opacity: 1;
}
#news .btn_list a:hover::after {
	transform: translateX(3px);
}

#news dl {
	background: #fff;
	margin-bottom: 50px;
}


#pickup ul.pickup-slider {
	list-style: none;
}

#pickup ul.pickup-slider li>div.box {
	margin: 0 20px;
	position: relative;
}

#pickup ul.pickup-slider li a {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	border: 1px solid #c9c9c9;
	overflow: hidden;
}
#pickup ul.pickup-slider li a::after {
	content: "";
	display: block;
	background: url("image/arrow3_r.svg") no-repeat 0 0 / contain;
	width: 24px;
	height: 24px;
	position: absolute;
	top: 50%;
	right: 5px;
	margin-top: -12px;
	z-index: 2;
	transition: .2s;
}

#pickup ul.pickup-slider li figure {
	text-align: center;
}
#pickup ul.pickup-slider li figure img {
	/*width: 100%;
	max-width: inherit;*/
}

#pickup ul.pickup-slider li a h3 {
	background: rgba(67,67,67,0.4);
	width: 100%;
	padding: 5px 30px 5px 10px;
	display: flex;
	align-items: center;
	min-height: 60px;
	color: #fff;
	font-size: 1.375em;
	line-height: 1.2;
	transition: .2s;
}

#pickup ul.pickup-slider li a:hover {
	text-decoration: none;
	opacity: 1;
}

#pickup ul.pickup-slider li a:hover h3 {
	min-height: 100%;
}

@media screen and (max-width: 700px) {
	#pickup ul.pickup-slide {
		display: block;
	}
	#pickup ul.pickup-slider li {
		/*width: 310px;*/
		margin: 0 auto 20px;
	}
}

/* ==============================================
    business
============================================== */

#business ul {
	list-style: none;
}
#business li {
	position: relative;
	margin-bottom: 100px;
}
#business li .box {
}
#business li::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	width: 51%;
	height: 100%;
	background: #fff;
	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
	z-index: 1;
}

#business li .box {
	display: flex;
	width: 50%;
	z-index: 2;
	position: relative;
}
#business li figure.eyecatch {
	position: absolute;
	bottom: -20px;
	z-index:0;
	width: 55%;
}
#business li figure.eyecatch img {
	width: 100%;
}


#business li .box figure {
	width: 35%;
	margin-top: -30px;
	position: relative;
}
#business li .box::before {
	content: "";
	display: block;
	width: 1px;
	height: 270px;
	background: #db0f21;
	position: absolute;
	top: -30px;
	
}

#business li .box div {
	width: 60%;
	padding: 13% 0;
}
#business li .box div h3 {
	font-size: 1.750em;
	font-family: 'Noto Sans JP', sans-serif;
	color: #db0f21;
	margin-bottom: 15px;
}
#business li .detail {
	margin-top: 20px;
}
#business li .detail a {
	display: inline-block;
	border: 1px solid #323232;
	padding: 15px 0;
	width: 200px;
	color: #2d2d2d;
	text-align: center;
	position: relative;
}
#business li .detail a::after {
	content: "";
	display: inline-block;
	background: url("image/arrow1_r.svg") no-repeat 0 0;
	background-size: contain;
	width: 16px;
	height: 16px;
	position: absolute;
	top: 50%;
	margin-top: -8px;
	right: 10px;
	transition: .2s;
}

@media screen and (min-width: 701px) {
	#business li .detail a:hover {
		text-decoration: none;
	}

	#business li .detail a:hover::after {
		right: 5px;
	}
}

#business li:nth-child(2n+1)::before {
	left: 0;
}
#business li:nth-child(2n+1) figure.eyecatch {
	right: 0;
}
#business li:nth-child(2n+1) .box::before {
	left: 0;
}
#business li:nth-child(2n)::before {
	right: 0;
}
#business li:nth-child(2n) figure.eyecatch {
	left: 0;
}
#business li:nth-child(2n) .box {
	margin-left: auto;
}
#business li:nth-child(2n) .box::before {
	right: 0;
}





@media screen and (max-width: 700px) {
	#business li::before {
		width: 100%;
		height: 100%;
	}
	#business li:nth-child(2n+1)::before {
	
	}
	
	#business li .box {
		width: 100%;
	}
	#business li .box div h3 {
		font-size: 1.571em;
	}
	#business li figure.eyecatch {
		position: inherit;
		bottom: inherit;
		z-index:1;
		width: 100%;
	}
}


/* ==============================================
    case
============================================== */
#case .inner {

}

#case ul {
	list-style: none;
	
}
#case li {
	display: flex;
	
}
#case li {

}

#case li>div {
	margin: 0 20px;
	background: #fff;
}
#case li>div::before {

}
#case li figure a {
	outline: none;
}

#case li .detail {
	text-align: center;
}
#case li .detail a {
	font-size: 0.875em;
	/*font-family: 'Noto Sans JP', sans-serif;*/
	display: block;
	border: 1px solid #3a79b7;
	background: #fff;
	color: #0958a5;
	line-height: 40px;
	border-radius: 20px;
	width: 65%;
	margin: 30px auto 0;
	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
	position: relative;
	transition: .2s;
}
#case li .detail a::before {
	content: "";
	display: inline-block;
	background: url("image/arrow2_b.svg") no-repeat 0 0;
	background-size: contain;
	width: 14px;
	height: 14px;
	position: absolute;
	top: 50%;
	margin-top: -7px;
	left: 15px;
}
#case li .detail a:hover {
	opacity: 1;
	background: #daebfc;
	text-decoration: none;
	transform: translateY(2px);
}

#case li .box {
	padding: 30px;
}
#case li .box h3 {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.125em;
	font-weight: 500;
	color: #4c4c4c;
	margin-bottom: 15px;
}
#case li .box .place {
	margin-bottom: 15px;
	font-size: 0.875em;
}
#case li .box .txt {
	line-height: 1.4;
	min-height: 4.5em;
}

#case .btn_list {
	text-align: right;
	margin: 30px -10px 0 0;
	position: relative;
	z-index: 1;
}



.slick-prev,
.slick-next {
	width: 40px;
	height: 40px;
	margin-top: -20px;
	z-index: 1;
}
.slick-prev:before,
.slick-next:before {
	content: "";
	display: inline-block;
	width: 40px;
	height: 40px;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: contain;
}

.slick-prev:before {
	background-image: url("image/arrow1_b.svg");
	transform: rotate(180deg);
}
.slick-next:before {
	background-image: url("image/arrow1_b.svg");
}
.slick-prev
{
    left: -80px;
}
[dir='rtl'] .slick-prev
{
    right: -80px;
    left: auto;
}
.slick-next
{
    right: -80px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -80px;
}
@media screen and (max-width: 1200px) {
	.slick-prev,
	.slick-next {
		width: 30px;
		height: 30px;
		margin-top: -15px;
	}
	.slick-prev:before,
	.slick-next:before {
		width: 30px;
		height: 30px;
	}

	.slick-prev
	{
		left: -10px;
	}
	[dir='rtl'] .slick-prev
	{
		right: -10px;
		left: auto;
	}
	.slick-next
	{
		right: -10px;
	}
	[dir='rtl'] .slick-next
	{
		right: auto;
		left: -10px;
	}
}
@media screen and (max-width: 700px) {
	.slick-prev,
	.slick-next {
		width: 30px;
		height: 30px;
		margin-top: -15px;
	}
	.slick-prev:before,
	.slick-next:before {
		width: 30px;
		height: 30px;
	}
}


/* ==============================================
    banner-btn
============================================== */

#company.banner-btn .box {
	background: url("image/top_p_company.jpg") no-repeat center top / cover;
	padding: 100px 0;
}
#recruit.banner-btn .box {
	background: #db0f21 url("image/top_p_recruit.jpg") no-repeat center center / contain;
	padding: 100px 0;
}
#recruit.banner-btn {
	margin-bottom: 100px;
}

.banner-btn .detail {
	text-align: center;
}
.banner-btn .detail a {
	display: inline-block;
	color: #2d2d2d;
	border: 1px solid #595b5b;
	background: rgba(255,255,255,0.8);
	padding: 20px 90px;
	position: relative;
}
.banner-btn .detail a::after {
	content: "";
	display: inline-block;
	background: url("image/arrow1_r.svg") no-repeat 0 0 /contain;
	width: 16px;
	height: 16px;
	position: absolute;
	top: 50%;
	right: 10px;
	margin-top: -8px;
	transition: .2s;
}

.banner-btn .detail a:hover {
	text-decoration: none;
	opacity: 1;
}
.banner-btn .detail a:hover::after {
	transform: translateX(3px);
}

@media screen and (max-width: 1200px) {
	#recruit.banner-btn .box {
		background-size: cover;
		background-position: bottom right;
	}
}

@media screen and (max-width: 700px) {
	#company.banner-btn .box {
		background-size: 130% auto;
		padding: 80px 0 20px;
	}
	#recruit.banner-btn .box {
		background-size: contain;
		background-position: top right;
		padding: 100px 0 20px;
	}
}