@charset "UTF-8";
/* Scss Document */
/* $break-point以下の時に@contentを適用 */
/* $break-point以上の時に@contentを適用 */
/* $break-point-min以上、$break-point-max以下の時に@contentを適用 */
#main_visual {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 90px auto 80px;
  background: url("../images/main_img_pc.webp") no-repeat;
  background-size: contain;
  height: 0; }
  @media screen and (min-width: 1024px) and (max-width: 1920px) {
    #main_visual {
      padding-top: 41.66%; } }
  @media print, screen and (min-width: 1920.2px) {
    #main_visual {
      height: 800px; } }
  @media only screen and (max-width: 1023.8px) {
    #main_visual {
      margin: 60px auto 30px; } }
  @media screen and (min-width: 768px) and (max-width: 1023.8px) {
    #main_visual {
      background: url("../images/main_img_pc.webp") center no-repeat;
      background-size: cover;
      height: 560px; } }
  @media screen and (min-width: 500px) and (max-width: 767.8px) {
    #main_visual {
      background: url("../images/main_img_pc.webp") center no-repeat;
      background-size: cover;
      height: calc(100vh - 200px); } }
  @media only screen and (max-width: 499.8px) {
    #main_visual {
      background: url("../images/main_img_sp.webp") no-repeat;
      background-size: contain;
      padding-top: 133.33%; } }
  #main_visual #catch {
    position: absolute; }
    @media print, screen and (min-width: 1920.2px) {
      #main_visual #catch {
        right: 80px;
        bottom: 20px; } }
    @media screen and (min-width: 1024px) and (max-width: 1920px) {
      #main_visual #catch {
        bottom: calc(12px + 8 * (100vw - 1024px)/896);
        right: calc(40px + 40 * (100vw - 1024px)/896); } }
    @media print, screen and (min-width: 1024px) {
      #main_visual #catch {
        width: 48%;
        max-width: 892px; } }
    @media screen and (min-width: 768px) and (max-width: 1023.8px) {
      #main_visual #catch {
        width: 60%;
        max-width: 694px;
        top: 30px;
        right: 40px; } }
    @media only screen and (max-width: 767.8px) {
      #main_visual #catch {
        width: 80%;
        max-width: 540px;
        top: 30px;
        right: 20px; } }
  #main_visual #comment {
    padding: 35px;
    background-color: rgba(255, 255, 255, 0.8);
    font-weight: 700;
    position: absolute; }
    @media print, screen and (min-width: 1920.2px) {
      #main_visual #comment {
        width: 680px;
        left: 50px;
        bottom: 50px; } }
    @media screen and (min-width: 1024px) and (max-width: 1920px) {
      #main_visual #comment {
        left: calc(30px + 20 * (100vw - 1024px)/896);
        bottom: calc(30px + 20 * (100vw - 1024px)/896);
        width: calc(490px + 190 * (100vw - 1024px)/896); } }
    @media screen and (min-width: 768px) and (max-width: 1023.8px) {
      #main_visual #comment {
        left: 30px;
        bottom: 30px;
        width: 470px; } }
    @media only screen and (max-width: 767.8px) {
      #main_visual #comment {
        padding: 15px 20px;
        width: 90%;
        position: absolute;
        right: 0;
        left: 0;
        bottom: 10px;
        margin: 0 auto;
        animation-name: LeftInAnime;
        animation-duration: 1.5s;
        animation-delay: 0.5s;
        animation-fill-mode: forwards;
        opacity: 0; }
      @keyframes LeftInAnime {
        from {
          opacity: 0;
          transform: translateX(-200px); }
        to {
          opacity: 1;
          transform: translateX(0); } } }
    #main_visual #comment h3 {
      margin-bottom: 20px;
      line-height: 1;
      font-size: 4.6rem; }
      @media screen and (min-width: 1024px) and (max-width: 1920px) {
        #main_visual #comment h3 {
          font-size: calc(3.2rem + 14 * (100vw - 1024px)/676); } }
      @media screen and (min-width: 768px) and (max-width: 1023.8px) {
        #main_visual #comment h3 {
          font-size: 3.4rem; } }
      @media only screen and (max-width: 767.8px) {
        #main_visual #comment h3 {
          font-size: calc(2.4rem + 25 * (100vw - 375px)/649); } }
    #main_visual #comment p {
      font-size: 1.8rem; }
      @media screen and (min-width: 1024px) and (max-width: 1920px) {
        #main_visual #comment p {
          font-size: calc(1.5rem + 4 * (100vw - 1024px)/896); } }
      @media screen and (min-width: 768px) and (max-width: 1023.8px) {
        #main_visual #comment p {
          font-size: 1.6rem; } }
      @media only screen and (max-width: 767.8px) {
        #main_visual #comment p {
          font-size: 1.4rem; } }

@media only screen and (max-width: 1023.8px) {
  .banner_compnay, .banner_recruit {
    width: 90%;
    max-width: 500px;
    margin-inline: auto; } }
.banner_compnay a, .banner_recruit a {
  display: flex; }
  @media only screen and (max-width: 1023.8px) {
    .banner_compnay a, .banner_recruit a {
      flex-direction: column; } }
