@charset "utf-8";

#jobContent{
    --red:#E92D2D;
    --black:#706767;
    --richBlack:#393434;
    --yellow:#FFFF44;
    --midBlue:#004684;
    --midgreen:#008E84;
    --treeBrown:#985219;
    --footerBg:#F9F4F4;
    --lyeBrown:#9E9478;
    --pink:#F53D87;
    --orange:#FF4E00;
}

#jobContent *{
  box-sizing:border-box;
}

#jobContent{
  background: #FEFEF2;
}

#jobContent picture img,
#jobContent img{
  max-width:100%;
  margin-bottom:1rem;
}

.contentWrap{
    width: 100%;
    max-width:1200px;
    margin: 0 auto;
    padding:0 0 40px 0;
}

/*index.css*/
#kvArea{
  position:relative;
  background:url("/new/_app/_webroot/img/page/job/kv_bg.jpg") no-repeat center/cover;
  width:100%;
  max-width: 1200px;
  margin:0 auto 1rem auto;
  min-height:420px;
  padding: 3rem 0 0 0;
  z-index: 1;
}

#kvArea:before{
  content:"";
  display: block;
  background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%221200%22%20height=%2289.194%22%20viewBox=%220%200%201200%2089.194%22%3E%3Cpath%20id=%22%E3%83%91%E3%82%B9_354%22%20data-name=%22%E3%83%91%E3%82%B9%20354%22%20d=%22M1200,0C1031.453,11.1,831.134,19.488,605.524,19.622,375.258,19.76,171.127,11.267,0,0V89.194H1200Z%22%20fill=%22%23fefef2%22/%3E%3C/svg%3E") no-repeat center/cover ;
  position:absolute;
  bottom:-8px;
  left:0;
  width: 100%;
  min-height:90px;
  z-index: 2;
}

#kvArea img{
  max-width:100%;
}

.searchBoy{
  position:absolute;
  bottom:12%;
  left: 22%;
  z-index:3;
}

.searchGirl{
  position:absolute;
  bottom:12%;
  right: 22%;
  z-index:3;
}

/*木目BOX*/
.woodBox {
  width: 100%;
  max-width: 340px;
  min-height: 270px;
  margin:0 auto;
  background: linear-gradient(
      180deg,#e5c08d 0%,#e5c08d 5%,#e2b276 10%,#e5c08d 20%,#d99f5d 30%,#e5c08d 40%,#d28f48 50%,#e5c08d 60%,#bf7630 70%,#e5c08d 80%,#d99f5d 90%,#e5c08d 100%
  );
  border-radius:1rem;
  border:4px solid var(--treeBrown);
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
  padding:1rem;
  color: #fff;
  display:flex;
}


#kvArea .woodBox{
    width: 100%;
    max-width: 330px;
    margin:0 auto;
    background: linear-gradient(
        180deg,#e5c08d 0%,#e5c08d 5%,#e2b276 10%,#e5c08d 20%,#d99f5d 30%,#e5c08d 40%,#d28f48 50%,#e5c08d 60%,#bf7630 70%,#e5c08d 80%,#d99f5d 90%,#e5c08d 100%
    );
    border-radius:1rem;
    border:4px solid var(--treeBrown);
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
    padding:1rem;
    color: #fff;
    display:flex;
    min-height:270px;
}

.paperView{
    width: 100%;
    background: #ffffff;
    position: relative;
    box-sizing: border-box;
    padding: 1rem 1rem;
}

.paperView:before,
.paperView:after{
    content:"";
    display: block;
    width: 12px;
    height: 12px;
    border-radius:50px;
    background: var(--treeBrown);
    position:absolute;
}

.paperView:before{
    top:10px;
    left:10px;
}

.paperView:after{
    top:10px;
    right:10px;
}

.paperViewText{
    color:var(--black);
    font-size:0.8rem;
    line-height:1.8;
    margin-bottom:1rem;
}

.topKvTitle{
    font-size:1.4rem;
    color:var(--midBlue);
    text-align: center;
    margin:1rem 0;        
}

.logoImg{
    margin:0.75rem auto;
    text-align: center;
}

.logoTitle{
    width: 90%;
    margin:0 auto;
    text-align: center;
}

.topKvText{
    font-size:1.2rem;
    font-weight:600;
    color:var(--richBlack);
    line-height:1.6;
    text-align: center;
    margin:0.25rem 0 0 0;
}

.ttlQuest{
    color:var(--midBlue);
    font-size:1.2rem;
    line-height:1.2rem;
    display: flex;
    justify-content:flex-start;
    align-items:center;
    padding:1rem 1rem 1rem 6rem;
    position:relative;
}

.ttlQuest:before{
    content:"";
    display: block;
    background:url("/new/_app/_webroot/img/page/job/ttlQuest.webp") no-repeat;
    background-size:contain;
    background-position:center;
    width:65px;
    height:45px;
    margin-right:0.5rem;
    position:absolute;
    left:0;
}

