@charset "UTF-8";

/* 基本設定
---------------------------------------------------------- */
* {
  -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:"HiraMinProN-W3", YuMincho, serif;
}


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: normal;
}

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


/* 画像透過
---------------------------------------------------------- */
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;
  }
}


/* コンテンツ幅
---------------------------------------------------------- */
.w1120 {
  max-width: 1120px;
  margin-inline: auto;
}
.w1200 {
  max-width: 1200px;
  margin-inline: auto;
}
.w1345 {
  max-width: 1345px;
  margin-inline: auto;
}
.w1390 {
  max-width: 1390px;
  margin-inline: auto;
}


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


/* 固定ボタン： sp用
---------------------------------------------------------- */
.fixedBtn {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 18.0em;
  aspect-ratio: 180 / 56;
  background: #fff;
  border-radius: 2.8em;
  z-index: 999;
}


/* header
---------------------------------------------------------- */
header {
  position: fixed;
  display: flex;
  align-items: center;
  height: 80px;
  padding: 0 120px;
  background: #fff;
  z-index: 99;
}
header h1 {
  font-size: 2.4em;
  color: #1683E0;
}
header a {
  display: block;
  position: absolute;
  top: 50%;
  right: 120px;
  transform: translateY(-50%);
  width: 18.em;
}
@media (max-width: 768px){
  header {
    padding: 0 5%;
  }
  header h1 {
    font-size: 1.4em;
  }
}


/* メインビジュアル
---------------------------------------------------------- */
.mv {
  background: url(../images/mv.png) no-repeat 50% 50%;
  background-size: cover;
  width: 100%;
  height: 680px;
  padding-top: 340px;
}
.mv h2 {
  font-size: 3.2em;
  color: #fff;
  text-align: center;
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.16));
}
@media (max-width: 768px){
  .mv h2 {
    font-size: 2.0em;
  }
}


/* タイトル
---------------------------------------------------------- */
h2.ttl {
  max-width: 48.0em;
  margin-bottom: 4.0em;
}


/* 代表挨拶
---------------------------------------------------------- */
.message {
  padding: 12.0em 0 16.0em 4.0em;
}
.messageTxt {
  max-width: 48.0em;
  padding: 8.0em 0;
}
.messageImg {
  width: max(100%, (100% - 48.0em));
  padding-left: 6.5em;
}
@media (max-width: 768px){
  .message {
    padding-right: 4.0em;
  }
  .messageTxt {
    padding-top: 0;
  }
  .messageImg {
    padding: 0;
  }
}


/* 事業紹介
---------------------------------------------------------- */
.works {
  padding-bottom: 16.0em;
}
.works h2.ttl {
  margin: 0 0 0 auto;
}
@media (max-width: 768px){
  .works {
    padding: 0 4.0em 5.0em 4.0em;
  }
}