.banner_compnay .text, .banner_recruit .text {
  color: #fff; }
  @media print, screen and (min-width: 1400px) {
    .banner_compnay .text, .banner_recruit .text {
      flex: 1; } }
  @media screen and (min-width: 1024px) and (max-width: 1399.8px) {
    .banner_compnay .text, .banner_recruit .text {
      width: 60%; } }
  @media print, screen and (min-width: 1024px) {
    .banner_compnay .text, .banner_recruit .text {
      display: flex;
      align-items: center; } }
  @media only screen and (max-width: 1023.8px) {
    .banner_compnay .text, .banner_recruit .text {
      padding: 30px; } }
  .banner_compnay .text .name, .banner_recruit .text .name {
    font-size: 4.8rem;
    line-height: 1;
    margin-bottom: 25px; }
    @media screen and (min-width: 1024px) and (max-width: 1399.8px) {
      .banner_compnay .text .name, .banner_recruit .text .name {
        font-size: calc(4.0rem + 8 * (100vw - 1024px)/376); } }
    @media only screen and (max-width: 768px) {
      .banner_compnay .text .name, .banner_recruit .text .name {
        font-size: calc(3.4rem + 6 * (100vw - 320px)/448); } }
  .banner_compnay .text .en, .banner_recruit .text .en {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 900;
    font-size: 7.6rem;
    line-height: 1;
    margin-bottom: 25px; }
    @media screen and (min-width: 1024px) and (max-width: 1399.8px) {
      .banner_compnay .text .en, .banner_recruit .text .en {
        font-size: calc(5.0rem + 26 * (100vw - 1024px)/376); } }
    @media only screen and (max-width: 768px) {
      .banner_compnay .text .en, .banner_recruit .text .en {
        font-size: calc(4.0rem + 10 * (100vw - 320px)/448); } }
  .banner_compnay .text p, .banner_recruit .text p {
    font-size: 1.8rem; }
    @media only screen and (max-width: 768px) {
      .banner_compnay .text p, .banner_recruit .text p {
        font-size: calc(1.4rem + 2 * (100vw - 320px)/448); } }
  .banner_compnay .text p + p, .banner_recruit .text p + p {
    margin-top: 20px; }
    @media only screen and (max-width: 1024px) {
      .banner_compnay .text p + p, .banner_recruit .text p + p {
        margin-top: 10px; } }
.banner_compnay .photo, .banner_recruit .photo {
  max-width: 750px;
  width: 100%; }
  @media screen and (min-width: 1024px) and (max-width: 1399.8px) {
    .banner_compnay .photo, .banner_recruit .photo {
      width: 40%; } }

.banner_compnay .text {
  background: linear-gradient(90deg, #1b2950 0%, #5830b7 100%);
  opacity: 0.97; }

.banner_recruit .text {
  background: linear-gradient(90deg, #462e97 0%, #432e92 38.62%, #8235fc 100%);
  opacity: 0.97; }
  .banner_recruit .text .mx_c {
    text-align: right; }

/* スライドの動き等速 */
.swiper-wrapper {
  transition-timing-function: linear; }

/* 画像のサイズ調整 */
.swiper-slide img {
  height: auto;
  width: 100%; }

.sec_ttl {
  border-bottom: solid 4px #1b2950;
  background: url("../images/ttl_l_illust_pc.svg") left 30px bottom no-repeat, url("../images/ttl_r_illust_pc.svg") right 30px bottom no-repeat;
  background-size: contain;
  height: 192px;
  display: flex;
  align-items: flex-end;
  justify-content: center; }
  @media screen and (min-width: 768.2px) and (max-width: 1750px) {
    .sec_ttl {
      height: calc(80px + 112 * (100vw - 768px)/982); } }
  @media only screen and (max-width: 768px) {
    .sec_ttl {
      height: calc(80px + 20 * (100vw - 320px)/448);
      background: url("../images/ttl_l_illust_sp.svg") left calc(-70px + 100 * (100vw - 320px)/448) bottom no-repeat, url("../images/ttl_r_illust_sp.svg") right calc(-62px + 100 * (100vw - 320px)/448) bottom no-repeat;
      background-size: contain; } }
  .sec_ttl h2 {
    letter-spacing: 0.2em;
    line-height: 1;
    font-size: 4.8rem;
    color: #1b2950;
    margin-bottom: 30px; }
    @media only screen and (max-width: 1023.8px) {
      .sec_ttl h2 {
        font-size: calc(2.6rem + 20 * (100vw - 320px)/704);
        margin-bottom: calc(12px + 8 * (100vw - 320px)/704); } }

.more_link {
  margin-inline: auto;
  font-size: 2.0rem;
  text-align: center;
  line-height: 1;
  border-radius: 40px;
  padding: 14px 20px;
  text-decoration: none;
  display: block;
  width: 220px;
  font-weight: bold;
  color: #fff;
  background-color: #5830b7;
  position: relative;
  transition: all .3s; }
  @media only screen and (max-width: 768px) {
    .more_link {
      font-size: 1.6rem; } }
  .more_link::after {
    content: "";
    display: block;
    position: absolute;
    width: 8px;
    height: 14px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Cpath fill='%23ffffff' d='M9.5,10.2l-7.1,7.6c-0.3,0.3-0.8,0.3-1.1,0c0,0,0,0,0,0l-1.1-1.1c-0.3-0.3-0.3-0.8,0-1.1	l5.4-5.9c0.3-0.3,0.3-0.8,0-1.1L0.2,2.5c-0.3-0.3-0.3-0.8,0-1.1l1.1-1.1c0.3-0.3,0.8-0.3,1.1,0c0,0,0,0,0,0l7.1,7.6	C10.2,8.5,10.2,9.5,9.5,10.2z'/%3E%3C/svg%3E") 50% 50%/100% 100% no-repeat;
    background-size: contain;
    right: 18px;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: all .3s; }
  @media print, screen and (min-width: 768.2px) {
    .more_link:hover {
      opacity: 1;
      background-color: #6A40CD; }
    .more_link:hover::after {
      right: 14px; } }