/*====================================================================================
1. START MAIN VISUAL SECTION.
====================================================================================*/
.main_mv {
  width: 100%;
  background: url(../images/top/mv.webp) no-repeat center center;
  background-size: cover;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  .main_mv {
    height: calc(100vh - 12rem);
  }
}
@media only screen and (max-width: 767px) {
  .main_mv {
    height: 35rem;
  }
}
.main_mv_title {
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.06em;
  margin: 0;
}
@media only screen and (min-width: 768px) {
  .main_mv_title {
    font-size: 5.5rem;
    line-height: 2.1818181818;
  }
}
@media only screen and (max-width: 767px) {
  .main_mv_title {
    font-size: 2rem;
  }
}
.main_mv_title span {
  position: relative;
  z-index: 9;
}
@media only screen and (min-width: 768px) {
  .main_mv_title span {
    padding: 0 1.2rem;
  }
}
@media only screen and (max-width: 767px) {
  .main_mv_title span {
    padding: 0 0.5rem;
    background: #17375e;
  }
}

@media only screen and (min-width: 768px) {
  .main_mv_title span:after {
    content: "";
    width: 100%;
    background: #17375e;
    position: absolute;
    left: 0;
    z-index: -1;
    height: 9.2rem;
    top: -0.4rem;
  }
}

.main_mv_txt {
  font-weight: 500;
  letter-spacing: 0;
  color: var(--co-primary);
}
@media only screen and (min-width: 768px) {
  .main_mv_txt {
    font-size: 3rem;
    line-height: 1.5;
    margin: 2.8rem 0 0;
  }
}
@media only screen and (max-width: 767px) {
  .main_mv_txt {
    font-size: 1.6rem;
    margin: 1rem 0 0;
    text-shadow:
      0 0 3px rgba(225, 225, 225, 0.7),
      0 0 6px rgba(225, 225, 225, 0.6),
      1px 1px 2px rgba(225, 225, 225, 0.9);
  }
}

.main_txt {
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .main_txt {
    margin-top: 10.7rem;
  }
}
@media only screen and (max-width: 767px) {
  .main_txt {
    margin-top: 4rem;
  }
}
.main_txt p {
  margin: 0;
  letter-spacing: 0;
  font-weight: 500;
}
@media only screen and (min-width: 768px) {
  .main_txt p {
    font-size: 1.8rem;
    line-height: 2;
  }
}
@media only screen and (max-width: 767px) {
  .main_txt p {
    font-size: 1.5rem;
  }
}

