@charset "UTF-8";


/* Font設定
---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Noto+Sans+JP:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif+JP:wght@200..900&display=swap');


/* 基本設定
---------------------------------------------------------- */
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 10px;
}
@media screen and (max-width: 1024px){
  * {
    font-size: 0.977vw;
  }
}
@media screen and (max-width: 768px){
  * {
    font-size: 2.67vw;
  }
}


html {
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
}


body {
  width: 100%;
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  color: #494949;
}


header, footer {
	width: 100%;
}

a {
  text-decoration: none;
  color: #000;
}

li {
  list-style: none;
}

img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

h1, h2, h3, h4, h5 {
  font-weight: 500;
}

p {
  font-size: 1.6em;
  line-height: 1.5;
  text-align: justify;
}
@media (max-width: 768px){
  p {
    font-size: 1.4em;
  }
}

table {
  width: 100%;
  border-collapse: collapse;
}


/* 画像透過
---------------------------------------------------------- */
a img:hover {
  transition: 1.0s;
  opacity: 0.5;
}


/* anchor
---------------------------------------------------------- */
.anchor {
  padding-top: 100px;
  margin-top: -100px;
}


/* レスポンシブ対応
---------------------------------------------------------- */
._sp {
  display: none;
}
@media screen and (max-width: 769px) {
  ._pc {
      display: none!important;
  }
  ._sp {
      display: block;
  }
}

/* telリンク（PC無効） */
a[href^="tel:"] {
  pointer-events: none;
}
@media screen and (max-width: 480px) {
  a[href^="tel:"] {
      pointer-events: auto;
  }
}


/* 余白排除
---------------------------------------------------------- */
#wrap {
  width: 100%;
  overflow: hidden;
}


/* 共通レイアウト
---------------------------------------------------------- */
._flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
@media screen and (max-width: 769px){
  ._flex {
    display: block;
  }
}


/* 逆配置 */
._reverse {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
}
@media screen and (max-width: 769px){
  ._reverse {
    display: block;
  }
}


/* 幅調整
---------------------------------------------------------- */
.w1200 {
  max-width: 120.0em;
  margin-inline: auto;
}
.w1344 {
  max-width: 134.4em;
  margin-inline: auto;
}
@media (max-width: 768px){
  .w1200, .w1344 {
    max-width: 90%;
  }
}


/* スペース調整
---------------------------------------------------------- */
.mb30 {
  margin-bottom: 3.0em;
}


/* header
---------------------------------------------------------- */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 99;
}
header h1 {
  font-size: 2.4em;
  color: #F58140;
  padding-left: 5.0em;
}
.entryBtn {
  width: 23.2em;
  margin-right: 5.0em;
}
.fixedBtn {
  display: none;
}
@media (max-width: 768px){
  header h1 {
    font-size: 1.6em;
    padding: 5%;
  }
  .entryBtn {
    display: none;
  }
  .fixedBtn {
    display: block;
    position: fixed;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 98;
  }
}


/* メインビジュアル
---------------------------------------------------------- */
.mv {
  margin-bottom: 11.0em;
}
@media (max-width: 768px){
  .mv {
    width: 90%;
    margin-inline: auto;
  }
}


/* Recruit
---------------------------------------------------------- */
.recruit {
  max-width: 51.0em;
  margin-inline: auto;
  padding-bottom: 12.0em;
}
.recruit h2.ttl {
  width: 16.0em;
  margin-inline: auto;
  padding-bottom: 4.0em;
}

.recruitBox {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: subgrid;
  gap: 0 3.0em; 
}

@media (max-width: 768px){
  .recruit {
    max-width: 90%;
  }
  .recruit h2.ttl {
    width: 10.4em;
  }
}


/* 代表メッセージ
---------------------------------------------------------- */
.messageBk {
  position: relative;
  margin-bottom: 16.0em;
}
.messageBk .orange {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 62%;
  background: #FFEDE4;
  z-index: -1;
}
.messageImg {
  width: 46.4em;
  padding-top: 4.0em;
}
.messageTxt {
  width: calc(100% - 46.4em);
  padding: 0 6.0em 6.0em 0;
}
.messageTxt h2.ttl {
  width: 43.3em;
}
.messageTxt h3 {
  font-size: 3.6em;
  padding: 2.0em 0 1.0em 0;
}
.messageTxt p span {
  font-size: 1.0em;
  color: #F39562;
}
@media (max-width: 768px){
  .messageBk .orange {
    height: 88%;
  }
  .message h2.ttl {
    width: 21.0em;
  }
  .messageImg, .messageTxt {
    width: 100%;
    padding: 0 0 5.0em 0;
  }
  .messageImg img {
    width: 90%;
    margin-inline: auto;
  }
  .messageTxt h3 {
    font-size: 2.0em;
    padding: 1.0em 0;
  }
  .messageTxt p {
    padding-top: 3.0em;
  }
}