.worksBox {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: subgrid;
  gap: 0 11.5em;
}
.worksBox > div {
  position: relative;
}
.worksBox > div h3 {
  font-size: 3.2em;
  padding-bottom: 1em;
}
.worksBox > div h3 span {
  font-size: 0.75em;
  color: #1683E0;
}
.worksBox > div img.worksBk {
  position: absolute;
  z-index: -1;
}
.worksBox > div:nth-child(1) {
  margin-top: 7.5em;
  padding-bottom: 24.0em;
}
.worksBox > div:nth-child(1) img {
  max-width: 40.0em;
  margin-bottom: 12.5em;
}
.worksBox > div:nth-child(1) img.worksBk {
  top: -5.5em;
  left: -18.0em;
  max-width: 44.0em;
}
.worksBox > div:nth-child(2) {
  padding-top: 21.0em;
}
.worksBox > div:nth-child(2) img {
  max-width: 45.0em;
  margin-bottom: 22.0em;
}
.worksBox > div:nth-child(2) img.worksBk {
  top: 21.0em;
  right: 0;
  max-width: 47.7em;
}
.worksBox > div:nth-child(3) img {
  max-width: 48.0em;
  margin-bottom: 16.0em;
}
.worksBox > div:nth-child(3) img.worksBk {
  top: -4.5em;
  left: -11.0em;
  max-width: 39.0em;
}
.worksBox > div:nth-child(4) {
  padding-top: 30.0em;
}
.worksBox > div:nth-child(4) img {
  max-width: 44.0em;
  margin-bottom: 10.0em;
}
.worksBox > div:nth-child(4) img.worksBk {
  max-width: 31.1em;
  top: 33.5em;
  right: -4.0em;
}
@media (max-width: 768px){
  .worksBox {
    grid-template-columns: repeat(1, 1fr);
  }
  .worksBox > div {
    margin-bottom: 9.0em;
    padding-bottom: 0!important;
  }
  .worksBox > div h3 {
    font-size: 2.4em;
  }
  .worksBox > div img.worksBk {
    display: none;
  }
  .worksBox > div:nth-child(1) {
    background: url(../images/worksBk1.png) no-repeat 0 0;
    background-size: 100% auto;
    padding-top: 31.0em;
  }
  .worksBox > div:nth-child(2) {
    background: url(../images/worksBk2.png) no-repeat 0 0;
    background-size: 100% auto;
    padding-top: 37.0em;
  }
  .worksBox > div:nth-child(3) {
    background: url(../images/worksBk3.png) no-repeat 0 0;
    background-size: 100% auto;
    padding-top: 34.0em;
  }
  .worksBox > div:nth-child(4) {
    background: url(../images/worksBk4.png) no-repeat 0 0;
    background-size: 100% auto;
    padding-top: 25.0em;
  }
}


/* 募集職種紹介
---------------------------------------------------------- */
.intro {
  padding-bottom: 20.0em;
}
@media (max-width: 768px){
  .intro {
    padding: 0 4.0em 10.0em 4.0em;
  }
}

.sales {
  margin-top: 11.5em;
}
.sales h3 {
  font-size: 3.2em;
}
.sales h3 span {
  display: block;
  font-size: 0.56em;
  color: #1683E0;
}
@media (max-width: 768px){
  .sales {
    margin-top: 6.0em;
  }
  .sales h3 {
    font-size: 2.4em;
  }
}

.salesBox {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: subgrid;
  gap: 0 8.5em;
  margin-bottom: 20.0em;
}
.salesTxt {
  position: relative;
  padding-top: 6.0em;
}
.salesTxt img {
  position: absolute;
  top: 4.0em;
  left: -8.5em;
  width: 22.7em;
  z-index: -1;
}
@media (max-width: 768px){
  .salesBox {
    grid-template-columns: repeat(1, 1fr);
    margin-bottom: 6.0em;
  }
  .salesTxt {
    padding: 6.0em 0 4.0em 0;
  }
}

.salesUnit {
  margin-bottom: 11.0em;
  padding: 0 10.0em 0 7.5em;
}
.salesUnit:nth-child(odd) .salesUnit_txt {
  padding-left: 10.0em;
}
.salesUnit:nth-child(even) .salesUnit_txt {
  padding-right: 7.0em;
}
.salesUnit_txt {
  width: 57.5em;
}
.salesUnit_txt img {
  width: 8.5em;
}
.salesUnit_txt h4 {
  font-size: 2.0em;
  padding: 1em 0;
}
.salesUnit_txt h4 span {
  display: block;
  font-size: 0.9em;
  color: #1683E0;
}
.salesUnit_img {
  width: -webkit-calc(100% - 57.5em);
}
@media (max-width: 768px){
  .salesUnit,
  .salesUnit:nth-child(odd) .salesUnit_txt,
  .salesUnit:nth-child(even) .salesUnit_txt {
    padding: 0;
  }
  .salesUnit {
    margin-bottom: 6.0em;
  }
  .salesUnit_txt, .salesUnit_img {
    width: 100%;
  }
  .salesUnit_txt h4 {
    font-size: 1.8em;
  }
  .salesUnit_txt p {
    padding-bottom: 2.0em;
  }
}


