@charset "utf-8";
/* home.css */

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* h3セット　　　　　　　                                           */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.h3_set {
	text-align: center;
	margin-bottom: 50px;
}
.h3_set h3 {
	font-family: "Cal Sans", sans-serif;
	font-size: 72px;
	line-height: 1.2em;
	color: #00B2FC;
}
.h3_set p {
	font-size: 24px;
	line-height: 1.2em;
	color: #838383;
	font-weight: 800;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* KV & メッセージ　　　　　　　                                           */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#first_area {
	background-image: url(../images/bg_maru_01.png),url(../images/bg_maru_02.png);
	background-repeat: no-repeat;
	background-position: -50px 60vh,right -50px bottom -50px;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* KV　　　　　　　                                           */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#kv_wrap {
	height: calc(100vh - 110px);
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

/* -- 採用ロゴ ----------------------------------------------- */
#kv_logo  {
	width: 200px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	height: 335px;
	z-index: 2;
}
#kv_logo img {
	width: 100%;
	height: auto;
}

/* -- 写真4枚 ----------------------------------------------- */
#kv {
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	height: 100%;
	background-image: url(../images/home_kv_bg.jpg);
	background-position: center center;
	background-size: 100% auto;
	background-repeat: repeat-y;
	border-radius: 52px;
	display: flex;
	width: 100%;
	position: relative;
}

/* 順番に表示 */
.kv_pic {
	width: 25%;
	height: 100%;
	opacity: 0;
	background-size: cover;
}
#kv_01 {
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
	-webkit-animation: kv_img 0.8s ease 1.5s 1 forwards;
	animation: kv_img 0.8s ease 1.5s 1 forwards;
	background-image: url(../images/home_kv_01.jpg);
}
#kv_02 {
	-webkit-animation: kv_img 0.8s ease 2s 1 forwards;
	animation: kv_img 0.8s ease 2s 1 forwards;
	background-image: url(../images/home_kv_02.jpg);
}
#kv_03 {
	-webkit-animation: kv_img 0.8s ease 2.5s 1 forwards;
	animation: kv_img 0.8s ease 2.5s 1 forwards;
	background-image: url(../images/home_kv_03.jpg);
}
#kv_04 {
	border-top-right-radius: 50px;
	border-bottom-right-radius: 50px;
	-webkit-animation: kv_img 0.8s ease 3s 1 forwards;
	animation: kv_img 0.8s ease 3s 1 forwards;
	background-image: url(../images/home_kv_04.jpg);
}
/*#logo2 {
	-webkit-animation: kv_img 0.3s ease 3.5s 1 forwards;
	animation: kv_img 0.3s ease 3.5s 1 forwards;
	width: 200px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	height: 335px;
	z-index: 2;
}
#logo2 img {
	width: 100%;
	height: auto;
}*/

@-webkit-keyframes kv_img {
  100% {
    opacity: 1;
  }
}
@keyframes kv_img {
  100% {
    opacity: 1;
  }
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* メッセージ　　　　　　                                           */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#message {
	margin-top: 100px;
}

/* -- 文章 ----------------------------------------------- */
#msg_text {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
}
#msg_text p {
	margin-bottom: 8px;
	font-feature-settings: "palt";
}
#tanikawa {
	text-align: right;
	margin-bottom: 0px;
	margin-top: 40px;
}

/* -- 写真 ----------------------------------------------- */
#msg_pic {
	width: 500px;
	margin-left: auto;
	margin-right: auto;
}
#msg_pic img {
	width: 100%;
	height: auto;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* 会社を知る　　　　　　　                                           */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#company_area {
	position: relative;
	z-index: 2;
	margin-top: -50px;
	padding-top: 100px;
	padding-bottom: 400px;
	background-image: url(../images/home_cmp_bg.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
}

/* -- スマホ画像 ----------------------------------------------- */
#cmp_sp_head {
	display: none;
}

/* -- タイトル ----------------------------------------------- */
#company_area .h3_set h3 {
	color: #FFFFFF;
}
#company_area .h3_set p {
	color: #FFFFFF;
}

