@charset "utf-8";

*{
  box-sizing:border-box;
}

body{
  margin:0;

}


/*変数*/
:root{
	--basecolor: #edffe9 ; /*基本色*/
	--sabcolor: #f2ffec; /*サブカラー*/
}

img{
  max-width:100%;
  vertical-align:bottom;
}


p{
	margin:0
}

h3{
	margin:0;
}

a{
	/* color: #55321f; */
	text-decoration: none;
}

a:visited{
    /* color: #000; */
}

a:hover{
  /*filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;*/
}
.tac{
	text-align: center;
}
.tal{
	text-align: left;
}
.tar{
	text-align: right;
}
.mg0{
	margin: 0 auto;
}


.margin1{
	margin:10px
}
.margin2{
	margin:20px
}
.margin3{
	margin:30px
}
.margin4{
	margin:40px
}
.margin5{
	margin:50px
}
.mgb1{
	margin-bottom:10px
}
.mgb2{
	margin-bottom:20px
}
.mgb3{
	margin-bottom:30px
}
.mgb4{
	margin-bottom:40px
}
.mgb5{
	margin-bottom:50px
}
.mgt1{
	margin-top:10px
}
.mgt2{
  margin-top:20px
}
.mgt3{
	margin-top:30px
}
.mgt4{
	margin-top:40px
}
.mgt5{
	margin-top:50px
}
.mgl1{
	margin-left:10px
}
.mgl2{
	margin-left:20px
}
.mgl3{
	margin-left:30px
}
.mgl4{
	margin-left:40px
}
.mgl5{
	margin-left:50px
}
.mgr1{
	margin-right:10px
}
.mgr2{
  margin-right:20px
}
.mgr3{
	margin-right:30px
}
.mgr4{
	margin-right:40px
}
.mgr5{
	margin-right:50px
}
.n_mgt5{
	margin-top:5%
}

.padding1{
	padding:10px
}
.padding2{
	padding:20px
}
.padding3{
	padding:30px
}
.padding4{
	padding:40px
}
.padding5{
	padding:50px
}
.pdt1{
	padding-top:10px
}
.pdt2{
  padding-top:20px
}
.pdt3{
  padding-top:30px
}
.pdt4{
  padding-top:40px
}
.pdt5{
	padding-top:50px
}
.pdt6{
	padding-top:60px
}
.pdt7{
	padding-top:70px
}
.pdt8{
	padding-top:80px
}
.pdt9{
	padding-top:90px
}
.pdt10{
	padding-top:100px
}
.pdb1{
	padding-bottom:10px
}
.pdb2{
  padding-bottom:20px
}
.pdb3{
  padding-bottom:30px
}
.pdb4{
  padding-bottom:40px
}
.pdb5{
	padding-bottom:50px
}
.pdb6{
	padding-bottom:60px
}
.pdb7{
	padding-bottom:70px
}
.pdb8{
	padding-bottom:80px
}
.pdb9{
	padding-bottom:90px
}
.pdb10{
	padding-bottom:100px
}
.pdr5{
	padding-right:30% ;

}

/*----------
特殊例
-----------*/
/*----------
マーカー下線
----------*/
.marker_line {
    background: linear-gradient(transparent 60%, var(--basecolor) 0%);
}
.marker_line_pink{
	background: linear-gradient(transparent 50%, #ff88bb 50%)
}
/*---------
 題字下下線
 ----------*/
.hr-pink {
    border-top: 2px solid #f8b;
    width: 80px;
	margin: 0 auto;
}
/*--------------
矢印が右に移動する
----------------*/
.btnarrow4{
    /*矢印と下線の基点とするためrelativeを指定*/
	position: relative;
    /*形状*/
    display:block;
    color: #333;
    text-decoration: none;
    outline: none;
}
/*矢印と下線の形状*/
.btnarrow4::before{
    content: '';
    /*絶対配置で下線の位置を決める*/
	position: absolute;
    bottom:-8px;
    left:0;
    /*下線の形状*/    
    width: 60%;
    height: 1px;
	background:#333;
    /*アニメーションの指定*/
    transition: all .3s;
}
.btnarrow4::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
	position: absolute;
    bottom:-3px;
    right:40%;
    /*矢印の形状*/    
    width: 15px;
    height:1px;
	background:#333;
    transform: rotate(35deg);
    /*アニメーションの指定*/
    transition: all .3s;
}
/*hoverした際の移動*/
.btnarrow4:hover::before{
    left:10%;
}
.btnarrow4:hover::after{
    right:30%;
}

