/*Theme Name: 株式会社アイビーコム　採用サイト*/
@charset "utf-8";

@media screen and (min-width:751px),print{
/*-------------------------------------------
all
-------------------------------------------*/
body {
  font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;
  margin: 0 auto;
  overflow: hidden;
  line-height: 30px;
  width: 100%;
  color:#666;
}

a{
  text-decoration: none;
  color:#666;
  display: block;
}

img{
  display: block;
}

.imgleft{
  display: -webkit-flex;
  display: flex;
}

.imgright{
  display: -webkit-flex;
  display: flex;
  flex-direction: row-reverse;
}

.imgleft p,
.imgright p{
  margin-bottom: 20px;
}

.imgleft p:last-child,
.imgright p:last-child{
  margin-bottom: 0;
}

.inner1200{
  width: 1200px;
  margin: 0 auto;
}

.btn a{
  color: #fff;
  font-size: 1.2em;
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.btn i{
  margin-right: 20px;
  font-size: 1.4em;
}

.btn a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #fff;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}

.btn a:hover::after {
  transform: scale(1, 1);
}

/*---------------
header
---------------*/
.h_blc{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 20px;
}

h1 a{
  display: flex;
  align-items: center;
}

h1 a:hover{
  opacity: .5;
}

h1 img{
  width: 90px;
}

h1 div{
  color: #266F47;
  font-size: 1.6em;
  margin-left: 20px;
}

h1 div span{
  display: block;
  padding-top: 10px;
}

nav ul{
  display: flex;
  align-items: center;
}

nav li{
  margin-right: 30px;
}

nav li:last-child{
  margin-right: 0;
}

nav a{
  color: #666;
}

nav a:hover{
  opacity: .7;
}

.entry_pcbtn{
  background: #E8822A;
  border-radius: 40px;
  border: 1px solid #E8822A;
  transition: .7s;
}

.entry_pcbtn a{
  color: #fff;
  padding: 10px 20px;
}

.entry_pcbtn:hover{
  background: #fff;
  border-radius: 40px;
  border: 1px solid #E8822A;
}

.entry_pcbtn a:hover{
  color: #E8822A;
  padding: 10px 20px;
}

.catch{
  position: relative;
}

.catchcopy{
  position: absolute;
  bottom: 8%;
  color: #fff;
  font-size: 3em;
  line-height: 60px;
  background: #266F47;
  width: 75%;
  padding: 30px 40px;
  box-shadow: 25px 25px #155231;
}

.catchcopy_sub{
  position: absolute;
  bottom: 35%;
  right: 0;
  color: #fff;
  font-size: 2.4em;
  line-height: 60px;
  background: #266F47;
  width: 20%;
  padding: 20px;
  text-align: center;
}

/*---------------
top
---------------*/
/*-top_point-------*/
.top_point{
  position: relative;
  background: url(images/top/bg_toppoint@2x.png) no-repeat 100% 100%;
  background-size: cover;
  padding: 200px 50px 30px;
}

.top_point h2{
  color: #F57211;
  font-size: 3em;
  text-align: center;
  position: absolute;
  top: 80px;
  right: 160px;
  transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
}

.top_point h2:before{
  height: 130px;
  border-left: 3px solid #cc7612;
  position: absolute;
  content: '';
  transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  left: -40px;
}

.top_point h2:after{
  height: 130px;
  border-right: 3px solid #cc7612;
  position: absolute;
  content: '';
  transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  right: -60px;
  top: 10px;
}

.top_point h2 > span{
  display: block;
  padding-top: 40px;
  font-size: 1.2em;
}

.top_point h2 span span{
  font-size: 1.8em;
}

.top_point ul{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
}

.top_point li{
  position: relative;
  margin-bottom: 60px;
}

.top_point li:nth-child(odd){
  margin-top: -20px;
}

.top_point li:nth-child(even){
  margin-top: 250px;
}

.top_point dt{
  font-family: Shrikhand;
  font-size: 6em;
  color: #000;
}

.top_point dd{
  font-size: 2em;
  color: #5DA520;
  line-height: 50px;
  margin: 40px 0;
}

.top_point li img{
  width: 480px;
}

.top_point strong{
  background: #58AC7E;
  transform: rotate(35deg);
  justify-content: center;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  position: absolute;
}

.top_point strong:after{
  background: #266F47;
  transform: rotate(10deg);
  width: 180px;
  height: 180px;
  position: absolute;
  content: '';
  left: 0;
  z-index: -1;
}

.point01{
  right: 0;
  top: -40px;
}

.point02{
  right: 60px;
  top: -130px;
}

.point03{
  right: 60px;
  top: -180px;
}

.point04{
  right: 60px;
  top: -180px;
}

.top_point strong span{
  color: #fff;
  transform: rotate(-35deg);
  display: block;
  font-size: 1.3em;
  line-height: 35px;
  text-align: center;
}

/*-top_message-------*/
.top_message .imgleft{
  align-items: flex-end;
  background: #266F47;
  color: #fff;
}

.top_message img{
  width: 60%;
}

.top_message .imgleft > div{
  width: 40%;
  position: relative;
  padding: 40px;
}

.top_message .h2{
  color: #21603E;
  transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
  font-size: 3.2em;
  right: 20px;
  top: -20px;
  position: absolute;
}

.top_message h2{
  font-size: 2em;
  margin-bottom: 30px;
}

.top_message p{
  font-size: 1.2em;
}

.top_message .btn{
  text-align: right;
}

/*-top_service-------*/
.top_service .imgright{
  align-items: flex-end;
  background: #88AA58;
  color: #fff;
}

.top_service img{
  width: 60%;
}

.top_service .imgright > div{
  width: 40%;
  position: relative;
  padding: 40px;
}

.top_service .h2{
  color: #7B9A50;
  transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
  font-size: 3.2em;
  right: 20px;
  top: -30px;
  position: absolute;
}

.top_service h2{
  font-size: 2em;
  margin-bottom: 30px;
}

.top_service p{
  font-size: 1.2em;
}

.top_service .btn{
  text-align: right;
  margin-top: 70px;
}

/*-banner_menu-------*/
.banner_menu{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 60px 60px 0;
  background: #F4FFE6;
}

.banner_menu li{
  width: 48%;
  position: relative;
  margin-bottom: 60px;
  transition: .7s;
}

.banner_menu li:before{
  position: absolute;
  background: #000;
  opacity: .2;
  width: 100%;
  height: 100%;
  content: '';
}

.banner_menu li:after{
  border: 1px solid #fff;
  width: 460px;
  height: 180px;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  opacity: .7;
}

.banner_menu li:hover{
  opacity: .7;
  transition: .7s;
  cursor: pointer;
}

.banner_menu h2{
  color: #fff;
  position: absolute;
  top: 50px;
  left: 50px;
  font-size: 3.2em;
  opacity: .5;
}

.banner_menu .btn{
  position: absolute;
  bottom: 40px;
  right: 60px;
  z-index: 999;
}

/*---------------
sub
---------------*/
/*-voice-------*/
.voice{
  padding: 80px;
}

.voice_type01 .imgright{
  align-items: center;
  background: #88AA58;
  color: #fff;
}

.voice_type01 img,
.voice_type02 img{
  width: 50%;
}

.voice_type01 .imgright > div{
  width: 50%;
  position: relative;
  padding: 40px;
}

.voice_type01 h2,
.voice_type02 h2{
  font-size: 2em;
  margin-bottom: 30px;
}

.voice_type01 .btn,
.voice_type02 .btn{
  text-align: right;
  margin-top: 70px;
}

.voice_type02 .imgleft{
  align-items: flex-end;
  background: #266F47;
  color: #fff;
}

.voice_type02 .imgleft > div{
  width: 50%;
  position: relative;
  padding: 40px;
}

/*-staff-------*/
.staff{
  padding: 60px 100px;
}

.staff .intro h2{
  font-size: 1.8em;
  text-align: center;
  margin: 60px auto 20px;
}

.staff .intro p{
  font-size: 1.2em;
  text-align: center;
  margin-bottom: 40px;
}

.staff li h3{
  background: #266F47;
  font-size: 1.2em;
  color: #fff;
  padding: 20px;
}

.staff .imgright img,
.staff .imgleft img{
  width: 40%;
}

.staff .imgright,
.staff .imgleft{
  align-items: center;
  padding: 40px 0;
}

.staff .wrap{
  padding-top: 40px;
}

.staff .wrap img{
  margin-bottom: 40px;
}

.staff .wrap p{
  margin-bottom: 20px;
}

.staff .wrap p:last-child{
  margin-bottom: 0;
}

.staff .imgright > div{
  margin-right: 40px;
}

.staff .imgleft > div{
  margin-left: 40px;
}

.staff .imgright p,
.staff .imgleft p{
  margin-bottom: 30px;
}

.staff .imgright p:last-child,
.staff .imgleft p:last-child{
  margin-bottom: 0;
}

/*-greeting-------*/
.vision{
  padding: 60px 100px;
}

.greeting h2{
  font-size: 1.8em;
  text-align: center;
  margin: 20px auto;
  color: #21603E;
}

.vision strong{
  font-size: 1.6em;
  text-align: center;
  color: #E8822A;
  display: block;
  margin: 80px auto 40px;
}

.vision p{
  margin-bottom: 20px;
}

.qa .img{
  position: relative;
}

.qa .title{
  position: absolute;
  margin: auto;
  top: 190px;
  left: 0;
  right: 0;
  width: 350px;
  background: rgba(255,255,255,0.8);
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qa dl{
  padding: 20px 100px 80px;
}

.qa dt{
  background: #266F47;
  font-size: 1.2em;
  color: #fff;
  padding: 20px;
  margin: 50px auto 20px;
}

.qa dd{
  margin-bottom: 20px;
}

/*-faq-------*/
.faq_copy{
  width: 28%;
}

.faq{
  padding: 80px 100px;
}

.faq dt{
  background: #266F47;
  font-size: 1.2em;
  color: #fff;
  padding: 20px;
  margin-bottom: 20px;
}

.faq dd{
  margin-bottom: 30px;
}

/*-privacy-------*/
.privacy_copy{
  width: 36%;
}

.privacy{
  padding: 60px 100px;
}

.privacy .intro p{
  margin-bottom: 20px;
}

.privacy dt{
  background: #266F47;
  font-size: 1.2em;
  color: #fff;
  padding: 20px;
  margin: 30px auto 20px;
}

.privacy dd{
  margin-bottom: 20px;
}

.privacy .right{
  text-align: right;
  padding: 40px 0;
}

/*-works-------*/
.works .imgleft .left,
.works .imgright .left{
  width: 50%;
  position: relative;
  height: 590px;
}

.works .imgleft .left img{
  position: absolute;
  left: 100px;
  top: 0;
  z-index: 1;
  bottom: 0;
  margin: auto;
}

.works .imgright .left img{
  position: absolute;
  right: 100px;
  top: 0;
  z-index: 1;
  bottom: 0;
  margin: auto;
}

.works .imgleft .right,
.works .imgright .right{
  background: #E3F5CE;
  width: 50%;
  height: 590px;
  position: relative;
}

.works .imgleft .right div{
  background: #fff;
  padding: 40px 30px;
  width: 500px;
  height: 300px;
  position: absolute;
  right: 100px;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 2;
}

.works .imgright .right div{
  background: #fff;
  padding: 40px 30px;
  width: 500px;
  height: 30%;
  position: absolute;
  left: 100px;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 2;
}

.works .right h2{
  color: #21603E;
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 20px;
}

.works .right p{
  font-size: 1.2em;
}

/*-training-------*/
.training{
  padding: 60px 100px 20px;
}

.training h2{
  font-size: 1.8em;
  text-align: center;
  margin: 20px auto;
  color: #21603E;
}

.training ul{
  padding-top: 80px;
}

.training li{
  border: 1px solid #266F47;
  margin-bottom: 100px;
  padding: 40px;
}

.training h3{
  font-size: 1.4em;
  padding: 20px;
  width: 440px;
  text-align: center;
  margin: 20px auto;
  color: #fff;
  background: #266F47;
  margin-top: -75px;
}

/*-about-------*/
.about{
  padding: 60px 100px 80px;
}

.about dl{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 80px;
}

.about dt{
  border: 1px solid #155331;
  width: 20%;
  padding: 20px;
  color: #fff;
  background: #266F47;
  display: flex;
  align-items: center;
}

.about dd{
  border: 1px solid #155331;
  width: 80%;
  padding: 20px;
}

.about dd span{
  display: block;
  margin-bottom: 30px;
}

/*-recruit-------*/
.recruit{
  padding: 60px 100px 80px;
}

.recruit h2{
  font-size: 1.8em;
  text-align: center;
  margin: 20px auto;
  color: #21603E;
}

.recruit dl{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 60px 0;
}

.recruit dt{
  border: 1px solid #155331;
  width: 20%;
  padding: 20px;
  color: #fff;
  background: #266F47;
  display: flex;
  align-items: center;
}

.recruitment dd{
  border: 1px solid #155331;
  width: 80%;
  padding: 20px;
}

.recruit dd span{
  display: block;
  margin: 30px 0;
}

.entryform dd{
  border: 1px solid #155331;
  width: 80%;
  padding: 10px 20px;
}

.entryform input[type="text"]{
  width: 100%;
  height: 50px;
  border: 1px solid #707070;
  border-radius: 10px;
  font-size: 1.2rem;
  background: #FAFAFA;
}

.entryform textarea{
  width: 100%;
  border: 1px solid #707070;
  font-size: 1.2rem;
  height: 200px;
  border-radius: 10px;
  background: #FAFAFA;
}

.entryform input[type="submit"] {
  display: block;
  padding: 20px;
  font-size: 1.2em;
  font-weight: bold;
  margin: 0 auto;
  width: 300px;
  transition: .7s;
  -webkit-appearance: none;
  outline: none;
  border: 1px solid #E8822A;
  color: #fff;
  background: #E8822A;
  border-radius: 100px;
}

.entryform input[type="submit"]:hover{
  background: #fff;
  color: #E8822A;
  cursor: pointer;
}

/*-day-------*/
.day{
  padding: 80px 100px 60px;
}

.day ul{
  position: relative;
}

.day ul:after {
  position: absolute;
  content: '';
  width: 10px;
  height: 94%;
  background: #A5D171;
  top: 5%;
  left: 9.5%;
}

.day li{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  z-index: 1;
  position: relative;
}

.day h2{
  background: #A5D171;
  color: #fff;
  border-radius: 100px;
  width: 200px;
  height: 200px;
  font-size: 2.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -2px;
}

.day div{
  width: 75%
}

.day div p{
  color: #000;
  font-size: 1.2em;
  margin: 20px 0;
}

/*---------------
footer
---------------*/
footer{
  background: #266F47;
  padding: 20px 40px;
}

.f_nav{
  display: flex;
  justify-content: center;
  padding: 20px 0 40px;
}

.f_nav li{
  position: relative;
  margin-right: 11px;
}

.f_nav li:last-child{
  margin: 0;
}

.f_nav li:after{
  content: '';
  position: absolute;
  right: -5px;
  top: 7px;
  width: 1px;
  background: #fff;
  height: 18px;
}

.f_nav li:last-child:after{
  display: none;
}

.f_nav a{
  color: #fff;
}

.f_nav a:hover{
  opacity: .7;
}

.copy{
  text-align: center;
  color: #fff;
}

.copy img{
  width: 90px;
  margin: 0 auto 20px;
}

/*---------------
other
---------------*/
.smonly{
  display: none;
}

}