/* -- ボタン ----------------------------------------------- */
#cmp_bt {
	width: 400px;
	margin-left: auto;
	margin-right: auto;
}
#cmp_bt a {
	display: block;
	height: 60px;
	color: #000000;
	text-decoration: none;
	text-align: center;
	line-height: 60px;
	background-color: #FFFFFF;
	border-radius: 30px;
	font-weight: 700;
	position: relative;
	padding-right: 40px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#cmp_bt a img {
	position: absolute;
	right: 20px;
	top: 24px;
	transition: transform 0.3s ease;
    transform: translateX(0px);
}
#cmp_bt a:hover img {
    transform: translateX(40px); 
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* 先輩の声　　　　　　　                                           */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#interview_area {
	padding-top: 150px;
	padding-bottom: 150px;
	background-image: url(../images/bg_maru_02.png),url(../images/bg_maru_01.png);
	background-repeat: no-repeat;
	background-position: 200px -50px,right 50px bottom 50px;
}
#interview_area a {
	text-decoration: none;
	webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
}
#interview_area a:hover {
	opacity: 0.8
}

/* -- slick-theme.css　カスタマイズ ----------------------------------------------- */
/* PREV・NEXT */
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  background-color: #434343;
}
.slick-prev:before {
  content:'PREV';
  color: #fff;
  opacity: 1;
  font-size: 20px;
}
.slick-next:before {
  content:'NEXT';
  color: #fff;
  opacity: 1;
  font-size: 20px;
}
.slick-prev {
	left: 0;
	z-index: 1;
	width: auto;
	height: auto;
	padding-top: 10px;
	padding-right: 20px;
	padding-left: 10px;
	padding-bottom: 15px;
	color: #fff;
	background-color: #000;
	transition: .4s;
	border-top-right-radius: 30px;
	border-bottom-right-radius: 30px;
	font-weight: 900;
}
.slick-next {
	right: 0;
	width: auto;
	height: auto;
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 20px;
	padding-bottom: 15px;
	background-color: #000;
	transition: .4s;
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
	font-weight: 900;
}

/* ドット */
.slick-dotted.slick-slider {
    margin-bottom: 55px;
}
.slick-dots {
    position: absolute;
    bottom: -50px;
}
.slick-dots li button:before {
    font-size: 20px;
}
.slick-dots li.slick-active button:before {
    opacity: 1.0;
    color: #00B2FC;
}

/* -- slick ----------------------------------------------- */
.slide {
	padding-left: 20px;
	padding-right: 20px;
}
.slide img {
	width: 500px;
	height: auto;
}

/* -- 青バック データエリア ----------------------------------------------- */
.intv_data {
	display: flex;
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
	width: 500px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: #333333;
	padding-top: 10px;
}

/* 職種、入社 */
.intv_info {
	width: 160px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-right: 15px;
	border-right: 6px solid #B7B7B7;
}
.intv_info h4 {
	font-size: 26px;
	font-weight: 800;
	line-height: 1.2em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-bottom: 8px;
}
.intv_info p {
	border-radius: 20px;
	font-size: 15px;
	line-height: 1em;
}

/* メッセージ */
.intv_lead {
	width: 325px;
	padding-left: 15px;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* 職場環境　　　　　　　                                           */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#kankyo_area {
	padding-bottom: 100px;
	margin-left: 50px;
	margin-right: 50px;
}
#kankyo_wrap {
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	border-radius: 50px;
	background-image: url(../images/home_kv_bg.jpg);
	background-repeat: repeat-y;
	display: flex;
}

/* -- テキスト ----------------------------------------------- */
#kankyo_text {
	width: 60%;
	text-align: center;
	padding-top: 100px;
	color: #FFFFFF;
}
#kankyo_text .h3_set h3 {
	color: #FFFFFF;
}
#kankyo_text .h3_set p {
	color: #FFFFFF;
}