/*-------------
ボタン共通設定
--------------*/
.btn06{
    /*矢印の基点とするためrelativeを指定*/
	position: relative;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
	color:#000000;
    padding: 10px 40px 10px 30px;
    text-align: right;
    outline: none;
	border: 1px solid #ff88bb ;
	background-color: #ff88bb;
    /*アニメーションの指定*/
    transition: ease .2s;
}

.btn06:hover{
	color: #ff88bb;
	background-color: #fff ;
	border: 1px solid #ff88bb;
}
/*--------------
矢印が右に移動
--------------*/
.btnarrow1::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
	position: absolute;
    top:42%;
    right: 20px;
    /*矢印の形状*/
    width: 5px;
    height: 5px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    transform: rotate(45deg);
    /*アニメーションの指定*/
    transition: all .3s;
}

/*hoverした際の移動*/
.btnarrow1:hover::after{
    right: 11px;
}

/*------------
きらっと光る
------------*/
.btnshine{
    /*キラッと光る基点とするためrelativeを指定*/
	position: relative;
    /*ボタンの形状*/	
	display:inline-block;

    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    outline: none;
    overflow: hidden;
}

/*キラッと光る*/
.btnshine::before {
	content: '';
    /*絶対配置でキラッと光るの位置を決める*/
	position: absolute;
	top: 0;
	left: -75%;
    /*キラッと光る形状*/
    width: 50%;
	height: 100%;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	transform: skewX(-25deg);
}

/*hoverした際の移動のアニメーション*/
.btnshine:hover::before {
	animation: shine 0.7s;
}

@keyframes shine {
	100% {
		left: 125%;
	}
}

