@charset "utf-8";

/*------------------------------------------------
recruit
------------------------------------------------*/

.recruiter {}

.recruiter-pic {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  margin: 25px auto;
  overflow: hidden;
  box-shadow: 5px 5px 0 #2c4390;
}

.recruiter-pic > img {
  height: 100%;
}

@media print, screen and (min-width: 769px) {
  .recruiter-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .recruiter-text {
    width: calc(100% - 385px);
    font-size: 1.85rem;
  }
  .recruiter-pic {
    width: 340px;
    height: 340px;
    margin: 0;
  }
}


.recruitment-flow-list {
  width: 100%;
}
.recruitment-flow-item {
  width: 80%;
  padding: 15px;
  margin: 0 auto 50px;
  text-align: center;
  font-size: 2rem;
  line-height: 1.4;
}
.recruitment-flow-item:not(:last-of-type) {
  color: #2c4390;
  background-color: #dceaf6;
  box-shadow: 5px 5px 0 #2c4390;
  position: relative;
}

.recruitment-flow-item:not(:last-of-type)::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -65px;
  left: calc(50% - 25px);
  border-style: solid;
  border-color: rgba(44, 67, 144, 1) rgba(44, 67, 144, 0) rgba(44, 67, 144, 0) rgba(44, 67, 144, 0);
  border-width: 25px;
}

.recruitment-flow-item:last-of-type {
  color: #9f0707;
  background-color: #f6d1da;
  box-shadow: 5px 5px 0 #9f0707;
}

@media print, screen and (min-width: 769px) {
  .recruitment-flow-list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    width: 930px;
    margin: 50px auto 150px;
  }
  .recruitment-flow-item {
    width: 164px;
    height: 154px;
    padding: 0;
    margin:0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
  }
  .recruitment-flow-item:not(:last-of-type) {
    box-shadow: 8px 8px 0 #2c4390;
  }

  .recruitment-flow-item:not(:last-of-type)::after {
    bottom: calc(50% - 30px);
    left: inherit;
    right: -125px;
    border-color: rgba(44, 67, 144, 0) rgba(44, 67, 144, 0) rgba(44, 67, 144, 0) rgba(44, 67, 144, 1);
    border-width: 30px 50px;
  }

  .recruitment-flow-item:last-of-type {
    box-shadow: 8px 8px 0 #9f0707;
  }
}

.link {}
.link-list {
  width: 90%;
  margin:0 auto 50px;
}
.link-item {
  width: 100%;
  height: 100px;
  position: relative;
  margin: 25px 0;
  box-shadow: 2px 2px 0 #91a9d6;
  background-size: cover;
}
.link-item.staff-voice-bg {
  background-image: url(../../images/recruit/link_item_button_bg_staffvoice.jpg);
  background-position: right top;
}
.link-item.guidelines-bg {
  background-image: url(../../images/recruit/link_item_button_bg_guidelines.jpg);
}
.link-item.internship-bg {
  background-image: url(../../images/recruit/link_item_button_bg_internship.jpg);
}
.link-item-button {
  display: block;
  width: 100%;
  height: 100%;
}
.link-item-button::after {
  content: "";
  display: block;
  border-style: solid;
  border-width: 8px;
  border-color: rgba(44, 67, 144, 0) rgba(44, 67, 144, 1) rgba(44, 67, 144, 1) rgba(44, 67, 144, 0);
  position: absolute;
  bottom: 12px;
  right: 12px;
}
.link-item-button::before {
  content: "";
  display: block;
  border: 3px solid #2c4390;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  position: absolute;
  top: 5px;
  left: 5px;
}
.link-item-button > span {
  color: #2c4390;
  display:flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-family: "Noto serif JP", serif;
  text-shadow: 0 0 5px rgba(255,255,255,1), 0 0 10px rgba(255,255,255,1), 0 0 15px rgba(255,255,255,1);
  background: radial-gradient(rgba(255,255,255,1), rgba(255,255,255,0));
  width: 100%;
  height: 100%;
}

@media print, screen and (min-width: 769px) {
  .link-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin: 100px auto;
    width: 1000px;
  }
  .link-item {
    width: 470px;
    height: 155px;
    margin: 0 0 50px 0;
    box-shadow: 5px 5px 0 #91a9d6;
  }
  .link-item:last-of-type {
    margin: 0 auto;
  }
  .link-item-button > span  {
    font-size: 3.8rem;
    justify-content: flex-start;
    padding-left: 50px;
  }
}