/* ボタン */
#kankyo_bt {
	width: 500px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 80px;
}
#kankyo_bt a {
	display: block;
	height: 70px;
	line-height: 70px;
	text-decoration: none;
	color: #000000;
	font-weight: 700;
	background-color: #FFFFFF;
	border-radius: 35px;
	position: relative;
	webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
}
#kankyo_bt a:hover {
	background-color: #EDEDED;
}
#kankyo_bt a span {
	background-color: #00B2FC;
	color: #FFFFFF;
	width: 44px;
	height: 44px;
	display: block;
	line-height: 44px;
	border-radius: 22px;
	position: absolute;
	right: 20px;
	top: 13px;
}
#kankyo_bt a:hover span {
	transition: transform 0.7s;
    transform: rotate(360deg);
}

/* -- 写真 ----------------------------------------------- */
#kankyo_pic {
	width: 40%;
}
#kankyo_pic li {
	width: 250px;
	margin-left: auto;
	margin-right: auto;
}
#kankyo_pic li img {
	width: 100%;
	height: auto;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* エントリーボタン　　　　　　　                                           */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#entry_area {
	padding-bottom: 100px;
}
#entry_bt a {
	background-color: #000000;
	display: block;
	text-align: center;
	color: #FFFFFF;
	text-decoration: none;
	font-size: 24px;
	font-weight: 800;
	padding-top: 30px;
	padding-bottom: 32px;
	border-radius: 10px;
}
#entry_bt a:hover {
	animation: poyo .6s ease 0s 1 normal running none;
}
@keyframes poyo {
	from, to { transform: none; }
	10% { transform: scale(1.2); }
	40% { transform: scale(.9); }
	60% { transform: scale(1.04); }
	80% { transform: scale(.98); }
}
#entry_bt a:active {
	animation: push .6s;
}
@keyframes push {
	from, to { transform: none; }
	10% { transform: scale(.8); }
	40% { transform: scale(1.1); }
	60% { transform: scale(.96); }
	80% { transform: scale(1.02); }
}






















/* ↓↓↓↓↓↓↓↓↓↓ ---以下スマホ--- ↓↓↓↓↓↓↓↓↓↓ */


@media screen and (max-width: 768px) {

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* h3セット　　　　　　　                                           */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.h3_set {
	margin-bottom: 40px;
}
.h3_set h3 {
	font-size: 40px;
	line-height: 1.2em;
}
.h3_set p {
	font-size: 20px;
	line-height: 1.2em;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* KV & メッセージ　　　　　　　                                           */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#first_area {
	background-image: url(../images/bg_maru_01.png);
	background-repeat: no-repeat;
	background-position: -50px 80vh;
	background-size: 75% auto;
	padding-top: 15px;
}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* KV　　　　　　　                                           */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#kv_wrap {
	height: calc(100vh - 160px);
	background-image: url(../images/home_kv_bg_sp.jpg);
	background-position: center center;
	background-repeat: repeat;
	border-radius: 30px;
	margin-left: 15px;
	margin-right: 15px;
	background-size: auto 100%;
}

/* -- 採用ロゴ ----------------------------------------------- */
#kv_logo  {
	width: 120px;
	height: 201px;
}

/* -- 写真4枚 ----------------------------------------------- */
#kv {
	max-width: 100%;
	background-image: url(../images/home_kv_bg_sp.jpg);
	background-size: auto 100%;
	background-repeat: repeat-x;
	border-radius: 32px;
	display: inherit;
	width: 100%;
}

/* 順番に表示 */
.kv_pic {
	width: 100%;
	height: 25%;
	opacity: 0;
}
#kv_01 {
	border-top-left-radius: 30px;
	border-bottom-left-radius: 0px;
	background-image: url(../images/home_kv_bg_sp_01.jpg);
	border-top-right-radius: 30px;
}
#kv_02 {
	background-image: url(../images/home_kv_bg_sp_02.jpg);
}
#kv_03 {
	background-image: url(../images/home_kv_bg_sp_03.jpg);
}
#kv_04 {
	border-top-right-radius: 0px;
	border-bottom-right-radius: 30px;
	background-image: url(../images/home_kv_bg_sp_04.jpg);
	border-bottom-left-radius: 30px;
}
	
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* メッセージ　　　　　　                                           */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#message {
	margin-top: 50px;
}