/*-------------
 文字animation
-------------*/
@-webkit-keyframes passing-bar{
	0% {
		left: 0;
		right: auto;
		width: 0;
	}
	50% {
		left: 0;
		right: auto;
		width: 100%;
	}
	51% {
		left: auto;
		right: 0;
		width: 100%;
	}
	100% {
		left: auto;
		right: 0;
		width: 0;
	}
}
@keyframes passing-bar{
	0% {
		left: 0;
		width: 0;
	}
	50% {
		left: 0;
		width: 100%;
	}
	51% {
		left: 0;
		width: 100%;
	}
	100% {
		left: 100%;
		width: 0;
	}
}
@-webkit-keyframes passing-txt{
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes passing-txt{
	0% { opacity:0; }
	50% { opacity:0; }
	100% { opacity:1; }
}
/* css */
.passing .passing-box {
	display: block;
	text-align: center;
}
.passing .passing-bar {
	position: relative;
	display: inline-block;
	/*　後ほど解説　*/
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.passing .passing-bar:before {
	content: '';
	display: inline-block;
	width: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	/* 任意の値 */
	background: #11b319;
}
.passing .passing-txt {
	opacity: 0;
	/* 後ほど解説 */
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	/* 任意の値 */
	font-size: 3vw;
	font-weight: bold;
	line-height: 1.5;
}
.passing.move .passing-bar:before {
	-webkit-animation: passing-bar 1s ease 0s 1 normal forwards;
	animation: passing-bar 1s ease 0s 1 normal forwards;
}
.passing.move .passing-txt {
	-webkit-animation: passing-txt 0s ease .5s 1 normal forwards;
	animation:passing-txt 0s ease .5s 1 normal forwards;
}



/*------------*/

.flex{
	display: flex;
}
.flex_wrap_reverse{
	display: flex;
}

/*--------------------------------
       ここまでtemplate
---------------------------------*/
/*--------- top 幅規定とか--------*/

.top_menu_bar{
    top: 0px;
    right: 0px;
	z-index: 100;
	margin-bottom: 10px;
	position: fixed;
	width: 100%;
	background-color: #fffFFF50;
	padding: 10px 25px;
	/*background-repeat:no-repeat ;
	background-position:right 60% top -15%;*/
}
.contents_box{
	width: 100%;

}
.contents_box_2{
	width: 100%;
	padding-right: 100px;

}
.contents_box_3{
	width: 100%;


}

/*--------- menu bar css --------*/

.menu_back{
	position: relative;
	display: flex;
}
.logo_design{
	width: 20%;
	padding: 0 20px 0 0px;
	text-align: right;
}
.logo_design span{
	font-size: 0.8vw;
	display: inline-block;
	letter-spacing: 3px;
	border-bottom: 1px solid;

}
.logo_design p{
	font-size: ;
	font-weight: bold;
	letter-spacing: 5;
	/*writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
	-webkit-writing-mode:vertical-rl;*/ 
}
.logo_design h2{
	margin: 0;
	font-size: 3vw;
	letter-spacing: 5px;

}

.menu_box{
	width: 80%;
	font-size: 1.4vw;
	font-weight: bold;

}
.menu_box a{
	margin: 15px 10px;
	letter-spacing: 2px;
	position: relative;
	display: inline-block;
	transition: .3s;
}
.menu_box a::after{
	position: absolute;
	bottom: 0;
	left: 50%;
	content: '';
	width: 0;
	height: 2px;
	background-color: #033d0f;
	transition: .3s;
	transform: translateX(-50%);
}
.menu_box a:hover::after{
	width: 100%;
}
.baner{
	margin-top:40px ;
}
.baner img{
	margin: 10px 0;
}
.sen_1{
	border-left:1px solid;
	height: 200px;
	position: absolute;
	bottom: -300;
	right: 50%;
}


/*--ハンバーガーメニュー--*/

nav {
	display: block;
	position: fixed;
	top: 0;
	left: -300px;/*左からmenuを出したければleftに変更*/
	bottom: 0;
	width: 300px;/*menuの幅はここで規定*/
	background: #ffffff;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transition: all .5s;
	z-index: 3;
	opacity: 0;
  }
  .open nav {
	left: 0;/*左からmenuを出したければleftに変更*/
	opacity: 1;
  }
  nav .inner {
	padding: 25px;
  }
  nav .inner ul {
	list-style: none;
	margin: 0;
	padding: 0;
  }
  nav .inner ul li {
	position: relative;
	margin: 0;
	border-bottom: 1px solid #333;/*menuに線で区切り*/

  }
  nav .inner ul li a {
	display: block;
	color: #333;
	font-size: 14px;
	padding: 1em;
	text-decoration: none;
	transition-duration: 0.2s;
  }
  nav .inner ul li a:hover {
	background: #e4e4e4;
  }
  /*============
  .toggle_btn
  =============*/
  /*押すところのspanのcss*/
  .btn_back{
	  background-color: #55321f;
	  padding: 3px;
	  position: fixed;
	  top: 12px;
	  left: 12px;
	  z-index: 3;
	  border-radius: 5px;
  }
  .toggle_btn {
	display: block;
	position: relative;
	width: 28px;
	height: 28px;
	transition: all .5s;
	cursor: pointer;
	}
  .toggle_btn span {
	display: block;
	position: absolute;
	left: 0;
	width: 27px;
	height: 2px;
	background-color:#ffffff;
	border-radius: 4px;
	transition: all .5s;
	}
  .toggle_btn span:nth-child(1) {
	top: 5px;
	}
  .toggle_btn span:nth-child(2) {
	top: 13px;
	}
  .toggle_btn span:nth-child(3) {
	bottom: 5px;
	}
  .open .toggle_btn span {
	background-color: #fff;
  }
  .open .toggle_btn span:nth-child(1) {
	-webkit-transform: translateY(8px) rotate(-315deg);
	transform: translateY(8px) rotate(-315deg);
  }
  .open .toggle_btn span:nth-child(2) {
	opacity: 0;
  }
  .open .toggle_btn span:nth-child(3) {
	-webkit-transform: translateY(-8px) rotate(315deg);
	transform: translateY(-8px) rotate(315deg);
  }
  nav {
	display: block;
	position: fixed;
	top: 0;
	left: -300px;/*左からmenuを出したければleftに変更*/
	bottom: 0;
	width: 300px;/*menuの幅はここで規定*/
	background: #ffffff;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transition: all .5s;
	z-index: 3;
	opacity: 0;
  }
  .open nav {
	left: 0;/*左からmenuを出したければleftに変更*/
	opacity: 1;
  }
  nav .inner {
	padding: 50px 25px;
  }
  nav .inner ul {
	list-style: none;
	margin: 0;
	padding: 0;
  }
  nav .inner ul li {
	position: relative;
	margin: 0;
	border-bottom: 1px solid #333;
  }
  nav .inner ul li a {
	display: block;
	color: #333;
	font-size: 17px;
	padding: 1em;
	text-decoration: none;
	transition-duration: 0.2s;
	}
  nav .inner ul li a:hover {
	background: #e4e4e4;
  }
  @media screen and (max-width: 767px) {
	nav {
	  left: -220px;/*出したときの挙動に影響*/
	  width: 220px;/*menuの幅はここで規定*/
	}
  }
  
  /*============
  #mask
  =============*/
  #mask {
	display: none;
	transition: all .5s;
  }
  .open #mask {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: .8;
	z-index: 2;
	cursor: pointer;
  }




