@charset "UTF-8";

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


li {
  list-style-type: none;
}

a {
  text-decoration: none;
}

img {
  width: 100%;
}

body {
  font-family: "M PLUS Rounded 1c", sans-serif;

  position: relative;
  color: #472F04;
  font-size: 20px;
}

/* ======================================== */
/* 共通項 */

.u-960,
.u-600-fv,
.u-600,
.u-400 {
  display: none;
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

header {
  background-image: var(--header-bg);
  background-color: unset;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

main {
  background-color: #FFF7E9;
}


.fv {
  display: block;
  width: 100%;
  /* height: 100dvh; */
  /* overflow: hidden; */
}

.fv>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.intro {
  background-image: linear-gradient(180deg, rgba(255, 201, 102, 1), rgba(255, 201, 102, 0.7) 30%, rgba(255, 201, 102, 0.3) 74%, rgba(255, 201, 102, 0));
  font-weight: 500;
}

.bg-line {
  background-image: url(../img/top-intro-bg-line.png);
  background-position: top center;
  background-size: cover;
}

.intro-text1,
.intro-text2,
.intro-text3 {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}

.intro-text1 {
  padding: 35px 1em 100px;
  margin: 0 auto;
}

.intro-text2 {
  padding: 0 1em 50px;
  margin: 0 auto;
}

.intro-text3 {
  padding: 0 1em 100px;
  margin: 0 auto;
}

#jobsearch {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1em;
}

/* PC/共通 */
#jobsearch .pc-only {
  display: block;
}

#jobsearch .sp-only {
  display: none;
}

/* 求人がないものはクリックできない＋薄く表示（PCリスト用） */
/* #jobsearch .recruit-none a {
  pointer-events: none;
  opacity: 0.4;
} */

#jobsearch h2,
#flow h2,
#faq h2 {
  font-size: 3em;
  text-align: center;
  color: #428791;
  margin-bottom: 120px;
}

#jobsearch h2 .h2-sub,
#flow h2 .h2-sub,
#faq .h2-sub {
  display: block;
  font-size: 0.4em;
  color: #707070;
  line-height: 0.1px;
}

#jobsearch h3 {
  padding-left: 2.2em;
  margin-bottom: 80px;
  padding-bottom: 0.5em;
  background-image: url(../img/top-search-icon.png);
  background-size: 1.5em;
  background-position: bottom 0.7em left;
  border-bottom: 2px solid #FFA500;
}

#jobsearch .area-list,
#jobsearch .job-list {
  margin: 0 auto 120px;
  display: grid;
  grid-template-columns: repeat(4, 200px);
  gap: 60px 5%;
  justify-content: center;
}

#jobsearch .recruit-on a {
  display: block;
  text-align: center;
  border: 2px solid #428791;
  border-radius: 10px;
  padding: 10px 0;
  background-color: #fff;
  font-weight: 500;
  color: #707070;
  transition: .3s;
}

#jobsearch .recruit-on a:hover {
  background-color: #428791;
  color: #fff;
}

.arrow {
  position: relative;
  display: inline-block;
}

.arrow::after {
  content: '';
  width: 8px;
  height: 8px;
  margin-top: -5px;
  border-top: solid 2px #428791;
  border-right: solid 2px #428791;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 0.5em;
}

/* =================================================== */
/* 未記載求人用 */
#jobsearch .recruit-none a {
  display: block;
  pointer-events: none;
  text-align: center;
  border: 2px solid #c3c3c3;
  border-radius: 10px;
  padding: 10px 0;
  background-color: #fff;
  font-weight: 500;
  color: #c3c3c3;
}

/* =================================================== */
.to-other {
  max-width: 1280px;
  margin: 0 auto 120px;
  padding: 60px 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  border-top: 2px solid #FFA500;
}

.banner {
  display: block;
  width: 40%;
}

.banner:hover {
  opacity: 0.7;
}

/* =================================================== */
#flow {
  color: #fff;
  background-color: #FFC966;
  border-radius: 50px;
  padding: 80px 0;
  margin-bottom: 60px;
}

#flow .flow-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1em;
}

#flow h2 .h2-sub {
  color: #fff;
}

#flow .flow-box {
  padding-top: 40px;
  font-family: "M PLUS 1p", sans-serif;
  display: flex;
  align-items: center;
  padding-bottom: 40px;
  border-bottom: 3px solid #FFF7E9;
}

#flow .img-box {
  width: 25%;
}

#flow .img-box img {
  display: block;
  margin: 0 auto;
}

#flow .img1 {
  max-width: 108px;
}

#flow .img2 {
  max-width: 150px;
}

#flow .img3 {
  max-width: 100px;
}

#flow .img4 {
  max-width: 190px;
}

