@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,
.u-400 {
  display: none;
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
header {
  width: 100%;
  font-family: "M PLUS Rounded 1c", sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  /* height: 200px; */
  width: 100%;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.01));
}

header .top {
  background-color: none;
}

header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px;
}

header h1 {
  max-width: 200px;
}

header h1 img {
  display: block;
  width: 100%;
}

header nav ul {
  display: flex;
  align-items: center;
  /* リンクの縦中央 */
  gap: 1rem;
  margin: 0;
  padding: 0;
}

header nav ul li {
  padding: 0.5em 0 0.5em 0.5em;
}

header nav ul li a {
  color: #fff;
  display: inline-block;
  padding: 0.5em 0.25em;
  color: #fff;
  line-height: 1;
  transition: .3s;
  font-weight: 500;
}

header nav ul li a:hover {
  color: #346834;
}

header .sp-nav {
  display: none;
}

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


  header h1 {
    max-width: 180px;
    padding: 10px 0 10px 0.5em;
  }
}

@media screen and (max-width:600px) {
  header h1 {
    /* max-width: 26%; */
    max-width: 130px;
  }
}

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

  header .header-inner {
    padding: 0 0px;
  }


  /* ハンバーガーメニュー */
  header .pc-nav {
    display: none;
  }

  header .sp-nav {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background-color: rgba(255, 247, 233, 0.9);
  }

  header .sp-nav ul {
    /*最初はナビゲーションボタンは非表示*/
    display: none;
    list-style: none;
    /* padding: 40px 20px 20px 0; */
  }

  header .sp-nav li a {
    display: block;
    width: 60%;
    margin: 0 auto;
    padding: 1.5em 0;
    font-size: 20px;
    color: #707070;
    font-weight: bold;
    display: block;
    text-align: center;
    text-decoration: none;
  }


  header .sp-nav li a:hover {
    color: #e3f2f3;
  }

  header .hamburger {
    position: absolute;
    top: 30px;
    right: 20px;
    cursor: pointer;
    width: 32px;
    height: 24px;
    z-index: 10;
  }

  .hamburger span {
    /*3本の線を作る*/
    transition: all .3s;
    position: absolute;
    height: 2px;
    background-color: #FFF;
    width: 100%;
    z-index: 10;
  }

  .hamburger span:nth-of-type(1) {
    /*上の線の位置*/
    top: 4px;
  }

  .hamburger span:nth-of-type(2) {
    /*真ん中の線の位置*/
    top: 12px;
  }

  .hamburger span:nth-of-type(3) {
    /*下の線の位置*/
    top: 20px;
  }

  .hamburger.open span:nth-of-type(1) {
    /*openのとき、上の線を右斜めにする*/
    top: 10px;
    transform: translateY(6px) rotate(-33deg);
    background-color: #FFA500;
  }

  .hamburger.open span:nth-of-type(2) {
    /*真ん中の線を消す*/
    opacity: 0;
  }

  .hamburger.open span:nth-of-type(3) {
    /*下の線を左斜めにする*/
    top: 22px;
    transform: translateY(-6px) rotate(33deg);
    background-color: #FFA500;
  }
}

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


  header .sp-nav li a {
    font-size: 16px;
  }

  header .hamburger {
    top: 20px;
    right: 16px;
  }
}

/* headerここまで */
/* ========================================= */
.end-leaves {
  display: none;
}

footer {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color: #472F04;
  color: #fff;
}

footer a:hover,
footer li a:hover {
  color: #346834;
}

footer .top-footer {
  background-color: #472F04;
}

footer .footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.5em 0.5em 0 0.5em;
}

footer .footer-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5em;
}

footer .footer-logo,
footer .bottom-left {
  width: 30%;
  text-align: center;
}

footer .footer-logo img {
  max-width: 250px;
}

footer .footer-nav,
footer .bottom-right {
  width: 40%;
}

footer .footer-logo {
  text-align: center;
  border-bottom: 5px dashed #fff;
  padding-bottom: 1em;
}

footer .footer-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1em 3em;
  padding-top: 1em;
  font-weight: bold;
}

footer .arrow_s {
  position: relative;
  display: inline-block;
  padding-left: 1em;
  color: #fff;
}

footer .arrow_s::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

footer .vity-intro {
  font-size: 0.7em;
  padding-bottom: 1.5em;
  color: #fff;
}

footer .to-vity-btn {
  display: block;
  max-width: 300px;
  margin: 0 auto;
  padding-bottom: 1em;
}

footer .to-vity-btn:hover {
  opacity: 0.7;
}