/*----------- 横からでてくるやつ -------------*/
/*#sslink{
	cursor: pointer;
    position: fixed;
    z-index: 9999;

}
#sslink a:first-child{
	display: block;
	width: 150px;
	border-left:6px solid #ffc65d;
	background-color: #fffde6;
	padding: 20px ;
	margin-bottom: 50px;
}
#sslink a:nth-child(2){
	display: block;
	width: 150px;
	border-left:6px solid #ff5555;
	background-color: #ffeee7;
	padding: 20px ;
}
#sslink a{
	transition: all 0.2s;
}
#sslink a:hover{
	transform: translate(-50px, 0);
}*/
  
  
/*----------- contentsここから --------------*/
.recruit_top{
position:relative
}
#Vegas_slider {
    width: 100%;
    height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
@media(max-width: 1065px){
	#Vegas_slider {
		/* margin-top:-13px; */
	}	
}

.recruit_top_sentence{
	position:absolute;
	bottom:14%;
	left:6%;
	color:#fff
}
.recruit_top_sentence h1{
	font-size: calc( 3vw + 10px );
}
.wrap{
	max-width: 1360px;
	margin: 0 auto;
}
.r_top{
	width: 100%;
	margin-top:60px ;
	position: relative;
}
.r_top::after{
	content: "";
	position: absolute;
	bottom: -16%;
	left: 8%;
	width: 300px;
	height: 200px;
	background: #ff88bb;

}
/*ceo_massage*/
.ceo_massage{
	margin: 250px auto 0;
	position: relative;
	max-width:1600px;
}
/*題字*/
.daiji{
	display: block;
	padding: 50px 0 0;
	/*background: #f7f7f7;*/
	z-index: 10;
}
.messe_daiji {
    text-align: center;
    padding-top: 50px;
}
.messe_daiji p {
	position: relative;
    font-size: calc(4vw + 25px);
    margin: 40px 0 20px;
    color: #000000;
	text-align: left;
}
.messe_daiji P::after{
	content: "";
	position: absolute;
	bottom: 20px;
	left: -30px;
	width: 70px;
	height: 60px;
	background: #ff88bb;
	z-index: -1;
}