/* about us
---------------------------------------------------------- */
.about {
  margin-bottom: 13.0em;
}
.about h2.ttl {
  width: 64.5em;
  padding-bottom: 5.0em;
}

.aboutTxt {
  padding: 0 8.5em;
}
.aboutTxt h3 {
  font-size: 3.2em;
  color: #F58140;
  padding-bottom: 1.5em;
}

@media (max-width: 768px){
  .about h2.ttl {
    width: 24.9em;
  }
  .aboutTxt {
    padding: 0;
  }
  .aboutTxt h3 {
    font-size: 2.0em;
  }
}


/* works
---------------------------------------------------------- */
.works {
  margin-bottom: 12.0em;
  padding: 0 3.0em;
}
.works h2.ttl {
  width: 46.6em;
  margin-left: auto;
  padding-bottom: 9.0em;
}
@media (max-width: 768px){
  .works {
    padding: 0;
  }
  .works h2.ttl {
    width: 24.9em;
    padding-bottom: 6.0em;
  }
}

.worksBox {
  margin-bottom: 6.0em;
}

.worksImg {
  position: relative;
  width: 36.0em;
}
.worksImg h3 {
  position: absolute;
  top: -2.0em;
  right: 3.0em;
  width: 46.7em;
}
@media (max-width: 768px){
  .worksBox {
    margin-bottom: 0;
  }
  .worksImg {
    width: 100%;
  }
  .worksImg img {
    width: 21.2em;
  }
  .worksImg h3 {
    width: 28.1em;
  }
  .worksImg h3 img {
    width: 100%;
  }
}

.worksTxt {
  width: calc(100% - 36.0em);
  padding: 8.0em 8.5em 0 0;
}
.worksTxt h4 {
  font-size: 3.2em;
  color: #F58140;
  padding-bottom: 1.5em;
}
@media (max-width: 768px){
  .worksTxt {
    width: 100%;
    padding: 6.0em 0;
  }
  .worksTxt h4 {
    font-size: 2.0em;
  }
}

.worksBox2 {
  padding: 4.0em 2.0em 7.0em 2.0em;
  background: #FFF5EF;
}
.worksBox2 h3 {
  width: 15.1em;
  margin-inline: auto;
  padding-bottom: 7.0em;
}
@media (max-width: 768px){
  .worksBox2 {
    padding-bottom: 1.0em;
  }
}

.worksInBox {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: subgrid;
  gap: 0 3.0em;
}
.worksInBox > div {
  border: 1px solid #F58140;
  background: #fff;
  padding: 1.5em;
}
.worksInBox > div img {
  width: 10.4em;
  margin-inline: auto;
}
.worksInBox > div p {
  padding-top: 4.0em;
}
@media (max-width: 768px){
  .worksInBox {
    grid-template-columns: repeat(1, 1fr);
  }
  .worksInBox > div {
    margin-bottom: 4.0em;
  }
}


/* attraction
---------------------------------------------------------- */
.attraction h2.ttl {
  width: 55.6em;
  margin-inline: auto;
  padding-bottom: 6.0em;
}
@media (max-width: 768px){
  .attraction h2.ttl {
    width: 30.0em;
  }
}

