/*---------------------------------------------
    common
---------------------------------------------*/
.more {
  text-align: right;
}
.more a {
  border-bottom: #13334c solid 5px;
  display: inline-block;
  font-family: "Acumin Variable Concept", "Josefin Sans", sans-serif;
  font-size: 1.4rem;
  font-weight: bold;
  padding: 0 5px 4px;
}

.section-ttl {
  margin: 0 auto 16px;
  text-align: center;
}
@media screen and (min-width: 821px) {
  .section-ttl {
    margin-bottom: 40px;
  }
}
.section-ttl .en {
  color: #0073bd;
  display: block;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.2;
  margin-bottom: 4px;
  position: relative;
  text-align: center;
}
@media screen and (min-width: 821px) {
  .section-ttl .en {
    font-size: 3.6rem;
    margin-bottom: 8px;
  }
}
.section-ttl .ja {
  background: #0073bd;
  color: #fff;
  display: inline-block;
  font-size: 1.2rem;
  padding: 0 12px;
}
@media screen and (min-width: 821px) {
  .section-ttl .ja {
    font-size: 1.8rem;
    padding: 0 16px 2px;
  }
}

.btn {
  text-align: right;
}
.btn a .icon {
  background: #9fa0a0;
  border-radius: 50%;
  color: #fff;
  margin-right: 4px;
  position: relative;
  top: 3px;
  transform: rotate(90deg);
}

.flex-box {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 820px) {
  .flex-box {
    flex-direction: column;
  }
}

/*---------------------------------------------
    main img
  ---------------------------------------------*/
.mv {
  height: auto;
  margin: 0 auto;
  position: relative;
  width: 100%;
}
@media screen and (max-width: 1024px) {
  .mv {
    height: 100vh;
  }
}
@media screen and (max-width: 820px) {
  .mv {
    width: 100%;
  }
}
.mv .bx-wrapper {
  background: none;
  border: 0;
  box-shadow: none;
  margin-bottom: 0;
}
@media screen and (max-width: 1024px) {
  .mv .bx-wrapper {
    margin-bottom: 0;
  }
}
.mv .bx-wrapper img {
  width: 100%;
}
.mv .main-catch {
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 30%;
  width: 78%;
}
@media screen and (min-width: 821px) {
  .mv .main-catch {
    top: 6%;
    width: 48%;
  }
}

/*---------------------------------------------
    news
---------------------------------------------*/
.news {
  bottom: 14%;
  left: 0;
  margin: auto;
  max-width: 560px;
  padding: 16px;
  padding: 8px;
  position: absolute;
  right: 0;
  width: 86%;
}
.news dt {
  background: #fff;
  color: #0073bd;
  display: inline-block;
  font-size: 1.6rem;
  font-style: italic;
  font-weight: bold;
  padding: 0 24px;
  text-align: left;
}
@media screen and (min-width: 821px) {
  .news dt {
    font-size: 2.6rem;
  }
}
.news dd {
  background: #fff;
  display: flex;
  gap: 16px;
  padding: 6px 24px;
  position: relative;
}
.news dd .date {
  font-size: 1.2rem;
  line-height: 1.4;
}
@media screen and (min-width: 821px) {
  .news dd .date {
    font-size: 1.6rem;
  }
}
.news dd .ttl {
  font-size: 1.2rem;
  line-height: 1.4;
}
@media screen and (min-width: 821px) {
  .news dd .ttl {
    font-size: 1.6rem;
    margin-left: 2em;
  }
}

/*---------------------------------------------
    about
---------------------------------------------*/
.about {
  background: #0073bd;
  color: #fff;
  padding: 0 6%;
  padding-bottom: 40px;
  padding-top: 80px;
}
@media screen and (min-width: 821px) {
  .about {
    padding: 80px 2% 40px;
    width: 50%;
  }
}
.about .catch {
  height: auto;
  margin: 0 auto 16px;
  max-width: 780px;
  width: 100%;
}
@media screen and (min-width: 821px) {
  .about .catch {
    margin-bottom: 24px;
    max-width: 580px;
  }
}
.about .catch img {
  width: 100%;
}
.about .txt {
  padding: 0 4%;
  text-align: justify;
}
@media screen and (min-width: 821px) {
  .about .txt {
    line-height: 2;
    margin: 0 auto;
    max-width: 580px;
  }
}

/*0---------------------------------------------
    contact
---------------------------------------------*/
.contact {
  background: #13ae67;
  color: #fff;
  margin: 0 auto;
  max-width: 560px;
  padding: 16px 0;
  text-align: center;
  width: 86%;
}
.contact dl dt {
  border-bottom: #fff solid 1px;
  font-size: 2rem;
  margin: 0 16px 4px;
  padding-bottom: 4px;
}
.contact dl dt img {
  height: 20px;
  left: -4px;
  position: relative;
  top: 3px;
}
.contact dl dd {
  font-size: 1.4rem;
}