/*interview*/
.interview{
	margin:150px auto;
}
.interview .tac{
	    font-size: calc(4vw + 25px);
	    color:gray
}
.interview_wrap{
	display:flex;
}
.interview_box{
	margin:0 1%;
	display:block;
}
.interview_img img{
	z-index:-10;
}
.interview_name{
	position:relative;
	width:90%;
	padding:10% 8% 8%;
	display: block;
	margin:-50px auto 0;
	background-color:#fff;
	z-index:1;
}
.interview_name h3{
	background:none;
	display:block;
	position:relative;
	padding:0 0 10px;
	margin:0 0 5px;
	border-radius:unset
}
.interview_name h3:before,
.interview_name h3:after{
	content:'';
    /*絶対配置で線の位置を決める*/
	position:absolute;
	z-index:1;
	bottom:0;
	left:0;
     /*線の形状*/   
	background:#f8b;
	width:100%;
	height:2px;
    /*アニメーションの指定*/
	transition:all 0.5s ease-in-out;
}
.interview_name h3:after{
	width:0;
	background:#ccc;
}
.interview_box:hover .interview_name h3:after{
	width:100%
}

/*vision*/
.vision2{
	max-width: 1100px;
	margin: 150px auto 0;
}
.messe_daiji_right p {
	position: relative;
    font-size: calc(4vw + 25px);
    margin: 40px 0 20px;
    color: #000000;
	text-align: right;
}
.messe_daiji_right P::after{
	content: "";
	position: absolute;
	bottom: 20px;
	right: 15%;
	width: 70px;
	height: 60px;
	background: #ff88bb;
	z-index: -1;
}
.vision_box,.culture_box{
	width: 47%;
	margin: 0 3% 0 0;
}
/*矢印ボタン*/

.btnarrow_r{
	display:block;
	position:relative;
}
.btnarrow_r span:before{
	content:"";
	position:absolute;
	bottom:-40px;
	right:50px;
	width:25%;
	height:2px;
	background:#000;
	transition:0.4s
}
.btnarrow_r span:after{
		content: '';
    /*絶対配置で矢印の位置を決める*/
	position: absolute;
    bottom:-48px;
    right:51px;
    /*矢印の形状*/    
    width: 15px;
    height:15px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    transform: rotate(45deg);
    transition:0.4s
}
.btnarrow_r:hover span:after,
.btnarrow_r:hover span:before{
	right:40px
}
/**/
figure.snip1132 .figcaption_vc {
  position: absolute;
  bottom:10%;
  left: 5%;
  width: 90%;
}
.figcaption_vc{
	color: #fff;
}
.figcaption_vc h2{
	margin: 0 0 10px;
	line-height: 1;
	font-size: calc(4.5vw + 10px);
	transform:0.4s
}

.figcaption_vc p{
	line-height:1;
	font-size:calc(1vw + 10px)
}
.figcaption_vc span{
	display:block;
	position:relative;
    /*リンクの形状*/ 
    text-decoration: none;
    outline: none;
}
.figcaption_vc span:before{
	content:"";
	position:absolute;
	bottom:-20px;
	right:0px;
	width:70%;
	height:2px;
	background:#fff;
	transition:0.4s
}
.figcaption_vc span:after{
	content: '';
    /*絶対配置で矢印の位置を決める*/
	position: absolute;
    bottom:-28px;
    right:2px;
    /*矢印の形状*/    
    width: 15px;
    height:15px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    	transition:0.4s
}

figure.snip1132:hover .figcaption_vc h2{
	color:#ff88bb
}
figure.snip1132:hover .figcaption_vc span:after{
	right:-10px;
	border-top: 2px solid #ff88bb;
    border-right: 2px solid #ff88bb;
}
figure.snip1132:hover .figcaption_vc span:before{
	right:-10px;
	background:#ff88bb
}
					