#flow .img5 {
  max-width: 130px;
}

#flow .last-box {
  margin-bottom: 70px;
}

#flow .flow-container {
  width: 75%;
  display: flex;
  align-items: flex-start;
}

#flow .num {
  font-weight: 900;
  color: #FFA500;
  font-size: 1.5em;
  margin-right: 1em;
}

#flow .ttl {
  font-weight: bold;
  font-size: 1.5em;
  margin-bottom: 1em;
}

.to-meet {
  background: #fcedd4;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 1em;
  margin-right: auto;
  max-width: 240px;
  padding: 5px 15px;
  color: #472F04;
  border: 1.5px solid #472F04;
  transition: 0.3s ease-in-out;
  font-weight: 500;
}

.to-meet:before {
  content: '';
  position: absolute;
  top: calc(50% - 2px);
  right: -2em;
  transform: translateY(calc(-50% - 2px)) rotate(30deg);
  width: 12px;
  height: 2.5px;
  background-color: #FFA500;
  transition: 0.3s;
}

.to-meet:after {
  content: '';
  position: absolute;
  top: 50%;
  right: -2em;
  transform: translateY(-50%);
  width: 60px;
  height: 2.5px;
  background-color: #FFA500;
  transition: 0.3s;
}

.to-meet:hover:before,
.to-meet:hover:after {
  right: -2.5em;
}

.to-meet:hover {
  background: #edf6ff;
}



#flow .to-search-btn {
  position: relative;
  display: block;
  width: 60%;
  margin: 0 auto;
  border-radius: 15px;
  text-align: center;
  padding: 1em 0;
  background-color: #428791;
  color: #fff;
  letter-spacing: 0.05em;
  font-weight: bold;
  transition: ease .2s;
}

#flow .to-search-btn:hover {
  background-color: #FFA500;
}

.btnarrow::after {
  content: '';
  position: absolute;
  top: 37%;
  right: 1.5em;
  width: 1em;
  height: 1em;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  transition: all .3s;
}

.btnarrow:hover::after {
  right: 1em;
}

/* ======================================== */
/* FAQ accordion */
#faq {
  padding: 100px 0;
  background-color: #8FC5C1;
}

#faq h2 {
  font-size: 3em;
  text-align: center;
  color: #428791;
  width: 40%;
  margin: 0 auto;
  background-color: #fff;
  padding-top: 50px;
  border-radius: 999px 999px 0 0;
}

.faq-inner {
  width: 95%;
  margin: 0 auto;
  padding: 80px 0;
  background-color: #fff;
}

.accordion-area {
  margin: 0 auto;
  width: 95%;
}

.accordion-area li {
  margin: 10px 0;
}

.accordion-area section {
  border: 1px solid #ccc;
}

.title {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  padding: 0.5em 1.5em;
  transition: all .5s ease;
  color: #428791;
}

.q-icon {
  font-size: 3em;
  font-weight: bold;
}

.question-text {
  display: block;
  width: 80%;
  font-size: 1em;
  padding-left: 40px;
  font-weight: bold;
  letter-spacing: 0.05em;
}

.title::before,
.title::after {
  position: absolute;
  content: '';
  width: 1.5em;
  height: 3px;
  background-color: #428791;
}


.title::before {
  top: 48%;
  right: 2em;
  transform: rotate(0deg);
}

.title::after {
  top: 48%;
  right: 2em;
  transform: rotate(90deg);
}

.title.close {
  background-color: #428791;
  color: #fff;
}

.title.close::before {
  transform: rotate(45deg);
  background-color: #fff;
}

.title.close::after {
  transform: rotate(-45deg);
  background-color: #fff;
}

.box {
  display: none;
  background-color: #fafafa;
  padding: 3%;
  color: #707070;
  font-weight: 500;
}

/* ======================== */
.coming-soon {
  display: none;
}

/* ======================== */

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


  #jobsearch ul {
    gap: 60px 2em;
  }

}