.attractionBox {
  position: relative;
  width: 100%;
  margin-bottom: 8.0em;
  padding: 0 5.0em 4.0em 5.0em;
}
.attractionBox .orangeBk1 {
  width: 17.8em;
  aspect-ratio: 178 / 156;
  z-index: -1;
}
.attractionBox._flex .orangeBk1 {
  position: absolute;
  top: 0;
  right: 0;
}
.attractionBox._reverse .orangeBk1 {
  position: absolute;
  top: 0;
  left: 0;
}
.attractionBox .orangeBk2 {
  width: 25.0em;
  aspect-ratio: 251 / 143;
  z-index: -1;
}
.attractionBox._flex .orangeBk2 {
  position: absolute;
  bottom: 0;
  left: 0;
}
.attractionBox._reverse .orangeBk2 {
  position: absolute;
  bottom: 0;
  right: 0;
}
.attractionImg {
  width: 32.8em;
}
.attractionTxt {
  width: calc(100% - 32.8em);
}
.attractionTxt h3 {
  font-size: 3.2em;
  color: #F58140;
  padding-bottom: 2.0em;
}
._flex .attractionTxt {
  padding: 9.0em 0 0 16.0em;
}
._reverse .attractionTxt {
  padding: 9.0em 16.0em 0 0;
}
@media (max-width: 768px){
  .attractionBox {
    padding: 2.0em;
  }
  .attractionImg, .attractionTxt {
    width: 100%;
  }
  .attractionTxt h3 {
    font-size: 2.0em;
  }
  ._flex .attractionTxt, ._reverse .attractionTxt {
    padding: 6.0em 0;
  }
}


/* Reason
---------------------------------------------------------- */
.reason {
  background: url(../images/Reason_bk.png) no-repeat 50% 50%;
  background-size: cover;
  margin-bottom: 9.0em;
  padding: 7.0em 9.0em 17.0em 9.0em;
}
.reason h2.ttl {
  width: 28.9em;
  margin-inline: auto;
  padding-bottom: 6.0em;
}
@media (max-width: 768px){
  .reason {
    padding: 2.0em 2.0em 6.0em 2.0em;
  }
  .reason h2.ttl {
    width: 15.0em;
  }
}

.reasonBox1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: subgrid;
  gap: 0 6.0em;
  margin-bottom: 6.0em;
}
.reasonBox2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: subgrid;
  gap: 0 6.0em;
  padding: 0 18.5em;
}
@media (max-width: 768px){
  .reasonBox1, .reasonBox2 {
    grid-template-columns: repeat(1, 1fr);
    gap: 6.0em 0;
    padding: 0 2.0em;
  }
}

.attractionUnit {
  max-width: 120.0em;
  margin-inline: auto;
  margin-bottom: 13.0em;
}
.attractionUnit_img {
  width: 33.0em;
  padding-top: 8.0em;
}
.attractionUnit_txt {
  width: calc(100% - 33.0em);
}
.attractionUnit_txt h3 {
  font-size: 3.2em;
  color: #F59461;
  padding-bottom: 2.0em;
}
.attractionUnit_txt h3 span {
  display: block;
  font-size: 0.62em;
  padding-bottom: 2.0em;
}
._flex .attractionUnit_txt {
  padding: 6.0em 0 0 15.0em;
}
._reverse .attractionUnit_txt {
  padding: 6.0em 15.0em 0 6.0em;
}
@media (max-width: 768px){
  .attractionUnit {
    max-width: 90%;
  }
  .attractionUnit_img {
    width: 100%;
  }
  ._flex .attractionUnit_img, ._reverse .attractionUnit_img {
    padding: 0;
  }
  .attractionUnit_txt {
    width: 100%;
  }
  .attractionUnit_txt h3 {
    font-size: 2.0em;
  }
  ._flex .attractionUnit_txt, ._reverse .attractionUnit_txt {
    padding: 2.0em 0;
  }
}


/* Training Flow
---------------------------------------------------------- */
.flow {
  padding: 19.0em 0 8.0em 0;
}
@media (max-width: 768px){
  .flow {
    padding: 0 0 8.0em 0;
  }
  .flow .goal {
    margin-top: 3.0em;
  }
}


/* employee benefits
---------------------------------------------------------- */
.benefits {
  padding-bottom: 14.0em;
}
.benefits h2.ttl {
  width: 68.5em;
  margin-inline: auto;
  padding-bottom: 5.0em;
}
.benefitsBox {
  padding: 4.0em 0;
}
.benefitsBox > div._pc {
  width: 52.7em;
  margin-inline: auto;
}
.benefitsInBox img {
  margin-bottom: 1.0em;
}
@media (max-width: 768px){
  .benefits h2.ttl {
    width: 35.0em;
  }
  .benefitsInBox img {
    width: 90%;
    margin-inline: auto;
    margin-bottom: 2.0em;
  }
}