/*Introduction*/
.introduction{
	margin: 150px 0 0;
}
/*.new_employee_box1::after{
	content: "";
    position: absolute;
    display: block;
    width: 15%;
    height: 35%;
    bottom: 00%;
    left: 35%;
	background-color: #d30f10;

}*/
.new_employee{
	display: flex;
	width: 95%;
	align-items: center;
	margin: 10% 0 0%;
	padding: 3% 5% 4%;
	position: relative;
	background: linear-gradient(to left,#fff 20% ,#efefef 20% );
}
.new_employee:nth-child(3){
	margin: 8% 0 0;
}
.new_employee:nth-child(2n-1){
	background: linear-gradient(to left,#efefef 80% ,#FFF 80% );
}
.new_employee_box1{
	width: 40%;
	margin: 5% 0% 0 5%;
	padding: 3%;
	color: #000;
	/* border: 1px solid #d0d0d0; */
	box-shadow:3px 3px 5px #c3c3c3;
	background: #fff;
}
.new_employee_box1 h2{
	margin: 0;
}
.new_employee_box1 p{
	margin: 10px 0;
	font-size: 92%;
}
.new_employee_box2{
	width: 68%;
	text-align: center;
}
.new_employee_box2:nth-child(2n-1){
	text-align: right;
}
.new_employee_box3{
	width: 40%;
	margin: 0 5% 0 0%;
	padding: 2%;
	align-self: flex-end;
	border: 3px solid #fff;
	color: #000;
	background: #fff;
		box-shadow:3px 3px 5px #c3c3c3;
	
}
.new_employee_box3 h2{
    margin:0;
}
.new_employee_box3 p{
	margin: 10px 0;
	font-size: 92%;
}
/*logo_svg*/
.logo_svg{
	margin: 250px 0 120px;

}
.svg_under{
	margin:50px 30px ;
	font-size: 21px;
	color: #ff88bb;
	letter-spacing: 4px;
	font-weight: bold;
	line-height: 2;

}
/*recruitment*/
.recruitment{
	max-width:1300px;
	margin:0 auto;
}
.recruitment_p{
    font-size: 92%;
}
.banner_wrap{
	margin: 100px auto 50px;
	position: relative;
}
.banner_wrap::after{
	content: "";
    position: absolute;
    top: -20%;
    right: 8%;
    width: 150px;
    height: 100px;
    background: #ff88bb;

}
.banner_wrap::before{
	content: "";
    position: absolute;
    bottom: -16%;
    left: 7%;
    width: 250px;
    height: 150px;
    background: #ff88bb;

}
/**/
figure.snip1132 {
  position: relative;
  overflow: hidden;
  margin: 10px auto;
  width: 100%;
  color: #000;
  max-width: 1000px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

figure.snip1132 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease-in-out;
  transition: all 0.45s ease-in-out;
}

figure.snip1132 img {
  max-width: 100%;
  position: relative;
  opacity: 1;
}

figure.snip1132 .figcaption {
  position: absolute;
    top: 55%;
    left: 5%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  width: 90%;
}
.figcaption{
	color: #000;
}
.figcaption h2{
	margin: 0 0 10px;
	line-height: 1;
	font-size: calc(2vw + 15px)

}
figure.snip1132 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}
figure.snip1132:hover img,
figure.snip1132.hover img {
  opacity: 1;
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
}
figure.snip1132:hover .figcaption h2{
	color:#000
}


/**/
.entry_btns {
    display: flex;
    max-width: 900px;
    margin: 20px auto;
}
.mynavi_btn{
	width: 50%;
	text-align: right;
	padding-right: 2%;

}
.mynavi_btn img{
	box-shadow: 2px 2px 2px #02020244;
}
.entry_btns p{
	width: 50%;
	font-size: 21px;
	align-self: center;
}
.entry_btns p span{
	display: block;
	font-size: 15px;
}
/*career_recruit*/
.career_recruit{
	margin: 100px auto;
	padding: 3%;
	background: #ececec;
}
.career_recruit h2{
	text-align: center;
	margin: 0 0 20px;
	font-size: calc(2vw + 15px);
}
.banner_wrap2{
	margin: 0px auto ;
	display: flex;
	flex-wrap: wrap;
}

.banner_wrap2 .btn {
  position: relative;
  display: inline-block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
}

.banner_wrap2 a.btn-flat {
		width: 30%;
  overflow: hidden;
  	margin: 1% 1.5%;
	padding: 4% 4% ;
	font-size: 21px;
  color: #000;
  border-radius: 0;
  background: #fff;
}
.banner_wrap2 a.btn-flat:hover{
	color:#fff
}


.banner_wrap2 a.btn-flat span {
  position: relative;
}


.banner_wrap2 a.btn-flat:before {
  position: absolute;
  top: 0;
  left: 5px;
  width: 120%;
  height: 400%;
  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-98%) translateY(-70%) rotate(135deg);
  transform: translateX(-90%) translateY(-70%) rotate(135deg);
  background: #f8b;
}