.main_work {
  background: url(../images/top/work_bg.webp) no-repeat right bottom;
}
@media only screen and (min-width: 768px) {
  .main_work {
    margin-top: 10rem;
  }
}
@media only screen and (max-width: 767px) {
  .main_work {
    margin-top: 4rem;
    background-size: 100% auto;
  }
}
.main_work .inner {
  position: relative;
}
@media only screen and (min-width: 768px) {
  .main_work .inner {
    padding: 10.7rem 6rem 28.6rem 60rem;
  }
}
@media only screen and (max-width: 767px) {
  .main_work .inner {
    padding-bottom: 4rem;
  }
}
.main_work .inner .img1 {
  position: absolute;
}
@media only screen and (min-width: 768px) {
  .main_work .inner .img1 {
    width: 108.2rem;
    left: -35.9rem;
    top: -9.2rem;
  }
}
@media only screen and (max-width: 767px) {
  .main_work .inner .img1 {
    width: 20rem;
    left: -1.5rem;
    top: 12rem;
  }
}
.main_work .inner .img2 {
  position: absolute;
}
@media only screen and (min-width: 768px) {
  .main_work .inner .img2 {
    width: 44.25rem;
    right: -13.3rem;
    bottom: 0;
  }
}
@media only screen and (max-width: 767px) {
  .main_work .inner .img2 {
    width: 12rem;
    right: -1.3rem;
    top: 28rem;
  }
}
@media only screen and (min-width: 768px) {
  .main_work .cm-title {
    margin-bottom: 7.8rem;
  }
}
@media only screen and (min-width: 768px) {
  .main_work p {
    margin: 0 0 3rem;
  }
}
@media only screen and (max-width: 767px) {
  .main_work p {
    margin: 0 0 3rem;
  }
  .main_work p.txt1 {
    padding-left: 16rem;
    margin-bottom: 5rem;
    padding-top: 2.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .main_work .cm-btn {
    margin-top: 7.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .main_work .cm-btn {
    margin-top: 2.5rem;
  }
}

.main_culture {
  background: url(../images/top/culture_bg.webp) no-repeat center center;
  background-size: cover;
}
@media only screen and (min-width: 768px) {
  .main_culture {
    padding: 11.3rem 0 15.3rem;
    margin-top: 9.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .main_culture {
    padding: 4rem 0;
    margin-top: 4rem;
  }
}
.main_culture .cm-title .en:after {
  background: #bad5ef;
}
@media only screen and (min-width: 768px) {
  .main_culture .txt {
    margin: 6.5rem 0 0;
  }
}
@media only screen and (max-width: 767px) {
  .main_culture .txt {
    margin: 0;
  }
}
.main_cultureList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media only screen and (min-width: 768px) {
  .main_cultureList {
    gap: 10rem;
    margin-top: 8.2rem;
  }
}
@media only screen and (max-width: 767px) {
  .main_cultureList {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2rem;
  }
}
.main_cultureList .item {
  text-align: center;
  text-decoration: none;
}
@media only screen and (min-width: 768px) {
  .main_cultureList .item {
    width: calc(33.3333333333% - 6.6666666667rem);
  }
  .main_cultureList .item:hover {
    opacity: 1;
  }
  .main_cultureList .item:hover .img {
    opacity: 1;
  }
  .main_cultureList .item:hover .img .img_off {
    opacity: 0;
  }
  .main_cultureList .item:hover .img .img_on {
    opacity: 1;
  }
  .main_cultureList .item:hover p span:after {
    opacity: 1;
  }
}
@media only screen and (max-width: 767px) {
  .main_cultureList .item {
    width: 100%;
  }
}
.main_cultureList .item .img {
  position: relative;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .main_cultureList .item .img {
    height: 25.6rem;
  }
  .main_cultureList .item .img img {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
  }
}
@media only screen and (max-width: 767px) {
  .main_cultureList .item .img img {
    width: 100%;
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .main_cultureList .item .img .img_off {
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .main_cultureList .item .img .img_on {
    display: none;
  }
}
.main_cultureList .item p {
  color: var(--co-secondry);
  font-weight: 700;
  font-family: var(--font-jost);
  letter-spacing: 0;
}
@media only screen and (min-width: 768px) {
  .main_cultureList .item p {
    margin: 2.9rem 0 0;
    font-size: 2rem;
  }
}
@media only screen and (max-width: 767px) {
  .main_cultureList .item p {
    margin: 2rem 0 0;
    font-size: 1.8rem;
  }
}
.main_cultureList .item p span {
  position: relative;
}
.main_cultureList .item p span:after {
  content: "";
  width: 100%;
  height: 0.1rem;
  background: var(--co-secondry);
  position: absolute;
  bottom: 0.4rem;
  left: 0;
  opacity: 0;
}

.main_staff {
  background: url(../images/top/staff_bg.webp) no-repeat top left;
}
@media only screen and (min-width: 768px) {
  .main_staff {
    background-size: auto;
  }
}
@media only screen and (max-width: 767px) {
  .main_staff {
    background-size: 100% auto;
  }
}
.main_staff .cm-title .en:after {
  background: #ffffff;
}
.main_staff .inner {
  position: relative;
}
@media only screen and (min-width: 768px) {
  .main_staff .inner {
    padding-top: 28.3rem;
    padding-bottom: 10.2rem;
  }
}
@media only screen and (max-width: 767px) {
  .main_staff .inner {
    padding-top: 4rem;
    padding-bottom: 10rem;
  }
}
.main_staff .inner p {
  margin: 0;
}
@media only screen and (min-width: 768px) {
  .main_staff .inner p {
    padding: 26.2rem 0 0 57.9rem;
  }
}
.main_staff .img1 {
  position: absolute;
}
@media only screen and (min-width: 768px) {
  .main_staff .img1 {
    width: 80.1rem;
    top: -1.8rem;
    right: -8.6rem;
  }
}
@media only screen and (max-width: 767px) {
  .main_staff .img1 {
    width: 16rem;
    top: 4.4rem;
    right: -2rem;
  }
}
.main_staff .img2 {
  position: absolute;
}
@media only screen and (min-width: 768px) {
  .main_staff .img2 {
    width: 44.25rem;
    top: 56.8rem;
    left: 12.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .main_staff .img2 {
    width: 17rem;
    bottom: 0;
    left: 0;
  }
}
@media only screen and (min-width: 768px) {
  .main_staff .main_staff_btn {
    margin-top: 8.2rem;
  }
}
@media only screen and (max-width: 767px) {
  .main_staff .main_staff_btn {
    margin-top: 3rem;
  }
}
.main_staff .main_staff_btn:after {
  content: "";
  clear: both;
  display: block;
}
.main_staff .main_staff_btn .cm-btn {
  float: right;
}

.main_banner {
  background: url(../images/top/bg.webp) no-repeat center center;
  background-size: cover;
}
@media only screen and (min-width: 768px) {
  .main_banner {
    padding: 10.9rem 0 11rem;
  }
}
@media only screen and (max-width: 767px) {
  .main_banner {
    padding: 4rem 0;
  }
}
.main_banner .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media only screen and (min-width: 768px) {
  .main_banner .inner {
    gap: 6.1rem;
  }
}
@media only screen and (max-width: 767px) {
  .main_banner .inner {
    gap: 2rem;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
.main_banner .banner {
  background: #fff;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .main_banner .banner {
    border-radius: 2rem;
    width: calc(50% - 3.05rem);
    padding: 4.8rem 3.2rem 5.9rem;
    -webkit-transition: 0.3s all;
    transition: 0.3s all;
  }
  .main_banner .banner:hover {
    opacity: 0.7;
  }
}
@media only screen and (max-width: 767px) {
  .main_banner .banner {
    border-radius: 1rem;
    width: 100%;
    padding: 2rem;
  }
}
.main_banner .banner a:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}
.main_banner .banner img {
  position: absolute;
  right: 0;
}
@media only screen and (min-width: 768px) {
  .main_banner .banner img {
    width: 34.6rem;
    top: 0.7rem;
  }
}
@media only screen and (max-width: 767px) {
  .main_banner .banner img {
    width: 17rem;
    top: 0;
  }
}
@media only screen and (min-width: 768px) {
  .main_banner .banner .cm-title .en {
    font-size: 2.8rem;
    padding-bottom: 1rem;
  }
}
@media only screen and (min-width: 768px) {
  .main_banner .banner p {
    margin: 5.3rem 0 0;
  }
}
@media only screen and (max-width: 767px) {
  .main_banner .banner p {
    margin: 2.3rem 0 0;
  }
}

.btn_fix {
  background: var(--co-secondry);
  position: fixed;
  z-index: 999;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  display: block;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .btn_fix {
    -webkit-transition: 0.3s all;
    transition: 0.3s all;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 7rem;
    height: 30rem;
    padding-top: 2.7rem;
  }
  .btn_fix:hover {
    opacity: 0.7;
  }
}
@media only screen and (max-width: 767px) {
  .btn_fix {
    bottom: 0;
    width: 100%;
    padding: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 2rem;
  }
}
@media only screen and (min-width: 768px) {
  .btn_fix img {
    width: 2.9rem;
    height: 2.9rem;
  }
}
@media only screen and (max-width: 767px) {
  .btn_fix img {
    width: 2rem;
    height: 2rem;
  }
}
.btn_fix span {
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .btn_fix span {
    margin-top: 2.3rem;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    width: 100%;
    letter-spacing: 0.3em;
    line-height: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}
@media only screen and (max-width: 767px) {
  .btn_fix span {
    font-size: 1.4rem;
  }
}