/* 1日のスケジュール
---------------------------------------------------------- */
.schedule {
  position: relative;
  aspect-ratio: 1345 / 2062;
  margin-bottom: 10.0em;
  padding: 0 3.5em;
}
.schedule img.schedule_ttl {
  width: 36.2em;
  margin: 0 10.0em 0 auto;
}
.schedule img.oneday_tree {
  position: absolute;
  top: 34.8em;
  left: 50%;
  width: 10.4em;
  transform: translateX(-50%);
}
.scheduleBox {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: subgrid;
  gap: 0 10.3em;
  padding: 0 63.7em;
}
.scheduleBox > div {
  position: absolute;
  width: 58.5em;
  border: 1px solid #F0AC71;
  padding: 3.0em;
}
.scheduleBox > div:nth-child(1){
  top: 9.5em;
  left: 0;
}
.scheduleBox > div:nth-child(2){
  top: 33.5em;
  right: 0;
}
.scheduleBox > div:nth-child(3){
  top: 53.4em;
  left: 0;
}
.scheduleBox > div:nth-child(4){
  top: 80.0em;
  right: 0;
}
.scheduleBox > div:nth-child(5){
  top: 100.3em;
  left: 0;
}
.scheduleBox > div:nth-child(6){
  top: 133.8em;
  right: 0;
}
.scheduleBox > div:nth-child(7){
  top: 156.4em;
  left: 0;
}
.scheduleBox > div:nth-child(8){
  top: 177.3em;
  right: 0;
}
.scheduleBox > div picture {
  display: none;
}
.scheduleBox .scheduleTxt {
  width: 27.0em;
}
.scheduleBox > div p b {
  font-size: 2.4em;
  color: #F08930;
  line-height: 1.5;
}
.scheduleBox > div p b span {
  display: block;
  font-size: 0.75em;
}
.scheduleBox > div p {
  line-height: 1.5;
}
.scheduleBox .scheduleImg {
  width: -webkit-calc(100% - 27.0em);
  margin-left: 3.0em;
}
@media (max-width: 768px){
  .schedule {
    aspect-ratio: unset;
    transform: unset;
    padding: 0 4.0em;
  }
  .schedule img.schedule_ttl {
    width: 36.2em;
    margin: 0 10.0em 5.0em auto;
  }
  .schedule img.oneday_tree {
    display: none;
  }
  .scheduleBox {
    position: relative;
    top: unset;
    left: unset;
    transform: unset;
    width: 100%;
    grid-template-columns: repeat(1, 1fr);
    gap: 0;
    padding: 0;
  }
  .scheduleBox > div {
    position: relative;
    top: unset!important;
    left: unset!important;
    right: unset!important;
    width: 31.0em;
    margin-bottom: 5.0em;
    padding: 3.0em 2.0em;
  }
  .scheduleBox > div picture {
    display: block;
    position: absolute;
    top: -0.7em;
    left: -2.5em;
    width: 5.9em;
  }
  .scheduleBox > div p b {
    font-size: 2.0em;
  }
  .scheduleBox .scheduleImg {
    width: 100%;
    margin: 3.0em 0 0 0;
  }
  .scheduleBox .scheduleImg img {
    width: 13.4em;
    margin-inline: auto;
  }
  .oneday_tree_sp {
    position: absolute;
    top: 36.0em;
    left: 2.0em;
    width: 1px;
    height: 90%;
  }
}


/* スタッフ紹介
---------------------------------------------------------- */
.interviewBox {
  margin-bottom: 12.0em;
}
@media (max-width: 768px){
  .interviewBox {
    padding: 0 4.0em;
  }
}