.banner_wrap2 a.btn-flat:hover:before {
  -webkit-transform: translateX(-9%) translateY(-25%) rotate(135deg);
  transform: translateX(-2%) translateY(-25%) rotate(135deg);
}
.banner_wrap2 a span img{
	width: 12%;
	margin: 0 10px 0 0;
}
.entry_btns div{
	width: 50%;
	text-align: right;
	padding-right: 2%;
}
.career_entry_btn{
	color: #000;
	text-align: center;
	display: inline-block;
    background-color: #fff;
    padding: 5px 10px;
    margin-bottom: 5px;
    border: 1px solid;
    text-decoration: none;
	box-shadow: 2px 2px 2px #02020244;
}

/*contact*/
.recruit_contact{
	margin: 100px 0 ;
}
.recruit_contact_wrap{
 border: 1px solid;
 padding: 1% 0;
 text-align: center;
 max-width: 900px;
 margin: 0 auto;
}


/*--------svgなど--------*/

/*SVGの横幅*/
.svganimeblock{
	max-width:800px;
	width:100%;
	margin: 150px auto 0;
}

/*SVGの可変*/
.svganimeblock svg{
	width:100%;
}

/*アニメーション前のパスの指定*/
.svganimeblock svg path {
	fill-opacity: 0;/*最初は透過0で見えない状態*/
	transition: fill-opacity .8s;/*カラーがつく際のアニメーション0.5秒で変化*/
	fill: none;/*塗りがない状態*/
	stroke: #ff88bb;/*線の色*/
}

/*アニメーション後に.doneというクラス名が付与された時のパスの指定*/
.svganimeblock svg.done path{
	fill: #000000;/*塗りの色*/
	fill-opacity: 1;/*透過1で見える状態*/
	stroke: none;/*線の色なし*/
}
.svganimeblock svg.done .red{
	fill: #ff88bb;/*塗りの色*/
	fill-opacity: 1;/*透過1で見える状態*/
	stroke: #ff88bb;/*線の色なし*/
	z-index: -1;
}

/*=== 9-1-2 丸が動いてスクロールを促す ====*/

/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	top:50px;
	left:8%;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
	position: absolute;
	left:10px;
	bottom:10px;
    /*テキストの形状*/
	color: rgb(0, 0, 0);
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
	width:10px;
	height:10px;
	border-radius: 50%;
	background:rgb(0, 0, 0);
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:100px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
	100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
    /*線の形状*/
	width:2px;
	height: 100px;
	background:rgb(0, 0, 0);
}