/* Voice
---------------------------------------------------------- */
.voice {
  padding-bottom: 4.0em;
}
.voiceTtl {
  background: url(../images/ttl_bk.png) no-repeat 0 0;
  background-size: 100% 100%;
  display: grid;
  place-items: center start;
  margin-bottom: 9.0em;
  padding: 3.0em 13.0em;
}
.voiceTtl img {
  max-width: 13.0em;
}
.voiceBox {
  width: 112.6em;
  margin-bottom: 8.0em;
}
.voiceBox._flex {
  margin-left: 4.0em;
}
.voiceBox._reverse {
  margin-left: 6.0em;
}
.voiceImg {
  width: 23.0em;
}
.voiceTxt {
  width: calc(100% - 23.0em);
}
.voiceTxt h3 {
  font-size: 1.8em;
  color: #F58140;
  padding-bottom: 1.0em;
}
._flex .voiceTxt {
  padding-left: 4.5em;
}
._reverse .voiceTxt {
  padding-right: 6.0em;
}
.voiceInBox {
  padding: 2.0em 2.5em 5.0em 2.5em;
  border: 1px solid #F58140;
  border-radius: 4.0em;
  background: #FFF5EF;
}
.voiceInBox h4 {
  font-size: 1.8em;
  color: #F58140;
  background: linear-gradient(transparent 60%, #F5E3D8 60%);
  margin-bottom: 1.0em;
}

@media (max-width: 768px){
  .voiceTtl {
    margin-bottom: 5.0em;
  }
  .voiceBox, .voiceTxt {
    width: 100%;
  }
  .voiceBox._flex, .voiceBox._reverse {
    margin: 0;
  }
  ._flex .voiceTxt, ._reverse .voiceTxt {
    padding: 0;
  }
  .voiceImg {
    margin-inline: auto;
  }
  .voiceTxt h3 {
    text-align: center;
  }
  .voiceInBox {
    margin-bottom: 6.0em;
  }
}


/* Q&A
---------------------------------------------------------- */
.qa {
  padding-bottom: 6.0em;
}
.qa h2.ttl {
  width: 27.6em;
  padding-bottom: 5.0em;
}
.qaBox > div {
  padding: 3.0em 3.5em;
}
.qaBox > div:nth-child(odd) {
  padding: 3.0em 3.5em 4.5em 3.5em;
}
.qaBox > div:nth-child(even) {
  background: #FFF5EF;
}
.qaBox > div th img {
  width: 2.6em;
}
.qaBox > div th, .qaBox > div td {
  border-bottom: 1px solid #FFDBC7;
}
.qaBox > div th {
  width: 16.4em;
  padding: 1.0em 0 1.0em 4.5em;
}
.qaBox > div td {
  padding: 1.0em 0 1.0em 1.0em;
  font-size: 1.6em;
  line-height: 1.5;
}
@media (max-width: 768px){
  .qa.w1200 {
    max-width: 100%;
  }
  .qa h2.ttl {
    width: 15.0em;
    margin-left: 5%;
  }
  .qaBox > div, .qaBox > div:nth-child(odd) {
    padding: 3.0em 0;
  }
  .qaBox > div th {
    width: 6.0em;
    padding: 1.0em 0 1.0em 3.0em;
    vertical-align: top;
  }
  .qaBox > div td {
    padding: 1.0em;
  }
  .qaBox > div th img {
    width: 1.8em;
    margin-top: 0.5em;
  }
}


/* 採用までの流れ
---------------------------------------------------------- */
.flow2 {
  padding-bottom: 8.0em;
}
.flow2 h2.ttl {
  width: 43.6em;
  margin-inline: auto;
  padding-bottom: 3.0em;
}
.flow2 picture {
  display: block;
  max-width: 60.9em;
  margin-inline: auto;
}
@media (max-width: 768px){
  .flow2 h2.ttl {
    width: 30.0em;
  }
}


/* 募集要項
---------------------------------------------------------- */
.jobTtl {
  background: url(../images/ttl_bk.png) no-repeat 0 0;
  background-size: 100% 100%;
  display: grid;
  place-items: center start;
  margin-bottom: 9.0em;
  padding: 3.0em 13.0em;
}
.jobTtl img {
  max-width: 38.5em;
  margin-inline: auto;
}
.jobLink {
  max-width: 72.2em;
  margin-inline: auto;
  padding-bottom: 4.0em;
}
.jobLink a {
  display: block;
  width: 25.6em;
}
.jobTb {
  max-width: 108.0em;
  margin-inline: auto;
  border-top: 1px solid #FFDBC7;
}
.jobTb th, .jobTb td {
  padding: 3.0em 0;
  border-bottom: 1px solid #FFDBC7;
}
.jobTb th {
  width: 37.0em;
}
.jobTb th p {
  font-size: 2.0em;
  color: #F58140;
  padding-left: 3.0em;
  border-left: 0.4em solid #F58140;
}
.jobTb th p span {
  font-size: 0.6em;
  color: #FFCFB4;
  padding-left: 8.0em;
}
.jobTb td {
  font-size: 1.8em;
  line-height: 1.3;
}
.jobTb td span {
  font-size: 1.0em;
  line-height: 1.3;
  color: #F58140;
}
.jobEntryBtn {
  max-width: 38.0em;
  margin: 7.0em auto 12.0em auto;
}

@media (max-width: 768px){
  .jobTtl {
    margin-bottom: 5.0em;
    padding: 3.0em 0;
  }
  .jobTtl img {
    max-width: 24.9em;
  }
  .jobLink a {
    margin-inline: auto;
  }
  .jobLink a:first-child {
    margin-bottom: 2.0em;
  }
  .jobTb th, .jobTb td {
    display: block;
    width: 100%;
  }
  .jobTb th p, .jobTb th p span {
    padding-left: 1.0em;
  }
  .jobTb th p {
    font-size: 1.8em;
  }
  .jobTb td {
    font-size: 1.4em;
  }
}


/* footer
---------------------------------------------------------- */
footer {
  background: url(../images/footer_bk.png) no-repeat 50% 50%;
  background-size: cover;
  padding: 10.0em 0 8.0em 0;
}
footer h2 {
  font-size: 2.4em;
  color: #F58140;
  text-align: center;
  
}
footer p {
  font-size: 1.8em;
  color: #F58140;
  text-align: center;
  padding-top: 3.0em;
}
@media (max-width: 768px){
  footer {
    padding: 10.0em 0;
  }
  footer p {
    padding-top: 2.0em;
  }
}


/* フォーム
---------------------------------------------------------- */
.btnBox {
  max-width: 24.0em;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.btnBox a {
  margin: 0;
}
@media (max-width: 768px){
  .btnBox {
    max-width: 8.0em;
    display: block;
  }
  .btnBox a:last-child {
    display: none;
  }
}

.entryMv {
  max-width: 134.5em;
  margin-inline: auto;
  padding-top: 20.0em;
}
@media (max-width: 768px){
  .entryMv {
    padding-top: 10.0em;
  }
}

.formBox {
  max-width: 134.5em;
  margin-inline: auto;
  padding-bottom: 6.0em;
}

.form_item {
  padding: 5.0em 6.0em;
}
.form_item > div {
  width: calc(100% - 36.0em);
  margin-left: 6.0em;
}
.form_item > div p span {
  display: block;
  font-size: 0.75em;
}
.form_item > div p.kind {
  line-height: 2.0;
}
.form_item label {
  display: flex;
  align-items: center;
  width: 36.0em;
  font-size: 1.8em;
  color: #F58140;
}
.form_item label span {
  display: block;
  width: 7.4rem;
  height: 3.6rem;
  margin: 0 0 0 auto;
  background: #F69158;
  font-size: 100%;
  color: #fff;
  line-height: 3.6rem;
  text-align: center;
}
input[type=text]{
  width: 100%;
  padding: 1.5%;
  border: 1px solid #CECECE;
  font-size: 100%;
}
select {
  width: 6.0em;
  padding: 1.5%;
  border: 1px solid #CECECE;
  font-size: 100%;
}
option {
  font-size: 100%;
}

.submit {
  width: 13.4em;
  margin: 6.0em auto;
}
button[type="submit"]{
  border: none;
  background: unset;
}

@media (max-width: 768px){
  .form_item {
    padding: 3.0em 2.0em;
  }
  .form_item label, .form_item > div {
    width: 100%;
  }
  .form_item label {
    padding-bottom: 1.0em;
    font-size: 1.6em;
  }
  .form_item > div {
    margin: 0;
  }
}