.answerBox {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: subgrid;
  gap: 0 7.0em;
  margin-bottom: 10.0em;
}
.answerBox > div h3 {
  font-size: 2.4em;
  padding-top: 2.0em;
}
.answerBox > div h3 span {
  display: block;
  font-size: 0.66em;
}
.answerBox > div p {
  font-size: 2.4em;
  color: #1683E0;
  padding: 1.0em 0 3.0em 0;
}
.answerBox > div a {
  display: block;
  width: 88%;
  margin-left: 1.5em;
}
@media (max-width: 768px){
  .interview {
    padding: 0 4.0em;
  }
  .answerBox {
    grid-template-columns: repeat(1, 1fr);
  }
  .answerBox > div {
    margin-bottom: 10.0em;
  }
}

.interviewUnit picture {
  display: block;
  width: 76.5em;
}
.interviewUnit._reverse .interviewTxt {
  padding-left: 21.4em;
}
.interviewTxt {
  width: -webkit-calc(100% - 76.5em);
  display: grid;;
  place-items: center start;
  padding-left: 8.0em;
}
.interviewTxt img {
  width: 18.5em;
  margin-bottom: 2.0em;
}
.interviewTxt h4 {
  font-size: 4.4em;
  /*color: #1683E0;*/
  padding: 0.5em 0 1.0em 0;
}
.interviewTxt h4 span {
  font-size: 0.36em;
  margin-left: 2.0em;
}
.interviewTxt p.blue {
  color: #1683E0;
}
@media (max-width: 768px){
  .interviewUnit {
    margin-bottom: 6.0em;
  }
  .interviewUnit picture {
    width: 100%;
  }
  .interviewTxt, .interviewUnit._reverse .interviewTxt {
    width: 100%;
    padding-left: 4.0em;
  }
  .interviewTxt h4 {
    font-size: 2.4em;
  }

}

.interview_answer {
  max-width: 94.6em;
  margin-inline: auto;
  padding: 0 0 6.2em 0;
}
.interview_answer h5 {
  font-size: 2.8em;
  color: #1683E0;
  padding-bottom: 1.0em;
}
.interview_answer h5 span {
  display: block;
  padding-bottom: 0.5em;
  font-size: 0.85em;
}
@media (max-width: 768px){
  .interview_answer h5 {
    font-size: 2.4em;
  }
}


/* 福利厚生
---------------------------------------------------------- */
.welfare {
  margin-bottom: 12.0em;
}
.welfareBox1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: subgrid;
  gap: 0 12.0em;
  max-width: 77.5em;
  margin: 0 0 12.0em 26.4em;
}
.welfareBox1 > div img {
  width: 34.5em;
}
.welfareBox1 h3, .welfareBox2 h3 {
  position: relative;
  margin-bottom: 4.0em;
}
.welfareBox1 h3 span, .welfareBox2 h3 span {
  position: relative;
  font-size: 2.8em;
  color: #1683E0;
  margin-bottom: 5.0em;
  padding-right: 0.7em;
  background: #fff;
}
.welfareBox1 h3:before, .welfareBox2 h3:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #1683E0;
}
.welfareBox2 {
  max-width: 89.4em;
  margin-left: 26.4em;
}
.welfareBox2 > div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: subgrid;
}
.welfareBox2 > div picture {
  display: block;
}
.welfareBox2 > div picture:nth-child(1),
.welfareBox2 > div picture:nth-child(2){
  max-width: 34.5em;
}
.welfareBox2 > div picture:nth-child(3) {
  max-width: 46.8em;
  margin-top: 6.0em;
}
@media (max-width: 768px){
  .welfare {
    padding: 0 4.0em;
  }
  .welfareBox1 {
    grid-template-columns: repeat(1, 1fr);
    margin: 0;
  }
  .welfareBox1 > div {
    margin-bottom: 6.0em;
  }
  .welfareBox1 > div img {
    width: 100%;
  }
  .welfareBox1 h3 span, .welfareBox2 h3 span {
    font-size: 2.0em;
  }
  .welfareBox2 {
    margin: 0;
  }
  .welfareBox2 > div {
    grid-template-columns: repeat(1, 1fr);
  }
  .welfareBox2 > div picture {
    max-width: 100%!important;
  }
  .welfareBox2 > div picture:nth-child(1) {
    margin-bottom: 6.0em;
  }
}