@media screen and (max-width:960px) {
  body {
    font-size: 16px;
  }

  .fv {
    display: block;
    width: 100%;
    height: 100dvh;
    /* overflow: hidden; */
  }

  .fv>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .intro-text1 {
    padding-top: 35px;
    padding-bottom: 50px;
  }

  .intro-text2 {
    padding-bottom: 1em;
  }

  .intro-text3 {
    padding-bottom: 50px;
  }

  #jobsearch h2 {
    font-size: 2.5em;
    margin-bottom: 80px;
  }


  #jobsearch .area-list,
  #jobsearch .job-list {
    grid-template-columns: repeat(2, 200px);
    gap: 40px 3em;
  }

  .to-other {
    display: block;
    align-items: center;
  }

  .banner {
    width: 50%;
    margin: 0 auto;
  }

  /* =================================================== */

  #flow {
    padding: 40px 0;
    margin-bottom: 40px;
  }

  #flow h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
  }

  /* =================================================== */
  #faq {
    padding: 50px 1em;
    background-color: #8FC5C1;
  }

  .question-text {
    padding-left: 20px;
  }


}

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

  .u-600,
  .u-600-fv {
    display: block;
  }

  .o-600 {
    display: none;
  }

  /* .fv {
    height: 100vh;
  } */
  /* 
  .fv-img {
    object-fit: cover;
    object-position: center center;
    width: auto;
    max-width: 600px;
  } */

  .sp-fv {
    height: 100vh;
  }

  .sp-img {
    display: block;
  }

  .bg-line {
    background-position: center center;
    background-size: 200%;
  }

  .intro-text1 {
    padding-top: 2em;
    padding-bottom: 2em;
    margin: 0 0.5em;
  }

  .intro-text2 {
    padding-bottom: 2em;
    margin: 0 0.5em;
  }

  .intro-text3 {
    padding-bottom: 4em;
    margin: 0 0.5em;
  }

  #jobsearch .pc-only {
    display: none;
  }

  #jobsearch .sp-only {
    display: block;
  }

  #jobsearch h3 {
    margin-bottom: 0;
  }

  #jobsearch .select-with-button {
    display: flex;
    align-items: baseline;
    gap: 20px;
  }

  #jobsearch select {
    border: 1px solid #000;
    flex-grow: 1;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;

    border: 2px solid #428791;
    border-radius: 10px;
    padding: 10px 0;
    background-color: #fff;
    font-weight: 500;
    color: #707070;
    margin-top: 60px;
    margin-bottom: 60px;
    padding-left: 0.25em;
  }

  #jobsearch button {
    width: 40%;
    margin: 0 auto;
    color: #fff;
    font-weight: 500;
    padding: 5px 0;
    border-radius: 5px;
    background-color: #428791;
  }

  #jobsearch button[disabled] {
    opacity: 0.5;
    pointer-events: none;
  }

  #flow .flow-inner {
    padding: 0 0.5em;
  }

  #flow .img-box img {
    display: block;
    margin: 0 auto;
  }

  #flow .flow-box {
    display: block;
  }

  #flow .img-box {
    width: 80%;
    margin: 0 auto 1.5em;
  }

  #flow .flow-container {
    width: 80%;
    display: block;
    margin: 0 auto;
    justify-content: center;
  }

  #flow .to-meet {
    margin: 1em auto 0;
  }

  .to-meet:before {
    right: -1.5em;
    width: 10px;
    height: 2px;
  }

  .to-meet:after {
    right: -1.5em;
    transform: translateY(-50%);
    width: 40px;
    height: 2px;
  }

  #faq {
    padding: 40px 0.5em;
    background-color: #8FC5C1;
  }

  #faq h2 {
    width: 60%;
  }

  .faq-inner {
    width: 100%;
    padding: 40px 0;
  }

  .q-icon {
    font-size: 2em;
  }

  .title {
    padding: 0.5em 0.5em;
  }

  .title::before,
  .title::after {
    position: absolute;
    content: '';
    width: 1em;
    height: 2px;
  }

  .title::before {
    right: 0.5em;
  }

  .title::after {
    right: 0.5em;
  }

}

@media screen and (max-width:400px) {
  .u-400 {
    display: block;
  }

  .u-600-fv {
    display: none;
  }

  .recruit-none {
    display: none;
  }

  #jobsearch {
    padding-bottom: 40px;
  }

  #jobsearch h2 {
    font-size: 2em;
    margin-bottom: 40px;
  }

  #jobsearch h3 {
    font-size: 1.2em;
    margin-bottom: 40px;
  }

  #jobsearch select {
    margin-top: 40px;
    margin-bottom: 20px;
  }

  #jobsearch .select-with-button {
    display: flex;
    /* flex のままでOK */
    flex-direction: column;
    /* ← 縦並びにするポイント */
    align-items: stretch;
    /* ← 幅を揃えたい場合 */
    gap: 8px;
    /* 上下の余白（お好みで） */
    margin-bottom: 80px;
  }

  #jobsearch button {
    width: 70%;
  }

  .banner {
    width: 60%;
    margin: 0 auto;
  }


  #flow .img-box,
  #flow .flow-container {
    width: 90%;
  }

  #flow .to-search-btn {
    width: 80%;
    padding: 0.5em 0;
  }

  #faq h2 {
    font-size: 2em;
    padding-top: 1em;
  }

  .question-text {
    width: 87%;
    padding-left: 10px;
  }


}