.ttlQuestSpecial{
    color:var(--midBlue);
    font-size:1.2rem;
    line-height:1.4rem;
    display: flex;
    justify-content:flex-start;
    align-items:center;
    padding:1rem 1rem 1rem 9rem;
    position:relative;
    word-break: auto-phrase;
}

.ttlQuestSpecial:before{
    content:"";
    display: block;
    background:url("/new/_app/_webroot/img/page/job/ttlQuest_red.webp") no-repeat;
    background-size:contain;
    background-position:center;
    width:94px;
    height:45px;
    margin-right:0.5rem;
    position:absolute;
    left:0;
}

.paperView hr{
    border:0;
    width: 100%;
    height:2px;
    background: linear-gradient(to right, #C8BAAE 85%, transparent 85%, transparent 90%, #C8BAAE 90%);
    margin: 0.5rem 0;
}

.redBtn{
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
}

.redBtn a{
    background: var(--red);
    border-radius:50px;
    color:#ffffff;
    display: block;
    font-size: 1.4rem;
    text-align: center;
    padding: 1rem;
    width:min(200px,80%);
    box-shadow: 0 4px 0 rgba(129, 15, 15, 1);
    margin: 4px 0 8px 0;
}


/* QuestList */
.questList{
    width: 100%;
    max-width:980px;
    margin: 0 auto;
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
}

.questBox{
  width:49%;
}

/* お仕事調査隊とは ボタン */

.btnAbout{
    width: 100%;
    max-width:250px;
    margin: 0 auto;
}

.btnAbout a{
    background: #008E84;
    border-radius:50px;
    box-shadow:0 4px 0 #A9E2DE; 
    color:#ffffff;
    display: block;
    font-size:1.2rem;
    font-weight:600;
    text-align: center;
    padding:1.5rem 2rem;
    position:relative;
}

.darkBlueText{
    color:var(--midBlue);
    font-size:1.4rem;
    font-weight:500;
    text-align: center;
    line-height: 1.8;
    margin:4rem auto;
}

.lineDashTitleWrap{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.lineDashTitleWrap:before,
.lineDashTitleWrap:after{
  width: 40%;
  content: '';
  flex-grow: 1;
  height: 4px;
  margin: 0 10px;
}

.lineDashTitleWrap:before{
    left:0;
    background: linear-gradient(to right, #985219, #985219 85%, transparent 85%, transparent 90%, #985219 90%, #985219);
}

.lineDashTitleWrap:after{
    right:0;
    background: linear-gradient(to right, #985219, #985219 10%, transparent 10%, transparent 15%, #985219 15%, #985219);
}

.lineDashTitle {
  display: inline-block;
  color:#8D6544;
  font: bold 4rem 'Bernard MT','Noto sans JP',sans-serif; sans-serif;
  position: relative;
  margin:0;
}
.lineDashTitle:before{
  width:100%;
  content: attr(title);
  color: rgba(255, 255, 255, .35);
  position: absolute;
  top: 2px;
  left: 2px;
  -ms-filter: blur(1px);
  filter: blur(1px);
}

.lineDashTitleKana{
  text-align: center;
  color:#C59D7C;
  font-weight:bold;
  font-size:1.25rem;
  margin: 0 0 2rem 0;
  padding:0;
}

/* 吹き出し：fukidashiBlue */

.fukidashiBlue {
    position: relative;
    width: 100%;
    max-width: 300px;
    margin: 2rem auto;
    padding: 1rem;
    border: 4px solid #0666bb;
    border-radius: 16px;
    background-color: #ffffff;
}

.fukidashiBlue::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    border-style: solid;
    border-width: 0 15px 20px 15px;
    border-color: transparent transparent #0666bb;
    translate: -50% -100%;
}

.fukidashiBlue::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    border-style: solid;
    border-width: 0 10px 13.3px 10px;
    border-color: transparent transparent #ffffff;
    translate: -50% -100%;
}

.fukidashiBlue p{
    margin:0.5rem 0 0 0;
    line-height:1.6;
    font-size:1.2rem;
}

.fukidashiBlue p.blueHeadline{
    font-size:1.5rem;
    font-weight:600;
    color:var(--midBlue);
    line-height:1.6;
    text-align: center;
    margin:1rem 0;
}

/* 吹き出し：fukidashiRed */

.fukidashiRed {
    position: relative;
    width: 100%;
    max-width: 300px;
    min-height: 170px;
    margin: 2rem auto;
    padding: 1.5rem;
    border: 4px solid #E92D2D;
    border-radius: 16px;
    background-color: #ffffff;
}

.fukidashiRed::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    border-style: solid;
    border-width: 0 15px 20px 15px;
    border-color: transparent transparent #E92D2D;
    translate: -50% -100%;
}

.fukidashiRed::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    border-style: solid;
    border-width: 0 10px 13.3px 10px;
    border-color: transparent transparent #ffffff;
    translate: -50% -100%;
}

.fukidashiRed p{
  margin:0.5rem 0 0 0;
  line-height:1.6;
  font-size:1.2rem;
}

