@charset "UTF-8";

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

common parts

===============================================================*/
.top__h_nav li:first-child {
  display: none;
}

.top_sec_ttl {
  font-size  : clamp(2.3rem, 1.558rem + 2vw, 5rem);
  font-weight: 500;
}

.top__h_nav ul li:nth-child(2) {
  border-left: 2px solid #76A7C3;
}

/* --------------------------------------------------------------

レスポンシブ

----------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  .top__h_nav li:first-child {
    display: flex;
  }


  .top__h_nav ul li:nth-child(2) {
    border-left: none;
  }

}


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

mv

===============================================================*/
@media screen and (max-width: 1024px) {
  .mv {
    margin-top: 64px;
  }
}


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

top_about

===============================================================*/
.top_about {
  padding   : 120px 0;
  background: #F4F4F4;
}

.top_about .introduction {
  display        : flex;
  justify-content: space-between;
  position       : relative;
}

.top_about .introduction .left {
  width         : 100%;
  padding-bottom: 4%;
  position      : relative;
  z-index       : 10;
}

.top_about .introduction h2 {
  font-size  : clamp(2rem, 1.67rem + 1vw, 3.2rem);
  font-weight: 500;
  color      : #0B5883;
  line-height: 1.7;
}

.top_about .introduction h3 {
  font-size  : clamp(2.4rem, 2.5vw, 3.8rem);
  font-weight: 500;
  line-height: 1.5;
  margin     : 12px 0 25px;
}

.top_about .introduction p {
  font-size  : clamp(1.6rem, 1.4vw, 2.2rem);
  line-height: 1.8;
}

.top_about .introduction .right {
  width   : 34%;
  position: absolute;
  bottom  : 0;
  right   : 0;
}

.top_about .content {
  background   : #fff;
  padding      : 60px 75px 0;
  text-align   : center;
  border       : 3px solid #BAD966;
  border-radius: 12px;
  position     : relative;
}

.top_about .content p {
  font-size  : clamp(1.6rem, 1.5vw, 2.0rem);
  line-height: 1.6;
  margin     : 30px 0 45px;
  text-align : left;
}

/* --------------------------------------------------------------

レスポンシブ

----------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  .top_about {
    padding: 100px 0;
  }
}


@media screen and (max-width: 960px) {
  .top_about {
    padding: 60px 0;
  }

  .top_about .introduction {
    flex-direction: column;
  }

  .top_about .introduction p {
    font-size: clamp(1.25rem, 0.989rem + 0.6vw, 2.2rem);
  }

  .top_about .introduction h2 {
    font-size: clamp(1.7rem, 1.288rem + 1vw, 3.2rem);
  }

  .top_about .introduction h3 {
    font-size: clamp(1.9rem, 1.378rem + 1.25vw, 3.8rem);
  }

  .top_about .introduction .left {
    padding-bottom: 8%;
  }

  .top_about .introduction .right {
    position : static;
    margin   : 0 auto;
    width    : 40%;
    min-width: 180px;
  }

  .top_about .content {
    padding: 30px 25px;
  }

  .top_about .content p {
    font-size: clamp(1.2rem, 0.98rem + 0.5vw, 2rem);
  }
}


@media screen and (max-width: 768px) {
  .top_about {
    padding: 35px 0 50px;
  }

  .top_about .introduction h2 {
    font-size: clamp(1.7rem, 1.288rem + 1vw, 3.2rem);
  }

  .top_about .introduction h3 {
    margin: 5px 0 13px;
  }

  .top_about .content p {
    margin: 15px 0 25px;
  }
}


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

top_voice

===============================================================*/
.top_voice {
  padding        : 100px 0 120px;
  background     : url(../img/top_voice_bg.jpg) no-repeat;
  background-size: cover;
}

.top_voice .top_sec_ttl {
  color     : #fff;
  text-align: center;
}

.top_voice .lead {
  font-size    : clamp(1.6rem, 1.1vw, 2.0rem);
  line-height  : 1.6;
  color        : #fff;
  padding      : 30px 40px;
  margin       : 60px auto;
  background   : #2E2A24;
  width        : 70%;
  max-width    : 1000px;
  border-radius: 10px;
}

.top_voice ul {
  display        : flex;
  flex-wrap      : wrap;
  justify-content: space-between;
}

.top_voice ul .left,
.top_voice ul .right {
  width: 48%;
}

