@charset "UTF-8";

#catch_copy{
  text-align: center;
  padding: 1em 1em 3em;
  color: #2f4f4f;
  font-weight: 800;
  line-height: 1.5em;
}

#event,
#recruit,
#iam{
  background-color: rgba(255, 255, 255, 0.95);
  padding: 2em;
  margin-bottom: 2em;
  border-radius: 10px;
  box-shadow: -1px -1px 5px rgba(0, 0, 0, 0.5) inset;
}

span{
  font-size: 1.5em;
  color: #ff00ff;
}

h2{
  padding-bottom: 1em;
  text-shadow: 1px 1px 1px #808080;
}

.event_box{
  padding: 1em;
}

.event_innner{
  display: flex;
  padding: 1em 0;
  justify-content: space-between;
}

.event_right{
  flex-basis: 65%;
}

.event_left{
  flex-basis: 30%;
  padding: 1em 1em 0;
}

.event_left img,
#iam_box img{
  width: 100%;
  box-shadow: 1px 1px 5px #808080;
}

.event_right h4{
  font-size: 1.5em;
  padding-top : 1em;
}

.event_right p{
  padding: 1em;
  line-height: 1.5em;
  font-size: 1.2em;
}

#recruit p{
  padding: 0 1em;
  font-size: 1.2em;
}

#recruit dl{
  margin: 2em 10%;
}

.recruit_row{
  display: flex;
  flex-wrap: wrap;
  text-align: left;
  line-height: 1.5em;
  margin: 1em auto 0;
}

.recruit_row dt{
  flex-basis: 20%;
  text-align: right;
}

.recruit_row dd{
  flex-basis: 80%;
}

#iam_box{
  display: flex;
  justify-content: space-around;
}

#iam_left{
  flex-basis:60%;
}

#iam_left p{
  padding: 0 1em 1em 1em;
  line-height: 1.5em;
}

#iam_right{
  flex-basis:30%;

}


@media screen and (max-width:640px){
  h2{
    text-align: center;
  }

  h3{
    text-align: center;
    padding: 0 1em;
  }

  h4{
      padding: 1em 1em 0;
  }

  .eye_catch img{
    min-height: 300px;
  }

  #catch_copy{
    font-size: 1em;
  }

  #event,
  #recruit,
  #iam{
    padding: 2em 0;
    margin-bottom: 2em;
    border-radius: 0;
    border: 1px solid #000;
    box-shadow: none;
    border: none;
  }

  .event_box{
    padding: 1em 0;
  }

  .event_innner, #iam_box{
    display: inline-block;
    width: 100%;
  }

  .event_left,
  .event_right,
  #iam_left,
  #iam_right{
    padding: 0;
  }

  .event_right h4{
    text-align: center;
  }

  .event_right p{
    font-size: 1em;
  }

  small{
    padding-left: 2em;
  }

  #recruit dl{
    margin: 1em;
  }

  .recruit_row{
    display: block;
  }

  .recruit_row dt{
    text-align: left;
  }

  .recruit_row dd{
    padding-left: 1em;
  }

  #iam_left p{
    padding-bottom: 1em;
  }

}