/* 募集要項
---------------------------------------------------------- */
.recruit {
  margin-bottom: 14.0em;
}
.recruit_ttl {
  display: grid;
  place-content: center;
  aspect-ratio: 1120 / 220;
  background: url(../images/recruit_Bk.png) no-repeat 0 0;
  background-size: cover;
}
.recruit_ttl img {
  width: 31.1em;
}
@media (max-width: 768px){
  .recruit_ttl {
    aspect-ratio: 1120 / 350;
  }
}

table {
  width: 100%;
  border-collapse: collapse;
}
.recruitTb {
  max-width: 94.3em;
  margin-inline: auto;
  margin-bottom: 20.0em;
}
.recruitTb th, .recruitTb td {
  font-size: 2.0em;
  border-bottom: 1px solid #1683E0;
}
.recruitTb th {
  width: 35%;
  padding: 6.0em 0;
  color: #1683E0;
  vertical-align: top;
}
.recruitTb td {
  padding: 6.0em 3.0em 6.0em 0;
  color: #606060;
  line-height: 1.6;
  text-align: justify;
}
.recruitTb ol {
  counter-reset: number;
}
.recruitTb li {
  position: relative;
  font-size: 2.0em;
  line-height: 1.8;
  padding-left: 2.0em;
}
.recruitTb li::before {
  counter-increment: number;
  content: counter(number);
  position: absolute;
  top: 0.3em;
  left: 0;
  width: 1.2em;
  height: 1.2em;
  border: 1px solid #606060;
  border-radius: 50%;
  font-size: 1.0em;
  text-align: center;
  line-height: 1.2;
}
@media (max-width: 768px){
  .recruitTb {
    margin-bottom: 10.0em;
  }
  .recruitTb th {
    padding: 2.0em 0;
  }
  .recruitTb td {
    padding: 2.0em 2.0em 2.0em 0;
  }
  .recruitTb th, .recruitTb td, .recruitTb li {
    font-size: 1.5em;
  }
}


/* 会社概要
---------------------------------------------------------- */
.companyTb {
  max-width: 94.3em;
  margin-inline: auto;
}
.companyTb h2 {
  font-size: 3.2em;
  color: #606060;
}
.companyTb th, .companyTb td {
  font-size: 2.0em;
  color: #606060;
  padding: 6.0em 0;
  border-bottom: 1px solid #606060;
}
.companyTb th {
  width: 35%;
  vertical-align: top;
}
.companyTb td {
  width: 65%;
  line-height: 1.6;
  text-align: justify;
}
.companyTb td img {
  max-width: 30.0em;
  margin-top: 2.0em;
}
@media (max-width: 768px){
  .companyTb h2 {
    font-size: 2.4em;
    text-align: center;
  }
  .companyTb th, .companyTb td {
    font-size: 1.5em;
    padding: 2.0em 0;
  }
  .companyTb td {
    padding-right: 2.0em;
  }
}


/* footer
---------------------------------------------------------- */
footer {
  background: #4D4D4D;
}
.footerBox {
  padding: 7.0em 0 11.0em 0;
  color: #FAFDFF;
  text-align: center;
}
.footerBox h2 {
  font-size: 2.8em;
  padding-bottom: 2.0em;
}
.footerBox p {
  text-align: center;
}
.footerBox ul {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: subgrid;
  max-width: 91.0em;
  margin-inline: auto;
  margin-top: 8.0em;
}
.footerBox ul li {
  text-align: center;
}
.footerBox ul li a {
  font-size: 1.8em;
  color: #FAFDFF;
}
@media (max-width: 768px){
  .footerBox ul {
    grid-template-columns: repeat(1, 1fr);
  }
  .footerBox ul li {
    padding: 1.0em 0;
  }
}

p.copy {
  color: #1683E0;
  text-align: center;
  padding: 1.0em 0 2.0em 0;
  background: #fff;
}