/* -- 文章 ----------------------------------------------- */
#msg_text {
	width: 100%;
	margin-bottom: 20px;
}
#tanikawa {
	margin-top: 30px;
}

/* -- 写真 ----------------------------------------------- */
#msg_pic {
	width: 80%;

}
	
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* 会社を知る　　　　　　　                                           */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#company_area {
	margin-top: -50px;
	padding-top: 0px;
	padding-bottom: 60px;
	background-image: none;
}
	
/* -- スマホ画像 ----------------------------------------------- */
#cmp_sp_head {
	display: inherit;
	margin-bottom: 20px;
}
#cmp_sp_head img {
	width: 100%;
	height: auto;
}
	
/* -- タイトル ----------------------------------------------- */
#company_area .h3_set h3 {
	color: #00b2fc;
}
#company_area .h3_set p {
	color: #00b2fc;
}

/* -- ボタン ----------------------------------------------- */
#cmp_bt {
	width: calc(100% - 60px);
	margin-left: 30px;
	margin-right: 30px;
}
#cmp_bt a {
	background-color: #00b2fc;
}
#cmp_bt a:hover img {
    transform: translateX(10px); 
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* 先輩の声　　　　　　　                                           */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#interview_area {
	padding-top: 80px;
	background-image: url(../images/bg_maru_02.png),url(../images/bg_maru_01.png);
	background-position: -20px 0px,right -50px bottom 50px;
	background-size: 300px auto,300px auto;
}

/* -- slick-theme.css　カスタマイズ ----------------------------------------------- */
/* PREV・NEXT */
.slick-prev:before {
  font-size: 16px;
}
.slick-next:before {
  font-size: 16px;
}

/* ドット */
.slick-dotted.slick-slider {
    margin-bottom: 50px;
}
.slick-dots {
    position: absolute;
    bottom: -40px;
}

/* -- slick ----------------------------------------------- */
.slide img {
	width: 100%;
	height: auto;
}

/* -- データエリア ----------------------------------------------- */
.intv_data {
	display: inherit;
	width: 100%;
}

/* 職種、入社 */
.intv_info {
	width: 100%;
	padding-right: 0px;
	border-right-style: none;
	text-align: center;
	border-bottom: 2px solid #838383;
	margin-bottom: 10px;
	padding-bottom: 10px;
}
.intv_info h4 {
	font-size: 24px;
	line-height: 1.2em;
}
.intv_info p {
	font-size: 14px;
}

/* メッセージ */
.intv_lead {
	width: 100%;
	padding-left: 0px;
	text-align: center;
}
	
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* 職場環境　　　　　　　                                           */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#kankyo_area {
	padding-bottom: 80px;
	margin-left: 0px;
	margin-right: 0px;
}
#kankyo_wrap {
	max-width: calc(100% - 40px);
	border-radius: 20px;
	display: inherit;
	background-size: 100% auto;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 100px;
	width: calc(100% - 40px);
	position: relative;
}

/* -- テキスト ----------------------------------------------- */
#kankyo_text {
	width: 100%;
	padding-top: 50px;
	margin-bottom: 20px;
}

/* ボタン */
#kankyo_bt {
	width: calc(100% - 40px);
	position: absolute;
	bottom: 20px;
	left: 0px;
	right: 0px;
	margin-left: auto;
	margin-right: auto;
}
#kankyo_bt a {
	height: auto;
	line-height: 1.4em;
	border-radius: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}
#kankyo_bt a span {
	background-color: #00B2FC;
	color: #FFFFFF;
	width: 44px;
	height: 44px;
	display: block;
	line-height: 44px;
	border-radius: 22px;
	position: absolute;
	right: 20px;
	top: 10px;
}

/* -- 写真 ----------------------------------------------- */
#kankyo_pic {
	width: 100%;
}
#kankyo_pic ul {
	display: flex;
	flex-wrap: wrap;
}
#kankyo_pic li {
	width: 50%;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* エントリーボタン　　　　　　　                                           */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#entry_area {
	padding-bottom: 80px;
}
#entry_bt a {
	font-size: 20px;
	padding-top: 30px;
	padding-bottom: 32px;
}

}