footer .footer-leaves {
  width: 53%;
  margin: 0 auto;
}

footer .footer-link {
  display: flex;
  justify-content: space-around;
  font-size: 0.7em;
  padding: 2.5em 0 1em 0;
  border-top: 1px solid #9AB547;
}

footer .footer-link a {
  color: #fff;
}

footer small {
  font-weight: bold;
  color: #fff;
}

@media screen and (max-width:1280px) {
  footer .footer-link {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1em 0;
  }

  footer .footer-link li {
    text-align: center;
  }

}

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

  footer .footer-top,
  footer .footer-bottom {
    display: block;
  }

  footer .footer-logo,
  footer .footer-nav,
  footer .bottom-left,
  footer .bottom-right {
    margin: 0 auto;
  }

  footer .footer-logo,
  footer .bottom-left {
    width: 80%;
  }

  footer .footer-nav,
  footer .bottom-right {
    width: 60%;
  }

  footer .footer-top {
    margin-bottom: 3em;
  }

  footer .footer-logo {
    border-bottom: none;
  }

  footer .bottom-left {
    border-top: 3px dashed #fff;
  }

  footer .vity-intro {
    padding-top: 2em;
  }

  footer .footer-leaves {
    width: 30%;
  }
}

@media screen and (max-width:600px) {
  .end-leaves {
    display: block;
    width: 30%;
    padding-bottom: 4em;
    margin: 0 auto;
  }

  footer .footer-leaves {
    display: none;
  }

  footer .footer-inner {
    padding: 2em 0;
  }

  footer .footer-logo img {
    max-width: 150px;
  }

  footer .footer-nav {
    grid-template-columns: repeat(1, 1fr);
    gap: 2em 0;
    padding: 0;
    text-align: center;
  }

  footer .arrow_s::before {
    content: none;
  }

  footer .footer-top {
    margin-bottom: 1em;
  }

  footer .footer-link {
    grid-template-columns: repeat(1, 1fr);
    padding-top: 1em;
    padding-bottom: 3em;
  }
}

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

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

main {
  background-color: #F0F5CF;
}

/* #fv {
  height: 90vh;
  width: 100%;
  background-image: url(../img/top-fv.jpg);
  background-size: cover;
  background-position: center center;
} */

#fv {
  width: 100%;
  /* height: 100dvh; */
  /* overflow: hidden; */
}

.fv-slide {
  width: 100%;
  position: relative;
  z-index: 1;
}

.pc-moji {
  position: absolute;
  top: 2%;
  right: 5%;
  width: 15%;
  z-index: 10;
}

.item {
  display: block;
  /* width: 100%; */
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.item>img {
  display: block;
}

.intro {
  background-image: linear-gradient(180deg, rgba(202, 217, 117, 1), rgba(202, 217, 117, 0.7) 30%, rgba(202, 217, 117, 0.3) 74%, rgba(202, 217, 117, 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: #B99D10;
  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-repeat: no-repeat;
  background-size: 1.5em;
  background-position: bottom 0.7em left;
  border-bottom: 2px solid #B99D10;
}

#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 #B99D10;
  border-radius: 10px;
  padding: 10px 0;
  background-color: #fff;
  font-weight: 500;
  color: #707070;
  transition: .3s;
}

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

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

.arrow::after {
  content: '';
  width: 8px;
  height: 8px;
  margin-top: -5px;
  border-top: solid 2px #B99D10;
  border-right: solid 2px #B99D10;
  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;
}

@media screen and (max-width:600px) {
  .banner {
    width: 60%;
  }

}

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

#flow {
  color: #fff;
  background-color: #CAD975;
  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: #75A057;
  font-size: 1.5em;
  margin-right: 1em;
}

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

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

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

.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: #FFF3B7;
}

#faq h2 {
  font-size: 3em;
  text-align: center;
  color: #B99D10;
  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: #B99D10;
}

.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: #B99D10;
}


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

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

.title.close {
  background-color: #FFE45B;
  color: #472F04;
}

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

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

.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) {

  .o-960 {
    display: none;
  }

  .u-960 {
    display: block;
  }

  body {
    font-size: 16px;
  }


  .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;
  }

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

  #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 {
    display: block;
  }

  .o-600 {
    display: none;
  }

  .sp-fv {
    position: relative;
    width: 100%;
    /* height: 100dvh; */
    overflow: hidden;
  }

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

  .sp-moji {
    display: block;
    width: 40%;
    position: absolute;
    top: 15%;
    left: 35%;
  }


  .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;
  }

  #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;
  }

  .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 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%;
  }

  #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;
  }


}