/*エントリーリンク*/
.entry_back{
	background:url(/images/recruit/2021/entry_link_back.jpg) ;
	padding:5% 0 7%
}
.entry_link_wrap{
	max-width: 1300px;
	margin:0 auto;
}
.entry_link_wrap h2{
	text-align:center;
	color:#df5263;
	font-size: calc(2vw + 15px);
	margin-bottom:40px

}
.entry_link_wrap h2 span{
	display:block;
	font-size:20px

}
.entry_link_btn{
	width:42%;
	margin:0 4%;
	padding: 3% 0;
	background:#fff;
	transition:0.3s;
}
.entry_link_btn .flex{
  justify-content: space-between;
  align-items:center
}
.entry_link_btn .flex p:nth-child(1){
	font-weight:bold;
	font-size: calc(1.5vw + 10px);
	padding-left:30px;
	transition:0.3s
}
.entry_link_btn .flex p:nth-child(2){
	padding-right:20px
}
.entry_link_btn:hover {
	background:#f8b
}
.entry_link_btn:hover .flex p:nth-child(1){

}
.entry_link_btn:hover .flex p:nth-child(2){
	color:#fff
}




/*--------------SP--------------■■■■■■■■■■■*/
@media(max-width:1100px){



	/*-------- contact page ----------*/



}
@media(max-width:950px){
	.r_top {
		margin-top: 0px;
	}
	.r_top::after{
		left:6%;
		bottom: -2px;
		width: 90px;
		height: 100px;
	}
	/*ceo_massage*/
	.messe_daiji {
		padding-top: 0px;
	}
	.ceo_massage{
		margin: 60px 0 0;
	}
	.messe_daiji P::after {
		bottom: 28px;
		left: -6px;
		width: 30px;
		height: 25px;
	}
	.message{
		width: 100%;
	}
	.message_img{
		width: 100%;
	}
	/*vision*/
	.messe_daiji_right P::after {
		bottom: 10px;
		right: 25%;
		width: 30px;
		height: 30px;
	}
	.vision2 {
		margin: 100px 0 0;
	}
	.vision_box{
		width: 97%;
		margin: 0 3% 0 0;
	}
	.company_vision{
		width: 100%;
		font-size: large;
		font-size: 92%;
	}
	/*Introduction*/
	.introduction{
		margin: 0px 0 0;
	}
	.new_employee {
		flex-wrap:wrap-reverse;
	}
	.new_employee:nth-child(2n) {
		flex-wrap:wrap;
	}
	.new_employee_box1 {
		width: 95%;
		margin: -0% 0% 0 5%;
	}
	.new_employee_box2 {
		width: 100%;
		text-align: left;
	}
	.new_employee_box2 img{
		width:90%;
    }
    .new_employee_box3 {
		width: 95%;
		margin: 0 5% 0 0%;
	}
	/*svg*/
	.logo_svg {
		margin: 0px 0 10px;
	}
	.svganimeblock {
		margin: 40px auto 0;
	}
	.svg_under {
		margin: -30px 20px 0;
		font-size: 18px;
		color: #ff88bb;
		letter-spacing: 3px;
		font-weight: bold;
		line-height: 2;
	}
	/**/
	.banner_wrap::after {
		top: -20%;
		right: 4%;
		width: 60px;
		height: 40px;
	}
	.banner_wrap::before {
		bottom: -19%;
		left: -1%;
		width: 100px;
		height: 50px;
	}
	.banner_wrap2 a.btn-flat {
		width: 47%;
		overflow: hidden;
		margin: 1% 1.5%;
		padding: 4% 4%;
       font-size: 92%;
	}
	.banner_wrap2 a.btn-flat:before {
		width: 120%;
	}
	.banner_wrap{
		margin: 50px auto 50px;
	}
	.career_recruit {
		margin: 30px auto;
	}
	.entry_btns {
		flex-wrap:wrap;
		max-width: 900px;
		margin: 20px auto;
	}
	.mynavi_btn {
		width: 100%;
		text-align: center;
		padding-right: 0%;
	}
	.entry_btns p {
		width: fit-content;
		margin:0 auto;
		font-size: 94%;
	}
	.entry_btns div {
		width: 100%;
		text-align: center;
		padding-right: 2%;
	}



}