.fukidashiRed p.redHeadline{
    font-size:1.5rem;
    font-weight:600;
    color:var(--red);
    line-height:1.2;
    text-align: center;
    margin:1rem 0;
}
.redBigTitleWrap{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  margin: 1rem 0 0 0;
}

.redBigTitle{
  display: inline-block;
  color:#db0a0a;
  font: bold 2.5rem 'Bernard MT','Noto sans JP',sans-serif; sans-serif;
  position: relative;
  margin:0;
  padding: 0;
}

.redBigTitle:before{
  width:100%;
  content: attr(title);
  color: rgba(255, 255, 255, .35);
  position: absolute;
  top: 2px;
  left: 2px;
  -ms-filter: blur(1px);
  filter: blur(1px);
}

.rbtSmall{
  text-align: center;
  color:#db0a0a;
  font-weight:bold;
  font-size:1rem;
  margin: 0 0 2rem 0;
  padding:0;
}

.snsBox{
    width: 100%;
    max-width:340px;
    margin: 0 auto;
    border:3px solid var(--midBlue);
    padding:2rem;
    background: #ffffff;
}

.ttlSns{
    display:flex;
    justify-content:center;
}

.catchSns{
    font-size:1.6rem;
    color:var(--midBlue);
    text-align: center;
    margin:1rem 0 0.5rem 0;
}

.snsBox p{
    font-size:1.2rem;
    margin-bottom:1rem;
    line-height:1.8;
}

.snsBox p span{
    color:var(--red);
    text-decoration:underline;
}

.snsLink ul{
    display:flex;
    flex-direction:column;
    list-style:none;
    margin: 0;
    padding: 0;
}

.snsLinkBtn{
    margin-top:1rem;
    width: 100%;
    max-width:224px;
    margin: 0.75rem auto 0 auto;
}

.snsLinkBtn a{
    background: #ffffff;
    border:2px solid var(--midBlue);
    border-radius:50px;
    color:var(--midBlue);
    display:block;
    font-size:1.4rem;
    font-weight:700;
    text-align: center;
    padding:0.5rem 0.75rem;
}

.snsLinkBtn a:hover{
    background:var(--midBlue);
    color:#ffffff;
    transition:0.3s;
}

.snsLinkBtn a span{
    font-size:1.2rem;
}

@media screen and (max-width:1280px){
  .searchBoy{
    left:5%;
  }

  .searchGirl{
    right:5%;
  }

  #kvArea .woodBox {
    width: 100%;
    max-width: 330px;
    min-height:240px;
  }
}

@media screen and (max-width:900px){
  .searchBoy{
    left:0%;
  }

  .searchGirl{
    right:0%;
  }
}

@media screen and (max-width:768px){
  #kvArea{
    padding: 3rem 2rem 0 2rem;
  }

  #kvArea:before{
    background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%221200%22%20height=%2289.194%22%20viewBox=%220%200%201200%2089.194%22%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%23fefef2;%7D%3C/style%3E%3C/defs%3E%3Cpath%20class=%22a%22%20d=%22M1200,0C1031.453,11.1,831.134,19.488,605.524,19.622,375.258,19.76,171.127,11.267,0,0V89.194H1200Z%22/%3E%3C/svg%3E") no-repeat center/cover ;
    min-height:54px;
  }
  .searchBoy{
    bottom:4%;
    left:0;
    width: 100px;
  }

  .searchGirl{
    bottom:4%;
    right:0;
    width: 100px;
  }

  .btnAbout a{
    font-size:1.4rem;
  }

  .questList{
    width: 94%;
    max-width:768px;
    margin: 0 auto;
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
    gap:20px;
  }


  .questBox {
    width: 100%;
  }

  .woodBox {
    width: 100%;
    max-width: 340px;
    min-height: 270px;
  }

  .snsBox{
      width: 92%;
  }

  .fukidashiBlue,.fukidashiRed{
    max-width: 300px;
  }

  .lineDashTitleWrap:before,
  .lineDashTitleWrap:after{
    width: 25%;
  }

  .ttlQuest{
    font-size:1.4rem;
    line-height:1.4;
  }

  .ttlQuest,
  .ttlQuestSpecial{
    padding:1rem 2rem 1rem 8rem;
  }

  .ttlQuest:before,
  .ttlQuestSpecial:before{
    width:65px;
    height:45px;
  }

  .redBtn a{
    font-size:1.6rem;
    width:max(200px,100%);
    padding:1rem;
  }

  .redBtn a:hover{
      font-size:1.6rem;
      padding:1rem;
      width:max(200px,100%);
  }

}

@media screen and (max-width:540px){
  .searchBoy{
    bottom:4%;
    left:0;
    width: 60px;
  }

  .searchGirl{
    bottom:4%;
    right:0;
    width: 60px;
  }
}

@media screen and (min-width:768px){
  .pc-none{
    display:none;
  }
}
@media screen and (max-width:768px){
  .sp-none{
    display:none;
  }
}