/*---------------------------------------------
    service
---------------------------------------------*/
.service {
  background: #e6e6e6;
  padding: 40px 0;
}
@media screen and (min-width: 821px) {
  .service {
    padding-bottom: 0;
    padding-top: 70px;
    width: 50%;
  }
}
@media screen and (min-width: 821px) {
  .service .section-ttl {
    margin-bottom: 12px;
  }
  .service .section-ttl br {
    display: none;
  }
  .service .section-ttl .space {
    margin-left: 0.5em;
  }
  .service .section-ttl .en {
    display: inline-block;
  }
  .service .section-ttl .ja {
    display: inline-block;
    margin-left: 0.8em;
    position: relative;
    top: -6px;
  }
}
.service .inner {
  margin: 0 auto;
  max-width: 680px;
  width: 90%;
}
.service .inner .img {
  border: #0073bd solid 4px;
}
@media screen and (min-width: 821px) {
  .service .inner .img {
    margin: 0 auto;
    max-width: 380px;
  }
}
.service .inner .img img {
  display: block;
}
.service .inner dl dt {
  background: #e60012;
  border-radius: 14px;
  box-shadow: 5px 4px 0 #fff;
  color: #fff;
  font-size: 1.2rem;
  margin: 0 auto;
  padding: 6px 0;
  position: relative;
  text-align: center;
  top: -16px;
  width: 90%;
  z-index: 999;
}
@media screen and (min-width: 821px) {
  .service .inner dl dt {
    font-size: 1.6rem;
  }
}
.service .inner dl dd {
  margin-bottom: 24px;
  padding: 0 7%;
  position: relative;
  text-align: justify;
  top: -8px;
}
.service .inner dl dd .txt {
  margin-bottom: 8px;
}
@media screen and (min-width: 821px) {
  .service .inner dl dd .txt {
    font-size: 1.4rem;
    line-height: 1.4;
  }
}
.service .inner dl dd .btn a {
  color: #0073bd;
  font-weight: 600;
  text-decoration: underline;
}

/*---------------------------------------------
    insta
---------------------------------------------*/
.insta {
  background: #fff;
  padding: 40px;
}
@media screen and (min-width: 821px) {
  .insta {
    padding: 40px 0 40px;
  }
}
@media screen and (min-width: 821px) {
  .insta .inner {
    margin: 0 auto;
    width: 80%;
  }
}
.insta .inner ul {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.insta .inner ul li {
  width: calc(50% - 8px);
}
@media screen and (min-width: 821px) {
  .insta .inner ul li {
    width: calc(25% - 12px);
  }
}

/*---------------------------------------------
    company
---------------------------------------------*/
.company {
  background: #0073bd;
  padding: 24px 0;
}
@media screen and (min-width: 821px) {
  .company {
    padding: 70px 0 30px;
    width: 50%;
  }
}
.company .section-ttl .en {
  color: #fff;
}
.company .section-ttl .ja {
  background: #fff;
  color: #0073bd;
}
.company .inner {
  margin: 0 auto;
  max-width: 1180px;
  width: 90%;
}
.company .inner .img {
  border: #fff solid 4px;
}
.company .inner .img img {
  display: block;
}
.company .inner dl dt {
  background: #e60012;
  border-radius: 14px;
  box-shadow: 5px 4px 0 #fff;
  color: #fff;
  font-size: 1.2rem;
  margin: 0 auto;
  padding: 6px 0;
  position: relative;
  text-align: center;
  top: -16px;
  width: 90%;
  z-index: 999;
}
@media screen and (min-width: 821px) {
  .company .inner dl dt {
    font-size: 1.6rem;
  }
}
.company .inner dl dd {
  color: #fff;
  margin-bottom: 24px;
  padding: 0 7%;
  position: relative;
  text-align: justify;
  top: -8px;
}
@media screen and (min-width: 821px) {
  .company .inner dl dd {
    margin-bottom: 0;
  }
}
.company .inner dl dd .txt {
  margin-bottom: 8px;
}
@media screen and (min-width: 821px) {
  .company .inner dl dd .txt {
    font-size: 1.4rem;
    line-height: 1.4;
  }
}
.company .inner dl dd .btn {
  text-align: right;
}
.company .inner dl dd .btn a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
}