.top_voice ul li {
  font-size    : clamp(1.7rem, 1.7vw, 2.5rem);
  font-weight  : 500;
  padding      : 22px 5%;
  background   : #fff;
  border-radius: 40px;
  margin-bottom: 30px;
}

/* --------------------------------------------------------------

レスポンシブ

----------------------------------------------------------------*/
@media screen and (max-width: 960px) {
  .top_voice {
    padding: 60px 0;
  }

  .top_voice .lead {
    width    : 100%;
    padding  : 20px 25px;
    margin   : 5% auto;
    font-size: clamp(1.2rem, 0.925rem + 1vw, 2.2rem);
  }

  .top_voice ul .left,
  .top_voice ul .right {
    width: 100%;
  }

  .top_voice ul li {
    width        : 100%;
    font-size    : clamp(1.3rem, 0.97rem + 1vw, 2.5rem);
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 768px) {
  .top_voice {
    padding: 40px 0 50px;
  }

  .top_voice ul li {
    padding      : 15px 10px 15px 20px;
    margin-bottom: 10px;
  }
}


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

top_recruit

===============================================================*/
.top_recruit {
  padding: 80px 0;
}

.top_recruit .content {
  background   : #006956;
  padding      : 10px;
  border-radius: 10px;
  width        : 70%;
  max-width    : 1000px;
  margin       : 0 auto;
  color        : #fff;
  position     : relative;
}

.top_recruit .content .inner {
  border         : 3px solid #fff;
  border-radius  : 10px;
  /* padding     : 35px 65px 35px 50px; */
  padding        : 35px 3%;
  display        : flex;
  justify-content: space-between;
  position       : relative;
}

.top_recruit .content .left {
  width   : 26%;
  position: absolute;
  left    : 5%;
  bottom  : -12px;
}

.top_recruit .content .right {
  width      : 65%;
  margin-left: auto;
}

.top_recruit .content h3 {
  font-size: clamp(3.5rem, 3.5vw, 5.5rem);
}

.top_recruit .content h3 span {
  font-size: clamp(3.0rem, 2.8vw, 4.5rem);
}

.top_recruit .content dl {
  font-size  : 2.2rem;
  font-size  : clamp(1.4rem, 1.5vw, 2.2rem);
  font-weight: 300;
  line-height: 1.5;
  display    : flex;
  flex-wrap  : wrap;
  align-items: center;
  margin     : 20px 0 10px;
}

.top_recruit .content dl dt {
  width      : 22.5%;
  font-weight: 300;
  position   : relative;
}

.top_recruit .content dl dd {
  width: 70%;
}

.top_recruit .content dl dd::before {
  content  : "：";
  display  : inline-block;
  font-size: clamp(1.6rem, 1.5vw, 2.2rem);
}

.top_recruit .content p {
  font-size: clamp(1.7rem, 1.8vw, 2.5rem);
}


/* --------------------------------------------------------------

レスポンシブ

----------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
  .top_recruit {
    padding: 80px 60px;
  }

  .top_recruit .content {
    width: 100%;
  }
}

@media screen and (max-width: 960px) {
  .top_recruit {
    padding: 60px;
  }

  .top_recruit .content dl dt {
    width    : 18%;
    min-width: 85px;
  }
}

@media screen and (max-width: 768px) {
  .top_recruit {
    padding: 30px 20px;
  }

  .top_recruit .content {
    padding: 5px;
  }

  .top_recruit .content .inner {
    padding: 20px 3% 25px;
  }

  .top_recruit .content .left {
    display: none;
  }

  .top_recruit .content .right {
    width: 100%;
  }

  .top_recruit .content h3 {
    font-size: clamp(2.8rem, 2.058rem + 1.8vw, 5.5rem);
  }

  .top_recruit .content h3 span {
    font-size: clamp(2.3rem, 1.695rem + 1.4vw, 4.5rem);
  }

  .top_recruit .content dl {
    font-size  : clamp(1.25rem, 0.989rem + 0.6vw, 2.2rem);
    line-height: 1.75;
    margin     : 10px 0 8px;
  }

  .top_recruit .content dl dt {
    width    : 90px;
    min-width: auto;
  }

  .top_recruit .content dl dt:after {
    font-size: 1.25rem;
  }

  .top_recruit .content dl dd {
    width: calc(100% - 90px);
  }

  .top_recruit .content p {
    font-size: clamp(1.3rem, 0.97rem + 1vw, 2.5rem);
  }
}