@charset "UTF8";

/*----------------------------
縦向きの場合スマホスタイル
----------------------------*/

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

  .recruit-info-area{
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .recruit-info-comment{
    width: 90%;
    margin: 8% auto;
    display: flex;
    flex-direction: column;
    background: rgba(102,186,183,0.5);
    border-radius: 8px;
}

  .recruit-info-comment p {
    font-size: 3vw;
    line-height: 4vw;
    margin: 0;
    padding: 3%;
    color: #373C38;
    font-weight: bold;
  }

  .recruit-info-comment hr {
    width: 100%;
    border: 1px #000 solid;
    margin: 3% 0;
    padding: 0;
  }

  .recruit-info-container{
    width: 90%;
    margin: 0 auto;
    margin-bottom: 13%;
    display: flex;
    flex-direction: column;
}

.recruit-info-box {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.recruit-info-title {
    width: 100%;
    border: 1px solid #000;
    padding: 0 1%;
    background: #BDC0BA;
}

.recruit-info-title p{
    font-size: 3vw;
    text-align: center;
    line-height: 3vw;
}

.recruit-info-item {
    width: 100%;
    padding: 0 1%;
    border-right: 1px solid #000;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
    background: #FCFAF2;
}

.recruit-info-item p{
  font-size: 3vw;
  margin: 0;
  padding: 0;
  line-height: 8vw;
}

.recruit-info-detail {
    width: 100%;
    border-right: 1px solid #000;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 0 3%;
}

.recruit-info-detail p{
  font-size: 3vw;
  margin: 0;
  padding: 0;
  line-height: 8vw;
  white-space: pre-wrap;
}

.recruit-bottom-photo-area{
  width: 90%;
  margin: 0 auto;
  display: table;
  align-items: center;
}

.recruit-bottom-photo-left{
  width: 40%;
  display: table-cell;
  padding-right: 5%;
}

.recruit-bottom-photo-left img{
  width: 100%;
  vertical-align: bottom;
}

.recruit-bottom-photo-center{
  width: 40%;
  display: table-cell;
  background-image: url("../img/recruit/speech_bubble.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
}

.recruit-bottom-photo-center-inner{
  width: 85%;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.recruit-bottom-photo-center-inner p{
  font-size: 3vw;
  margin: 0;
  padding: 0;
  font-weight: bold;
}

.recruit-bottom-photo-right{
  width: 10%;
  display: table-cell;
  vertical-align: top;
}

.recruit-bottom-photo-right img{
  width: 100%;
  transform: rotate(30deg);
  position: relative;
  left: -45%;
}

}


/*-----------------------
 横向きの場合スマホスタイル
-------------------------*/

@media screen and (min-width: 481px) and (max-width: 896px) {

  .recruit-info-area{
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .recruit-info-comment{
    width: 70%;
    margin: 3% auto;
    display: flex;
    flex-direction: column;
    background: rgba(102,186,183,0.5);
    border-radius: 10px;
}

  .recruit-info-comment p {
    font-size: 2vw;
    margin: 0;
    padding: 3%;
    color: #373C38;
    font-weight: bold;
  }

.recruit-info-comment hr {
  width: 100%;
  border: 1px #000 solid;
  margin: 3% 0;
  padding: 0;
  }

.recruit-info-container{
  width: 70%;
  margin: 0 auto;
  margin-bottom: 5%;
  display: flex;
  flex-direction: column;
}

.recruit-info-box {
  width: 100%;
  display: flex;
}

.recruit-info-title {
  width: 100%;
  border: 1px solid #000;
  padding: 0 1%;
  background: #BDC0BA;
}

.recruit-info-title p{
  font-size: 2vw;
  text-align: center;
  margin: 0;
  line-height: 5vw;
}

.recruit-info-item {
  width: 30%;
  padding: 0 1%;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
}

.recruit-info-item p{
  font-size: 2vw;
  margin: 0;
  padding: 0;
  line-height: 3vw;
}

.recruit-info-detail {
  width: 70%;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  padding: 0 1%;
}

.recruit-info-detail p{
  font-size: 2vw;
  margin: 0;
  padding: 0;
  line-height: 3vw;
  white-space: pre-wrap;
}

.recruit-bottom-photo-area{
  width: 70%;
  margin: 0 auto;
  display: table;
  align-items: center;
}

.recruit-bottom-photo-left{
  width: 40%;
  display: table-cell;
  padding-right: 5%;
}

.recruit-bottom-photo-left img{
  width: 100%;
  vertical-align: bottom;
}

.recruit-bottom-photo-center{
  width: 40%;
  display: table-cell;
  background-image: url("../img/recruit/speech_bubble.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
}

.recruit-bottom-photo-center-inner{
  width: 72%;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.recruit-bottom-photo-center-inner p{
  font-size: 2vw;
  margin: 0;
  padding: 0;
  font-weight: bold;
}

.recruit-bottom-photo-right{
  width: 10%;
  display: table-cell;
  vertical-align: top;
}

.recruit-bottom-photo-right img{
  width: 100%;
  transform: rotate(30deg);
  position: relative;
  left: -45%;
}

}

/*-------------------
タブレット
-------------------*/
@media screen and (min-width: 897px) and (max-width: 1024px) {

  .recruit-info-area{
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .recruit-info-comment{
    width: 70%;
    margin: 2% auto;
    display: flex;
    flex-direction: column;
    background: rgba(102,186,183,0.5);
    border-radius: 24px;
}

  .recruit-info-comment p {
    font-size: 2vw;
    margin: 0;
    padding: 3%;
    color: #373C38;
    font-weight: bold;
  }

  .recruit-info-comment hr {
    width: 100%;
    border: 1px #000 solid;
    margin: 3% 0;
    padding: 0;
  }

  .recruit-info-container{
    width: 70%;
    margin: 2% auto;
    display: flex;
    flex-direction: column;
}

.recruit-info-box {
    width: 100%;
    display: flex;
}

.recruit-info-title {
    width: 100%;
    border: 1px solid #000;
    padding: 0 1%;
}

.recruit-info-title p{
    font-size: 2vw;
    text-align: center;
    line-height: 4vw;
    margin: 0;
}

.recruit-info-item {
    width: 30%;
    padding: 0 1%;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
}

.recruit-info-item p{
  font-size: 2vw;
  margin: 0;
  padding: 0;
  line-height: 4vw;
  margin: 0;
}

.recruit-info-detail {
    width: 70%;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    padding: 0 1%;
}

.recruit-info-detail p{
  font-size: 2vw;
  margin: 0;
  padding: 0;
  line-height: 4vw;
  margin: 0;
  white-space: pre-wrap;
}

.recruit-bottom-photo-area{
  width: 70%;
  margin: 0 auto;
  display: table;
  align-items: center;
}

.recruit-bottom-photo-left{
  width: 40%;
  display: table-cell;
  padding-right: 5%;
}

.recruit-bottom-photo-left img{
  width: 100%;
  vertical-align: bottom;
}

.recruit-bottom-photo-center{
  width: 40%;
  display: table-cell;
  background-image: url("../img/recruit/speech_bubble.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
}

.recruit-bottom-photo-center-inner{
  width: 73%;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.recruit-bottom-photo-center-inner p{
  font-size: 2vw;
  margin: 0;
  padding: 0;
  font-weight: bold;
}

.recruit-bottom-photo-right{
  width: 10%;
  display: table-cell;
  vertical-align: top;
}

.recruit-bottom-photo-right img{
  width: 100%;
  transform: rotate(30deg);
  position: relative;
  left: -45%;
}

}


/*-------------------
ＰＣ
-------------------*/
@media all and (min-width: 1025px){

  .recruit-info-area{
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .recruit-info-comment{
    width: 50%;
    margin: 2% auto;
    display: flex;
    flex-direction: column;
    background: rgba(102,186,183,0.5);
    border-radius: 24px;
}

  .recruit-info-comment p {
    font-size: 1vw;
    margin: 0;
    padding: 3%;
    color: #373C38;
    font-weight: bold;
  }

  .recruit-info-comment hr {
    width: 100%;
    border: 1px #000 solid;
    margin: 3% 0;
    padding: 0;
  }

  .recruit-info-container{
    width: 50%;
    margin: 2% auto;
    display: flex;
    flex-direction: column;
}

.recruit-info-box {
    width: 100%;
    display: flex;
}

.recruit-info-title {
    width: 100%;
    border: 1px solid #000;
    padding: 0 1%;
}

.recruit-info-title p{
    font-size: 1.5vw;
    text-align: center;
    line-height: 4vw;
    margin: 0;
}

.recruit-info-item {
    width: 30%;
    padding: 0 1%;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
}

.recruit-info-item p{
  font-size: 1vw;
  margin: 0;
  padding: 0;
  line-height: 2vw;
  margin: 0;
}

.recruit-info-detail {
    width: 70%;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    padding: 0 1%;
}

.recruit-info-detail p{
  font-size: 1vw;
  margin: 0;
  padding: 0;
  line-height: 2vw;
  white-space: pre-wrap;
}

.recruit-bottom-photo-area{
  width: 50%;
  margin: 0 auto;
  display: table;
  align-items: center;
}

.recruit-bottom-photo-left{
  width: 40%;
  display: table-cell;
  padding-right: 5%;
}

.recruit-bottom-photo-left img{
  width: 100%;
  vertical-align: bottom;
}

.recruit-bottom-photo-center{
  width: 40%;
  display: table-cell;
  background-image: url("../img/recruit/speech_bubble.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
}

.recruit-bottom-photo-center-inner{
  width: 63%;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.recruit-bottom-photo-center-inner p{
  font-size: 1.2vw;
  margin: 0;
  padding: 0;
  font-weight: bold;
}

.recruit-bottom-photo-right{
  width: 10%;
  display: table-cell;
  vertical-align: top;
}

.recruit-bottom-photo-right img{
  width: 100%;
  transform: rotate(30deg);
  position: relative;
  left: -45%;
}

}

/*---------------------------------
印刷用表示
---------------------------------*/

@media print{

  .recruit-info-area{
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .recruit-info-comment{
    width: 50%;
    margin: 2% auto;
    display: flex;
    flex-direction: column;
    background: rgba(102,186,183,0.5);
    border-radius: 24px;
}

  .recruit-info-comment p {
    font-size: 1vw;
    margin: 0;
    padding: 3%;
    color: #373C38;
    font-weight: bold;
  }

  .recruit-info-comment hr {
    width: 100%;
    border: 1px #000 solid;
    margin: 3% 0;
    padding: 0;
  }

  .recruit-info-container{
    width: 50%;
    margin: 2% auto;
    display: flex;
    flex-direction: column;
}

.recruit-info-box {
    width: 100%;
    display: flex;
}

.recruit-info-title {
    width: 100%;
    border: 1px solid #000;
    padding: 0 1%;
}

.recruit-info-title p{
    font-size: 1.5vw;
    text-align: center;
    line-height: 4vw;
    margin: 0;
}

.recruit-info-item {
    width: 30%;
    padding: 0 1%;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
}

.recruit-info-item p{
  font-size: 1vw;
  margin: 0;
  padding: 0;
  line-height: 2vw;
  margin: 0;
}

.recruit-info-detail {
    width: 70%;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    padding: 0 1%;
}

.recruit-info-detail p{
  font-size: 1vw;
  margin: 0;
  padding: 0;
  line-height: 2vw;
  white-space: pre-wrap;
}

.recruit-bottom-photo-area{
  width: 50%;
  margin: 0 auto;
  display: table;
  align-items: center;
}

.recruit-bottom-photo-left{
  width: 40%;
  display: table-cell;
  padding-right: 5%;
}

.recruit-bottom-photo-left img{
  width: 100%;
  vertical-align: bottom;
}

.recruit-bottom-photo-center{
  width: 40%;
  display: table-cell;
  background-image: url("../img/recruit/speech_bubble.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
}

.recruit-bottom-photo-center-inner{
  width: 63%;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.recruit-bottom-photo-center-inner p{
  font-size: 1vw;
  margin: 0;
  padding: 0;
  font-weight: bold;
}

.recruit-bottom-photo-right{
  width: 10%;
  display: table-cell;
  vertical-align: top;
}

.recruit-bottom-photo-right img{
  width: 100%;
  transform: rotate(30deg);
  position: relative;
  left: -45%;
}

}

/*---------------------------------
共通
---------------------------------*/