.recruit {
  background: #e6e6e6;
  padding: 24px 0;
}
@media screen and (min-width: 821px) {
  .recruit {
    padding: 70px 0 30px;
    width: 50%;
  }
}
.recruit .inner {
  margin: 0 auto;
  max-width: 1180px;
  width: 90%;
}
.recruit .inner .img {
  border: #0073bd solid 4px;
}
.recruit .inner .img img {
  display: block;
}
.recruit .inner dl dt {
  background: #e60012;
  border-radius: 14px;
  box-shadow: 5px 4px 0 #fff;
  color: #fff;
  font-size: 1.2rem;
  margin: 0 auto;
  padding: 6px 0;
  position: relative;
  text-align: center;
  top: -16px;
  width: 90%;
  z-index: 999;
}
@media screen and (min-width: 821px) {
  .recruit .inner dl dt {
    font-size: 1.6rem;
  }
}
.recruit .inner dl dd {
  margin-bottom: 24px;
  padding: 0 7%;
  position: relative;
  text-align: justify;
  top: -8px;
}
@media screen and (min-width: 821px) {
  .recruit .inner dl dd {
    margin-bottom: 0;
  }
}
.recruit .inner dl dd .txt {
  margin-bottom: 8px;
}
@media screen and (min-width: 821px) {
  .recruit .inner dl dd .txt {
    font-size: 1.4rem;
    line-height: 1.4;
  }
}
.recruit .inner dl dd .btn a {
  color: #0073bd;
  font-weight: 600;
  text-decoration: underline;
}

/*---------------------------------------------
    company
---------------------------------------------*/
#contact {
  background: url(../images/bg_contact.jpg);
  background-size: cover;
  padding: 80px 0;
}
#contact .inner {
  background: rgba(255, 255, 255, 0.8);
  max-width: 980px;
  padding: 40px 24px 80px;
}
#contact .section-ttl {
  text-align: center;
}
#contact.thanks {
  background: #fff;
}
#contact.thanks .inner {
  margin: 0 auto;
  width: 90%;
}
#contact.thanks .inner .txt {
  text-align: center;
}
@media screen and (max-width: 820px) {
  #contact.thanks .inner .txt {
    text-align: left;
  }
}
#contact .inner {
  margin: 0 auto;
  width: 90%;
}
#contact .subtitle {
  font-size: 2.4rem;
  text-align: center;
}
#contact .txt {
  margin-bottom: 16px;
  text-align: center;
}
@media screen and (max-width: 820px) {
  #contact .txt {
    text-align: left;
  }
}
#contact .img {
  margin-bottom: 80px;
  text-align: center;
}
#contact .img img {
  width: 240px;
}
#contact .form-group {
  align-items: center;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 820px) {
  #contact .form-group {
    align-items: flex-start;
    flex-direction: column;
  }
}
#contact .form-group:first-of-type {
  margin-top: 50px;
}
#contact .form-group + .form-group {
  margin-top: 20px;
}
#contact .form-group .align-top {
  align-items: flex-start;
}
#contact label {
  font-weight: 500;
  width: 163px;
}
@media screen and (max-width: 820px) {
  #contact label {
    margin: 0 auto;
    width: 100%;
  }
}
#contact label .req {
  color: red;
  font-size: 10px;
  margin-left: 0.5em;
  vertical-align: super;
}
#contact input, #contact textarea {
  border: 1px solid #ccc;
  height: 40px;
  max-width: 709px;
  outline: none;
  padding: 8px;
  width: 90%;
}
@media screen and (max-width: 820px) {
  #contact input, #contact textarea {
    margin: 0 auto;
    width: 100%;
  }
}
#contact input::-moz-placeholder, #contact textarea::-moz-placeholder {
  color: #CDD6DD;
}
#contact input::placeholder, #contact textarea::placeholder {
  color: #CDD6DD;
}
#contact input[type=file] {
  border: none;
  width: 100%;
}
#contact .file {
  max-width: 709px;
  width: 90%;
}
#contact textarea {
  height: 140px;
}
#contact .button-wrap {
  align-items: flex-start;
  display: flex;
  gap: 40px;
  justify-content: center;
  margin-top: 40px;
}
#contact .button-wrap button, #contact .button-wrap a {
  align-items: center;
  background-color: #d55313;
  border: none;
  border-radius: 30px;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 1.6rem;
  font-weight: 700;
  height: 60px;
  justify-content: center;
  transition: 0.3s;
  width: 300px;
}
@media screen and (max-width: 767px) {
  #contact .button-wrap button, #contact .button-wrap a {
    font-size: 1.4rem;
    height: 46px;
    width: 260px;
  }
}
#contact .button-wrap button:hover, #contact .button-wrap a:hover {
  opacity: 0.8;
}
#contact table {
  margin: 0 auto;
  max-width: 580px;
}
#contact.thanks .txt {
  margin-bottom: 40px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  #contact.thanks .txt {
    text-align: left;
  }
}
#contact.thanks .btn {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 auto;
  transition: 0.3s;
  width: 300px;
}
@media screen and (max-width: 767px) {
  #contact.thanks .btn {
    font-size: 1.4rem;
    height: 46px;
    width: 260px;
  }
}
#contact.thanks .btn a {
  align-items: center;
  background-color: #e9450a;
  border: none;
  border-radius: 30px;
  color: #fff;
  display: flex;
  height: 60px;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  #contact.thanks .btn a {
    height: 46px;
  }
}