@charset "UTF-8";

@import url("custom-portal-top.css");
/*
	BASE
*******************************/

/*
font-family: 'Noto Sans JP', sans-serif;
font-family: "Montserrat", sans-serif;
*/
* {
  font-family: "Montserrat", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

:root {
  --color_main: #d0121b;
}

.cursor-stalker {
  position: fixed;
  display: block;
  top: 0px;
  left: 0px;
  width: 0px;
  height: 0px;
  pointer-events: none;
  transition: transform 0.05s linear;
  z-index: 9999;
  &::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: url(mouse-st.svg) no-repeat center center/contain;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    transition: 0.5s;
  }
  &::after {
    content: "VIEW";
    display: inline-block;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%) scale(0);
    z-index: 2;
    opacity: 1;
    opacity: 0;
    transition: 0.5s;
  }
  &.hover {
    &::before {
      transform: translate(-50%, -50%) scale(4);
    }
    &::after {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
  }
}

/**
HEADER
**/
.is-scroll {
  .lib-header__outer {
    &.lib-header-BS01 {
      top: 50px;
    }
  }
}
.is-open {
  .lib-header__logo,
  .header-entry {
    display: none;
  }
}
.lib-header__outer {
  &.lib-header-BS01 {
    top: 50px;
  }
  .lib-header__inner {
    .lib-header__bar {
      padding: 0 30px;
      .lib-header__logo {
        width: 110px;
        position: relative;
        a {
          height: auto;
          padding: 0;
          background: none;
          box-shadow: none;
          img {
            width: 100%;
          }
        }
        &::after {
          content: "";
          display: block;
          width: 220%;
          aspect-ratio: 1;
          border-radius: 50%;
          background-color: #ffffff;
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
          position: absolute;
          z-index: -1;
          left: -85%;
          top: -300%;
        }
      }
      .lib-header__nav {
        height: 60px;
        max-width: calc(100% - 120px - 60px);
        .lib-utility__outer {
          height: 60px;
          font-size: 1rem;
          padding: 0 min(3vw,3em);
          border-radius: 30px;
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
          .lib-utility__list {
            column-gap: min(1.6vw,2em);
            &::after {
              content: none;
            }
            .lib-utility__item {
              position: static;
              a {
                font-size: inherit;
                font-weight: 600;
                .txt {
                  &::before {
                    transform: translateY(0);
                    opacity: 1;
                    height: 1px;
                    background-color: #e9e9e9;
                  }
                }
              }
              .lib-utility__item__child {
                width: 100%;
                position: absolute;
                z-index: 3;
                bottom: auto;
                left: 0;
                display: flex;
                justify-content: center;
                flex-wrap: nowrap;
                gap: 20px;
                padding: 45px 20px 20px;
                box-shadow: 0 3px 3px rgba(0, 0, 0, 0.015);
                opacity: 0;
                transform: translateY(-20px);
                pointer-events: none;
                &::before {
                  content: "";
                  display: block;
                  width: 100%;
                  height: calc(100% - 25px);
                  position: absolute;
                  left: 0;
                  bottom: 0;
                  background-color: #ffffff;
                  z-index: 0;
                }
                .lib-utility__item {
                  max-width: 20%;
                  max-width: 200px;
                  flex: 1;
                  position: relative;
                  z-index: 1;
                  a {
                    display: grid;
                    grid-row-gap: 10px;
                    img {
                      display: block;
                      width: 100%;
                      aspect-ratio: 3/2;
                      object-fit: cover;
                      border-radius: 10px;
                    }
                    .txt {
                      text-align: center;
                      font-size: 0.8rem;
                      justify-self: center;
                      &::before {
                        content: none;
                      }
                    }
                  }
                }
              }
            }
          }
        }
        .lib-header__clone {
          display: none;
        }
        .header-entry {
          margin-left: 30px;
          li {
            position: relative;
            margin: 0;
            padding: 0;
            line-height: 1;
            &::before {
              content: none;
            }
            a {
              display: grid;
              height: 60px;
              line-height: 1;
              align-items: center;
              justify-content: center;
              text-decoration: none;
              font-size: 1em;
              font-weight: 600;
              color: #ffffff;
              background-color: var(--color_main);
              padding: 0 2.5em;
              border-radius: 30px;
              box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
              border: 2px solid var(--color_main);
              white-space: nowrap;
            }
            ul {
              position: absolute;
              bottom: auto;
              left: 50%;
              display: grid;
              grid-row-gap: 10px;
              padding-top: 10px;
              opacity: 0;
              transform: translate(-50%, -20px);
              pointer-events: none;
              z-index: 1;
              li {
                a {
                  border: 2px solid #ffffff;
                }
              }
            }
          }
        }
        .lib-menu__btn {
          width: 60px;
          height: 60px;
          border-radius: 7px;
          background-color: var(--color_main);
          /* background-color: #fff; */
          border: none;
          margin-left: 15px;
          box-shadow: none;
          z-index: 13;
          .line {
            width: 40%;
            left: 30%;
            /* background-color:var(--color_main); */
            &:nth-child(1) {
              top: calc(50% - 1px - 9px);
            }
            &:nth-child(2) {
              width: 30%;
            }
            &:nth-child(3) {
              bottom: calc(50% - 1px - 9px);
            }
          }
          &::after {
            content: none;
          }
          &.is-open {
            .line {
              &:nth-child(1) {
                top: calc(50% - 1px - 10px);
              }
              &:nth-child(3) {
                bottom: calc(50% - 1px - 10px);
              }
            }
          }
        }
      }
    }
  }
}

.lib-header__outer {
  &.lib-header-BS01 {
    .lib-nav__outer {
      .lib-search__outer,
      .lib-lang__outer,
      .lib-nav__list,
      .lib-induce__outer {
        display: none !important;
      }
      padding: 0;
      .lib-utility__list {
        display: grid;
        grid-template-columns: repeat(4, auto);
        align-items: start;
        grid-gap: 80px;
        margin: 0 auto;
        padding-top: 50px;
        &::after {
          content: none;
        }
        .lib-utility__item {
          float: none;
          width: 100%;
          &::after {
            content: none;
          }
          .icon {
            display: none;
          }
          a {
            .txt {
              font-size: 1.2rem;
              display: grid;
              align-items: center;
              justify-content: start;
              font-weight: 600;
              &::before {
                content: none;
              }
            }
          }
          .lib-utility__item__child {
            display: grid;
            grid-row-gap: 0.5em;
            padding-top: 1em;
            padding-left: 1em;
            .lib-utility__item {
              a {
                display: grid;
                grid-template-columns: 1em 1fr;
                align-items: center;
                grid-column-gap: 0.5em;
                .txt {
                  font-size: 1rem;
                }
                &::before {
                  content: "";
                  height: 1em;
                  /* background: url(/dcms_media/other/icon-arrow-circle-s.svg) no-repeat center center / contain; */
                  background: url(/dcms_media/other/icon-arrow-circle-w.svg) no-repeat center center / contain;
                  border: 1px solid var(--color_main);
                  border-radius: 50%;
                }
              }
            }
          }
        }
      }
    }
  }
}

.lib-nav__panel {
  height: 100vh;
  height: 100dvh;
  max-width: 100%;
  padding-top: 70px;
  background-color: #ffffff;
  top: 0;
  z-index: 10;
}

@media screen and (max-width: 1300px) {
  /**
    HEADER
    **/
  .lib-header__outer {
    .lib-header__inner {
      .lib-header__bar {
        padding: 0 20px;
        .lib-header__logo {
          width: 100px;
        }
        .lib-header__nav {
          height: 50px;
          max-width: calc(100% - 90px - 50px);
          .lib-utility__outer {
            font-size: min(1.3vw,1rem);
            padding: 0 1.5em;
            .lib-utility__list {
              column-gap: 1.5vw;
            }
          }
          .lib-header__clone {
            display: none;
          }
          .header-entry {
            margin-left: 10px;
            li {
              a {
                font-size: 0.9rem;
                padding: 0 1.5em;
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 991.8px) {
  .is-scroll {
    .lib-header__outer {
      &.lib-header-BS01 {
        top: 20px;
      }
    }
  }
  #wrapper {
    padding-top: 0;
  }
  /**
    HEADER
    **/
  .lib-header__outer {
    &.lib-header-BS01 {
      height: 50px;
      top: 20px;
      background: none;
    }
    .lib-header__inner {
      .lib-header__bar {
        height: 50px;
        padding: 0 20px;
        background: none;
        box-shadow: none;
      }
    }
  }

  .lib-header__outer {
    &.lib-header-BS01 {
      .lib-nav__outer {
        .lib-utility__list {
          grid-gap: 50px 30px;
          width: unset;
          padding-left: 50px;
          padding-right: 50px;
          grid-template-columns: repeat(3, auto);
          & > .lib-utility__item {
            &:first-child {
              grid-area: 1/1/2/4;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .is-scroll {
    .lib-header__outer {
      &.lib-header-BS01 {
        top: 0;
      }
    }
  }
  .is-open {
    .lib-header__bar {
      justify-content: flex-end;
    }
  }
  #wrapper {
    padding-top: 50px;
  }
  .lib-header__outer {
    &.lib-header-BS01 {
      top: 0;
      background-color: #ffffff;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    }
    .lib-header__inner {
      .lib-header__bar {
        .lib-header__logo {
          width: 60px;
          &::after {
            content: none;
          }
        }
        .lib-header__nav {
          width: auto;
          display: flex;
          align-items: center;
          max-width: 100%;
          .header-entry {
            margin-left: 0;
            li {
              a {
                height: 30px;
                font-size: 0.8em;
                padding: 0 1em;
                border-radius: 15px;
              }
              ul {
                grid-row-gap: 5px;
              }
            }
            &.open {
              li {
                ul {
                  opacity: 1 !important;
                  pointer-events: all !important;
                  transform: translate(-50%, 0) !important;
                }
              }
            }
          }
          .lib-menu__btn {
            width: 40px;
            height: 40px;
            margin-left: 10px;
            .line {
              &:nth-child(1) {
                top: calc(50% - 1px - 7px);
              }
              &:nth-child(3) {
                bottom: calc(50% - 1px - 7px);
              }
            }
          }
        }
      }
    }
  }

  .lib-header__outer {
    &.lib-header-BS01 {
      .lib-nav__outer {
        padding: 0;
        .lib-utility__list {
          grid-template-columns: 1fr;
          grid-gap: 0;
          padding-top: 0;
          width: 100%;
          &::after {
            content: initial;
          }
          & > .lib-utility__item {
            padding: 0.66em 0;
            border-bottom: 1px solid #cccccc;
            display: grid;
            grid-template-columns: 1fr 2em;
            .icon {
              display: initial;
              height: 2em;
              border: 1px solid var(--color_main);
              border-radius: 50%;
              /* background-color: var(--color_main); */
              background-color: #fff;
              position: relative;
              cursor: pointer;
              &::before,
              &::after {
                content: "";
                width: 40%;
                height: 2px;
                /* background-color: #FFFFFF; */
                background-color: var(--color_main);
                display: block;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%) rotate(0deg);
                transition: 0.3s;
              }
              &::after {
                transform: translate(-50%, -50%) rotate(90deg);
              }
            }
            &.open {
              .icon {
                &::before {
                  transform: translate(-50%, -50%) rotate(90deg);
                  opacity: 0;
                }
                &::after {
                  transform: translate(-50%, -50%) rotate(0deg);
                }
              }
            }
          }
          .lib-utility__item {
            .lib-utility__item__child {
              padding-top: 0;
              .lib-utility__item {
                display: none;
                padding: 0.33em 0;
                &:first-child {
                  padding-top: 1em;
                }
                &:last-child {
                  padding-bottom: 1em;
                }
              }
            }
          }
          & > .lib-utility__item {
            &:first-child {
              grid-area: unset;
            }
          }
        }
      }
    }
  }

  .lib-nav__panel {
    height: 100vh;
    height: 100dvh;
    max-width: 100%;
    padding-top: 70px;
    background-color: #ffffff;
    top: 0;
    z-index: 10;
  }

  .cursor-stalker {
    display: none;
  }
}

@media screen and (min-width: 769px) {
  .lib-header__outer {
    &.lib-header-BS01 {
      .lib-nav__outer {
        .lib-utility__list {
          .lib-utility__item {
            .lib-utility__item__child {
              .lib-utility__item {
                display: grid !important;
              }
            }
          }
        }
      }
    }
  }
}

.lib-nav__panel {
  position: relative;
  top: -3.125rem;
  z-index: 3;
  overflow-x: clip;
}
.lib-nav__panel .c-ping {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  max-width: 300px;
  z-index: -2;
}
.lib-nav__panel .c-bowling-ball {
  position: absolute;
  top: -5rem;
  left: -7rem;
  width: 190%;
  max-width: 600px;
  z-index: -1;
  opacity: 0.6;
}
.lib-nav__panel .c-ping img,
.lib-nav__panel .c-bowling-ball img {
  width: 100%;
  height: auto;
}
@media print, screen and (min-width: 992px) {
  .lib-nav__panel .c-ping {
    position: absolute;
    bottom: -100px;
    right: -400px;
    width: 70%;
    max-width: 800px;
    z-index: -2;
  }
  .lib-nav__panel .c-bowling-ball {
    position: absolute;
    top: -10rem;
    left: -7rem;
    width: 190%;
    max-width: 1000px;
    z-index: -1;
    opacity: 0.6;
  }
}

/**
FOOTER
**/
.lib-footer__outer {
  border-top: none;
  background-color: var(--color_main);
  .lib-pagetop__btn {
    opacity: 0;
    pointer-events: none;
    &.is-scroll.is-bottom {
      opacity: 1;
      pointer-events: all;
    }
    a {
      display: block;
      img {
        display: block;
        width: 120px;
      }
    }
  }
  .lib-footer__inner {
    .lib-footer__container {
      .lib-footer__info {
        justify-content: space-between;
        padding-bottom: 70px;
        .lib-footer__logo {
          max-width: 180px;
          a {
            .thumb {
              display: block;
              padding: 10px 15px;
            }
          }
        }
        .lib-footer__data {
          margin-top: 0;
          .lib-footer__sns {
            column-gap: 20px;
            margin-top: 0;
            li {
              a {
                width: 50px;
                height: auto;
                border: none;
                background: none;
              }
            }
          }
        }
      }
      .lib-footer__gnav {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
        .footer__gnav-wrap {
          display: grid;
          grid-template-columns: 1fr 20%;
          .lib-footer__child {
            font-size: 1.1rem;
            gap: 2em 4%;
            --bs-gutter-x: 0;
            .col {
              width: auto;
              flex-grow: 0;
              margin: 0;
              padding: 0;
              &:first-child {
                a {
                  width: 3.5em;
                }
              }
              &:nth-child(6) {
                margin-left: 4em;
              }
              &:nth-last-child(-n + 2) {
                padding-left: 1em;
              }
              ul {
                margin: 0;
                padding: 0;
                li {
                  margin: 0;
                  padding: 0;
                  a {
                    white-space: nowrap;
                    font-size: inherit;
                    color: #ffffff;
                    padding: 0;
                    background: none;
                    border: none;
                    margin: 0;
                    display: inline;
                  }
                  ul {
                    font-size: 1rem;
                    padding-top: 1em;
                    margin-top: 5px;
                    display: grid;
                    grid-row-gap: 1em;
                    position: relative;
                    margin-left: 0.33em;
                    &::before {
                      content: "";
                      position: absolute;
                      display: block;
                      left: 0;
                      top: 0;
                      width: 1px;
                      background-color: #ffffff;
                      height: calc(100% - 0.75em);
                    }
                    li {
                      padding-left: 2em;
                      position: relative;
                      &::before {
                        content: "";
                        width: 1.5em;
                        border-bottom: 1px solid #ffffff;
                        position: absolute;
                        top: 0.5em;
                        left: 0;
                      }
                      a {
                        font-weight: 600;
                      }
                    }
                  }
                }
              }
            }
          }
          .footer-menu {
            display: grid;
            align-content: start;
            grid-row-gap: 40px;
            li {
              margin: 0;
              padding: 0;
              &::before {
                content: none;
              }
              a {
                font-size: 1rem;
                font-weight: 600;
                height: 3.5em;
                color: var(--color_main);
                text-decoration: none;
                background-color: #ffffff;
                display: grid;
                align-items: center;
                justify-content: center;
                border-radius: 15px;
                border: 2px solid var(--color_main);
                &::after {
                  content: none !important;
                }
              }
            }
          }
        }
        .lib-footer__other {
          width: 100%;
          margin: 50px 0 0;
          padding: 0;
          gap: 0;
          background: none;
          box-shadow: none;
          border: none;
          justify-content: center;
          li {
            border: none;
            margin: 0;
            width: auto;
            a {
              color: #ffffff;
              font-weight: 500;
              padding: 0;
              display: inline;
              &::before {
                content: none;
              }
            }
            &:first-child {
              &::after {
                content: "|";
                color: #ffffff;
                margin: 0 1em;
                display: inline-block;
                transform: translateY(-0.1em) scale(1, 1.3);
              }
            }
          }
        }
      }
    }
  }
  &.lib-footer-BS02 {
    .lib-footer__utility {
      background-color: transparent;
      margin-top: 30px;
      padding: 0 20px 30px;
      .wrap {
        justify-content: center;
        .lib-footer__copyright {
          background-color: transparent;
          font-size: 0.9rem;
          font-weight: 500;
        }
      }
    }
  }
}

@media screen and (max-width: 1024px) {
  /**
    FOOTER
    **/
  .lib-footer__outer {
    .lib-footer__inner {
      .lib-footer__container {
        .lib-footer__gnav {
          .footer__gnav-wrap {
            grid-template-columns: 1fr 16%;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 991.8px) {
  /**
    FOOTER
    **/
  .lib-footer__outer {
    .lib-pagetop__btn {
      a {
        img {
          width: 100px;
        }
      }
    }
    .lib-footer__inner {
      .lib-footer__container {
        .lib-footer__gnav {
          .footer__gnav-wrap {
            grid-template-columns: 1fr;
            grid-row-gap: 60px;
            .lib-footer__child {
              order: 1;
              font-size: 1rem;
              gap: 2em 3%;
              justify-content: center;
              .col {
                &:nth-child(6) {
                  margin-left: 0;
                }
                &:nth-last-child(-n + 2) {
                  padding-left: 1em;
                }
              }
            }
            .footer-menu {
              width: 100%;
              max-width: 300px;
              margin: 0 auto;
              grid-row-gap: 20px;
            }
          }
          .lib-footer__other {
            li {
              a {
                font-size: 1rem;
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  /**
    FOOTER
    **/
  .lib-footer__outer {
    .lib-footer__inner {
      .lib-footer__container {
        .lib-footer__info {
          .lib-footer__logo {
            padding-bottom: 0;
          }
          .lib-footer__data {
            .lib-footer__sns {
              position: relative;
              left: 0;
              width: auto;
            }
          }
        }
        .lib-footer__gnav {
          .footer__gnav-wrap {
            grid-template-columns: 1fr;
            .lib-footer__child {
              .col {
                &:nth-child(5) {
                  margin-left: 0;
                }
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 575.8px) {
  /**
    FOOTER
    **/
  .lib-footer__outer {
    .lib-pagetop__btn {
      a {
        img {
          width: 80px;
        }
      }
    }
    .lib-footer__inner {
      .lib-footer__container {
        .lib-footer__info {
          padding-bottom: 50px;
          .lib-footer__logo {
            margin-bottom: 30px;
          }
        }
        .lib-footer__gnav {
          .footer__gnav-wrap {
            border-bottom: 1px solid #ffffff;
            grid-row-gap: 40px;
            padding-bottom: 40px;
            .lib-footer__child {
              display: grid;
              width: 100%;
              grid-row-gap: 1.5em;
              justify-content: start;
              .col {
                &:first-child {
                  a {
                    width: auto;
                  }
                }
                &:nth-child(5) {
                  margin-left: 0;
                }
                &:nth-last-child(-n + 2) {
                  padding-left: 0;
                }
              }
            }
            .footer-menu {
              max-width: 240px;
              grid-row-gap: 15px;
              li {
                a {
                  height: 4em;
                }
              }
            }
          }
          .lib-footer__other {
            margin: 20px 0 0;
            li {
              a {
                font-size: 0.9rem;
              }
            }
          }
        }
      }
    }
    &.lib-footer-BS02 {
      .lib-footer__utility {
        margin-top: 10px;
        padding: 0 20px 20px;
        .wrap {
          .lib-footer__copyright {
            font-size: 0.8rem;
            width: 100%;
            margin: 0;
          }
        }
      }
    }
  }
}

/**
TOP
**/

.nav-wrap {
  margin-top: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 20px;
  .swiper-pagination {
    width: auto;
    display: flex;
    align-items: center;
    column-gap: 20px;
    .swiper-pagination-bullet {
      width: 15px !important;
      height: 15px !important;
      background-color: #cccccc !important;
      border: none;
      margin: 0 !important;
      &.swiper-pagination-bullet-active {
        background-color: var(--color_main) !important;
      }
    }
  }
  .swiper-button-prev,
  .swiper-button-next {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin: 0;
    width: 30px;
    height: 30px;
    /* background:#333333; */
    background: url(/dcms_media/other/icon-arrow-circle-s.svg) no-repeat center center/contain;
    &::after {
      content: none;
    }
  }
  .swiper-button-prev {
    /* clip-path:polygon(0 50%,100% 0,100% 100%); */
    transform: rotate(180deg);
  }
  .swiper-button-next {
    /* clip-path:polygon(0 0,100% 50%,0 100%); */
  }
}

.lib-card__btn {
  .btn-circle {
    background-color: #ffffff;
    color: var(--color_main);
    border: none !important;
    border-radius: 2em;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    max-width: 16em;
    display: grid;
    grid-template-columns: 1fr 2em;
    text-align: center;
    .txt {
      line-height: 1;
    }
    &.btn-circle-red {
      background-color: var(--color_main);
      color: #ffffff;
    }
  }
}

.top-fv {
  & + #contents {
    width: 100%;
    max-width: 100%;
    padding: 50px 0 0;
  }
}

/**MV**/
.top-fv {
  background: url(/dcms_media/image/fv.jpg) no-repeat center 25% / cover;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 2.2;
  max-height: 100vh;
  max-height: 100dvh;
  pointer-events: none;
  .wrap {
    display: grid;
    height: 100%;
    align-items: end;
    h1 {
      font-size: min(9vw, 10rem);
      font-weight: 500;
      color: #ffffff;
      line-height: 1.5;
    }
  }
}

/**TAG**/
#top-tag {
  margin-right: 0;
  margin-left: 0;
  padding-right: 0;
  padding-left: 0;
  .slick-track {
    padding-bottom: 10px;
  }
  .tag-slider1 {
    margin-bottom: 20px;
    padding-bottom: 10px;
  }
  .slide {
    padding: 0 20px;
    overflow: visible;
    a {
      background-color: var(--color_main);
      border: none;
      border-radius: 10px;
      display: grid;
      position: relative;
      overflow: visible;
      &::after {
        content: "";
        display: block;
        width: 12px;
        height: 9px;
        background-color: var(--color_main);
        position: absolute;
        right: 15px;
        bottom: -8px;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
      }
    }
  }
  .tag-slider2 {
    a {
      .txt {
        direction: ltr;
      }
      &::after {
        right: auto;
        left: 15px;
      }
    }
  }
}

/**message**/
#top-message {
  padding-top: 90px;
  .lib-card__item {
    .lib-card__txtarea {
      .lib-card__inside {
        .title {
          font-size: 2.5rem;
          margin-bottom: 1em;
          display: grid;
          .en {
            font-size: 0.66em;
            color: var(--color_main);
          }
        }
        .lib-card__txt {
          p {
            margin-bottom: 1em;
            font-size: 1.2rem;
            font-weight: 500;
          }
        }
      }
      .btn-circle {
        margin-left: auto;
      }
    }
  }
  .msg-slider {
    position: relative;
    width: 100%;
    &::before {
      content: "ROUND1";
      font-size: 6rem;
      color: #d1d1d1;
      font-weight: 600;
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      width: 100%;
      text-align: center;
    }
    &::after {
      content: "RECRUIT";
      font-size: 6em;
      color: #d1d1d1;
      font-weight: 600;
      position: absolute;
      z-index: -1;
      bottom: 0;
      left: 0;
      width: 100%;
      text-align: center;
    }
    &.stop {
      .msg-slide {
        animation: none !important;
      }
      .bg {
        animation: none !important;
      }
    }
    .msg-slide {
      position: absolute;
      display: block;
      width: 100%;
      max-width: 370px;
      animation-name: msganim;
      animation-duration: 20s;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
      transition-timing-function: ease-in-out;
      opacity: 0;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .obj {
        width: 80%;
        display: block;
        margin: 0 auto;
        position: relative;
        z-index: 1;
      }
      .bg {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotate(0deg);
        z-index: 0;
        animation: kaiten 10s linear infinite;
      }
      &.anim {
        .bg {
          animation: kaiten 10s linear infinite;
        }
      }
      p {
        line-height: 1;
        position: absolute;
        font-size: 3rem;
        color: #ffffff;
        font-weight: 600;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
      }
      &.msg-slide1 {
        animation-delay: calc(0s - 10s);
      }
      &.msg-slide2 {
        animation-delay: calc(2s - 10s);
      }
      &.msg-slide3 {
        animation-delay: calc(4s - 10s);
      }
      &.msg-slide4 {
        animation-delay: calc(6s - 10s);
      }
      &.msg-slide5 {
        animation-delay: calc(8s - 10s);
      }
      &.msg-slide6 {
        animation-delay: calc(10s - 10s);
      }
      &.msg-slide7 {
        animation-delay: calc(12s - 10s);
      }
      &.msg-slide8 {
        animation-delay: calc(14s - 10s);
      }
      &.msg-slide9 {
        animation-delay: calc(16s - 10s);
      }
      &.msg-slide10 {
        animation-delay: calc(18s - 10s);
      }
    }
  }
}

@keyframes kaiten {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes msganim {
  0% {
    top: 100%;
    left: 100%;
    opacity: 0;
  }
  2% {
    top: 100%;
    left: 100%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.15);
  }
  8% {
    top: 100%;
    left: 100%;
    transform: translate(-50%, -50%) scale(0.15);
    opacity: 1;
  }
  12% {
    top: 100%;
    left: 100%;
    transform: translate(-50%, -50%) scale(0.15);
    opacity: 1;
  }
  18% {
    top: 84%;
    left: 84%;
    transform: translate(-50%, -50%) scale(0.33);
  }
  22% {
    top: 84%;
    left: 84%;
    transform: translate(-50%, -50%) scale(0.33);
  }
  28% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
  }
  32% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
  }
  38% {
    top: 16%;
    left: 16%;
    transform: translate(-50%, -50%) scale(0.33);
  }
  42% {
    top: 16%;
    left: 16%;
    transform: translate(-50%, -50%) scale(0.33);
  }
  48% {
    top: 0%;
    left: 0%;
    transform: translate(-50%, -50%) scale(0.15);
    opacity: 1;
  }
  52% {
    top: 0%;
    left: 0%;
    transform: translate(-50%, -50%) scale(0.15);
    opacity: 1;
  }
  58% {
    top: 0%;
    left: 0%;
    opacity: 0;
  }
  62% {
    top: 0%;
    left: 0%;
    opacity: 0;
  }
  68% {
    top: 0%;
    left: 0%;
  }
}

/**topics**/
#top-topics {
  background-color: #f5f5f5;
  padding-top: 90px;
  padding-bottom: 90px;
  margin-right: 0;
  margin-left: 0;
  padding-right: 0;
  padding-left: 0;
  .lib-title__outer {
    .title {
      color: var(--color_main);
      font-size: 4rem;
    }
  }
  .lib-txt__outer {
    font-size: 1.2rem;
    margin-top: 0.33em;
    margin-bottom: 50px;
  }
  .topics-slider {
    position: relative;
    .swiper-slide {
      width: 80%;
      max-width: 650px;
      a {
        display: block;
        overflow: hidden;
        position: relative;
        border-radius: 20px;
        img {
          display: block;
          border: 10px solid var(--color_main);
          border-radius: 20px;
        }
        .txt {
          display: grid;
          align-items: center;
          height: 2.4em;
          padding: 0.5em 2em;
          background-color: var(--color_main);
          border-radius: 1em 0 0 0;
          color: #ffffff;
          font-size: 1.4rem;
          line-height: 1.2;
          font-weight: 600;
          position: absolute;
          right: 9px;
          bottom: 0;
        }
      }
    }
  }
}

/**contents**/
#top-contents {
  padding-top: 90px;
  padding-bottom: 90px;
  .lib-title__outer {
    .title {
      color: var(--color_main);
      font-size: 4rem;
    }
  }
  .lib-txt__outer {
    font-size: 1.2rem;
    margin-top: 0.33em;
    margin-bottom: 50px;
  }
  .row {
    align-items: flex-start;
    margin: 0;
    .col {
      a {
        display: block;
        width: 100%;
        aspect-ratio: 0.6;
        padding-bottom: calc(100% / 0.6);
        border-radius: 30px;
        position: relative;
        border: none;
        overflow: hidden;
        background-color: #ffffff;
        .txt {
          color: var(--color_main);
          position: absolute;
          z-index: 1;
          display: grid;
          grid-template-columns: repeat(2, auto);
          grid-column-gap: 5px;
          justify-content: start;
          padding-top: 20px;
          padding-left: 5%;
          span {
            writing-mode: vertical-rl;
            line-height: 1;
            &.jp {
              order: 1;
              font-size: 1.2rem;
              letter-spacing: 0.05em;
            }
            &.en {
              font-size: 3.6rem;
            }
          }
        }
        .bgimg {
          img {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
          }
        }
        & > img {
          width: 15%;
          display: block;
          position: absolute;
          right: 15px;
          bottom: 20px;
          z-index: 1;
        }
      }
      &:nth-child(2) {
        margin-top: 50px;
      }
      &:nth-child(3) {
        margin-top: 100px;
      }
    }
  }
  .nav-wrap {
    display: none;
  }
}

/**staff**/
#top-staff {
  position: relative;
  overflow: clip;
  padding: 0 0 100px;
  margin-right: 0;
  margin-left: 0;
  padding-right: 0;
  padding-left: 0;
  .top-staff-wrap {
    background-color: var(--color_main);
    background: linear-gradient(0deg, rgba(242, 87, 9, 1) 0%, rgba(208, 18, 27, 1) 50%);
    margin-top: 0;
    padding-top: 60px;
    padding-bottom: 60px;
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
    .wrap {
      position: relative;
      z-index: 1;
    }
    .btn-circle {
      margin: 0 auto;
    }
    &::before {
      content: "";
      content: none;
      width: 80vw;
      height: 55vw;
      position: absolute;
      display: block;
      left: -40%;
      top: 20%;
      background: #ffffff;
      background: radial-gradient(circle, rgba(242, 87, 9, 1) 0%, rgba(242, 87, 9, 0) 50%);
      z-index: 0;
      mix-blend-mode: add;
      pointer-events: none;
    }
  }
  .lib-title__outer {
    .title {
      color: #ffffff;
      font-size: 4rem;
      margin-bottom: 1em;
    }
  }
  .lib-txt__outer {
    color: #ffffff;
    font-size: 1.2rem;
    margin-top: 0.33em;
    margin-bottom: 50px;
  }
  .staff-slider {
    overflow: visible;
    padding-top: 50px;
    z-index: 1;
    .swiper-slide {
      transition: 0.9s;
      opacity: 0;
      &.swiper-slide-active,
      &.swiper-slide-duplicate-active {
        transform: scale(1) translate(0, 0) rotate(0deg);
        opacity: 1;
      }
      &.snext {
        transform: scale(0.8) translate(-5%, -10%) rotate(-10deg);
        opacity: 1;
      }
      &.sprev {
        transform: scale(0.8) translate(5%, -10%) rotate(10deg);
        opacity: 1;
      }
      &.snext2 {
        transform: scale(0.6) translate(-5%, -50%) rotate(-20deg);
      }
      &.sprev2 {
        transform: scale(0.6) translate(5%, -50%) rotate(20deg);
      }
      a {
        display: block;
        position: relative;
        .year {
          font-size: 1rem;
          line-height: 1;
          color: var(--color_main);
          background-color: #ffffff;
          font-weight: bold;
          padding: 1em 1.5em;
          border-radius: 0.66em;
          display: block;
          position: absolute;
          left: 1em;
          top: 0;
          transform: translateY(-50%);
          &::before {
            content: "";
            width: 15px;
            height: 12px;
            background-color: #ffffff;
            position: absolute;
            left: 1.5em;
            bottom: -11px;
            clip-path: polygon(0 0, 100% 0, 50% 100%);
          }
        }
        .img {
          img {
            display: block;
            width: 100%;
            aspect-ratio: 7/8;
            object-fit: cover;
            border-radius: 30px;
          }
        }
        .info {
          width: calc(100% - 30px);
          aspect-ratio: 3;
          border-radius: 15px;
          background-color: #ffffff;
          position: absolute;
          left: 15px;
          top: 85%;
          padding: 20px 20px 15px;
          display: grid;
          align-content: space-between;
          grid-row-gap: 15px;
          .tag {
            font-size: 1rem;
            line-height: 1;
            padding: 0.33em 1em;
            background-color: var(--color_main);
            color: #ffffff;
            border-radius: 6px;
            position: absolute;
            z-index: 2;
            left: 0;
            top: -2.5em;
          }
          .msg {
            font-size: 1rem;
            font-weight: 500;
            line-height: 1.5;
          }
          .name {
            font-size: 0.9rem;
            line-height: 1;
          }
          & > img {
            width: 30px;
            position: absolute;
            right: 10px;
            bottom: 10px;
          }
        }
      }
    }
    .nav-wrap {
      margin-top: 120px;
      margin-bottom: 60px;
      /* .swiper-pagination {
                .swiper-pagination-bullet {
                    background-color:#FFFFFF!important;
                    border:none;
                    &.swiper-pagination-bullet-active {
                        background-color:#333333!important;
                    }
                }
            } */
      .swiper-button-prev,
      .swiper-button-next {
        background: url(/dcms_media/other/icon-arrow-circle-w-s.svg) no-repeat center center/contain;
      }
    }
  }
  .top-circleanim {
    width: 100%;
    height: auto;
    aspect-ratio: 7.3;
    position: relative;
    overflow: hidden;
    left: 0;
    pointer-events: none;
    margin-bottom: -1px;
    img {
      display: block;
      position: absolute;
      left: 50%;
      top: 0;
      transform: translate(-50%, 0) rotate(0deg);
      animation: spin 120s linear infinite;
      /* min-width: 5000px; */
      max-width: 350vw;
      width: 350%;
      z-index: 1;
    }
    &::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 0;
      background: url(/dcms_media/other/top-circle.svg) no-repeat center bottom/100% auto;
    }
    &.circle2 {
      margin-top: -1px;
      img {
        top: auto;
        bottom: 0;
      }
      &::before {
        background: url(/dcms_media/other/top-circle3.svg) no-repeat center top/100% auto;
      }
    }
  }
}

@keyframes spin {
  0% {
    transform: translate(-50%, 0) rotate(0deg);
  }
  100% {
    transform: translate(-50%, 0) rotate(360deg);
  }
}

/**link**/
#top-link {
  padding-bottom: 90px;
  .row {
    margin: 0;
    .col {
      margin: 0;
      padding: 0;
      a {
        background-color: #ffffff;
        border: 2px solid var(--color_main);
        display: grid;
        width: 100%;
        aspect-ratio: 1.1;
        border-radius: 30px;
        .txt {
          color: #333333;
          display: grid;
          justify-items: center;
          grid-row-gap: 0.5em;
          font-size: 1.4rem;
          .en {
            font-size: 1.33em;
            color: var(--color_main);
          }
        }
      }
    }
  }
}

/**news**/
#top-news {
  padding-bottom: 120px;
  .lib-title__outer {
    .title {
      color: var(--color_main);
      font-size: 4rem;
      margin-bottom: 0.66em;
    }
  }
  .row {
    margin: 0;
    padding: 0;
    column-gap: 40px;
    justify-content: flex-start;
    .lib-link__btn {
      width: 80px;
      border: 2px solid var(--color_main);
      border-radius: 15px;
      background-color: #ffffff;
      color: var(--color_main);
      display: grid;
      align-content: center;
      justify-items: center;
      grid-row-gap: 1.5em;
      padding: 1.5em 0 1.2em;
      .txt {
        writing-mode: vertical-rl;
        text-align: center;
        line-height: 1;
        transform: translateX(-0.1em);
      }
      img {
        width: 2em;
      }
    }
    .container {
      flex-grow: 1;
      width: calc(100% - 121px);
      order: 1;
      .lib-rss__list {
        font-weight: 500;
        border-bottom: var(--GRY) 1px solid;
        padding-bottom: 1.5em;
        a {
          color: var(--color_main);
          text-decoration: none;
        }
        .lib-rss__title {
          color: var(--color_main);
        }
      }
    }
  }
}

/****/
#top-entry {
  overflow: clip;
  margin-top: 0;
  margin-bottom: 0 !important;
  margin-right: 0;
  margin-left: 0;
  padding-right: 0;
  padding-left: 0;
  .entry-obj {
    display: block;
    width: 116%;
    max-width: 116%;
    margin: 0 -8% -1px;
    aspect-ratio: 2.7;
    object-fit: cover;
    object-position: top center;
  }
  .entry-wrap {
    background-color: var(--color_main);
    margin-top: 0;
    margin-bottom: 0 !important;
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
    .wrap {
      padding-top: 50px;
      padding-bottom: 90px;
      .row {
        .col {
          a {
            background-color: #ffffff;
            padding: 0;
            display: grid;
            width: 100%;
            aspect-ratio: 2.5;
            border: none;
            border-radius: 15px;
            position: relative;
            overflow: hidden;
            border: 2px solid var(--color_main);
            .txt {
              display: grid;
              justify-items: center;
              align-content: ceter;
              color: var(--color_main);
              font-size: 3rem;
              line-height: 1;
              .year {
                font-size: 2em;
              }
              &::after {
                content: none !important;
              }
            }
            &.nolink {
              pointer-events: none;
              &::before {
                content: "";
                display: block;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                position: absolute;
                z-index: 1;
                background-color: rgba(0, 0, 0, 0.5);
              }
              &::after {
                content: "COMING SOON.....";
                display: block;
                width: 100%;
                text-align: center;
                font-size: 2rem;
                position: absolute;
                z-index: 2;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
            }
          }
        }
      }
    }
  }
}

@media (hover: hover) {
  /**
    HEADER
    **/
  .lib-header__outer {
    .lib-header__inner {
      .lib-header__bar {
        .lib-header__nav {
          .lib-utility__outer {
            .lib-utility__list {
              .lib-utility__item {
                a {
                  .txt {
                    &::before {
                      transition: 0.3s;
                    }
                  }
                  &:hover {
                  }
                }
                .lib-utility__item__child {
                  transition: 0.5s;
                }
                &:hover {
                  .lib-utility__item__child {
                    opacity: 1;
                    transform: translateY(0);
                    pointer-events: all;
                  }
                  & > a {
                    color: var(--color_main);
                    .txt {
                      &::before {
                        height: 3px;
                        background-color: var(--color_main);
                      }
                    }
                  }
                }
              }
            }
          }
          .header-entry {
            li {
              &:hover {
                & > a {
                  background-color: #ffffff;
                  color: var(--color_main);
                  border-color: var(--color_main);
                }
              }
              ul {
                transition: 0.5s;
              }
              &:hover {
                ul {
                  opacity: 1;
                  pointer-events: all;
                  transform: translate(-50%, 0);
                }
              }
            }
          }
          .lib-menu__btn {
            &:not(.is-open) {
              &:hover {
                .line {
                  &:nth-child(1) {
                    top: calc(50% - 1px - 12px);
                  }
                  &:nth-child(3) {
                    bottom: calc(50% - 1px - 12px);
                  }
                }
              }
            }
            &.is-open {
              &:hover {
                .line {
                  &:nth-child(1) {
                    top: calc(50% - 1px - 10px);
                    transform: translateY(calc(50% - 1px + 10px)) rotate(-30deg);
                  }
                  &:nth-child(3) {
                    bottom: calc(50% - 1px - 10px);
                    transform: translateY(calc(50% - 1px - 10px)) rotate(30deg);
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .lib-header__outer {
    &.lib-header-BS01 {
      .lib-nav__outer {
        .lib-utility__list {
          .lib-utility__item {
            a {
              &:hover {
                .txt {
                  color: var(--color_main);
                }
              }
            }
          }
        }
      }
    }
  }

  /**
    FOOTER
    **/
  .lib-footer__outer {
    .lib-footer__inner {
      .lib-footer__container {
        .lib-footer__gnav {
          .footer__gnav-wrap {
            .footer-menu {
              li {
                a {
                  &:hover {
                    background-color: var(--color_main);
                    border-color: #ffffff;
                    color: #ffffff;
                  }
                }
              }
            }
          }
          .lib-footer__other {
            width: 100%;
            margin: 50px 0 0;
            padding: 0;
            gap: 0;
            li {
              a {
                color: #ffffff;
                font-weight: 500;
                &::before {
                  content: none;
                }
              }
              &:first-child {
                &::after {
                  content: "|";
                  color: #ffffff;
                  margin: 0 1em;
                  display: inline-block;
                  transform: translateY(-0.1em) scale(1, 1.3);
                }
              }
            }
          }
        }
      }
    }
    &.lib-footer-BS02 {
      .lib-footer__utility {
        background-color: transparent;
        margin-top: 30px;
        padding: 0 20px 30px;
        .wrap {
          justify-content: center;
          .lib-footer__copyright {
            background-color: transparent;
            font-size: 0.9rem;
            font-weight: 500;
          }
        }
      }
    }
  }

  .lib-card__btn {
    .btn-circle {
      &:hover {
        transform: scale(1.05);
        img {
          opacity: 1;
        }
      }
    }
  }

  #top-tag {
    .slide {
      a {
        &:hover {
          color: #ffffff;
          transform: scale(1.05);
        }
      }
    }
  }

  #top-topics {
    .topics-slider {
      .swiper-slide {
        a {
          &:hover {
            .txt {
              text-decoration: none;
            }
          }
        }
      }
    }
  }

  #top-contents {
    .row {
      .col {
        a {
          &:hover {
            transform: scale(1.05);
            img {
              opacity: 1;
            }
          }
        }
      }
    }
  }

  /**staff**/
  #top-staff {
    .staff-slider {
      .swiper-slide {
        a {
          &:hover {
            transform: scale(1.05);
            .img {
              img {
                opacity: 1;
              }
            }
          }
        }
      }
    }
  }

  #top-link {
    .row {
      .col {
        a {
          span {
            transition: 0.3s;
          }
          &:hover {
            background-color: var(--color_main);
            .txt {
              color: #ffffff;
              .en {
                color: #ffffff;
              }
            }
          }
        }
      }
    }
  }

  #top-news {
    .row {
      .lib-link__btn {
        &:hover {
          opacity: 1;
          transform: scale(1.05);
          img {
            opacity: 1;
          }
        }
      }
      .wrap {
        .lib-rss__list {
          a {
            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
    }
  }

  /****/
  #top-entry {
    &.lib-wide__outer {
      margin-bottom: 0 !important;
    }
    .entry-obj {
      margin-bottom: -1px;
    }
    .entry-wrap {
      &.lib-wide__outer {
        margin-bottom: 0 !important;
      }
      margin-top: 0;
      .row {
        .col {
          a {
            .txt {
              transition: 0.3s;
              .year {
                transition: 0.3s;
              }
            }
            &:hover {
              border-color: #ffffff;
              background-color: var(--color_main);
              .txt {
                color: #ffffff;
                .year {
                  color: #ffffff;
                }
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) and (hover: hover) {
  /**
    HEADER
    **/
  .lib-header__outer {
    .lib-header__inner {
      .lib-header__bar {
        .lib-header__nav {
          .header-entry {
            li {
              &:hover {
                ul {
                  opacity: 0;
                  pointer-events: none;
                  transform: translate(-50%, -20px);
                }
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 991.8px) {
  /**MV**/
  .top-fv {
    background: url(/dcms_media/image/fv.jpg) no-repeat center 15% / cover;
    .wrap {
      h1 {
        line-height: 1.3;
        padding-bottom: 0.2em;
      }
    }
  }

  /**TAG**/

  /**message**/
  #top-message {
    padding-top: 90px;
    .lib-horizon__row {
      display: grid;
      padding-left: 0.75rem;
      padding-right: 0.75rem;
      .lib-horizon__col {
        &:first-child {
          display: contents !important;
          .lib-horizon__col,
          .lib-card__item,
          .lib-card__txtarea,
          .lib-card__inside {
            display: contents !important;
            .title {
              order: 0;
            }
            .lib-card__txt {
              order: 2;
            }
          }
          .lib-card__btn {
            order: 3;
          }
        }
        &:last-child {
          order: 1;
        }
      }
    }
    .lib-card__item {
      .lib-card__txtarea {
        .lib-card__inside {
          .title {
            margin-bottom: 2em;
          }
          .lib-card__txt {
            padding-top: 1em;
            p {
              font-size: 1.1rem;
            }
          }
        }
      }
    }
    .msg-slider {
      aspect-ratio: 1;
      padding-bottom: 100%;
      max-width: 500px;
      margin: 0 auto;
    }
  }

  /**topics**/
  #top-topics {
    .topics-slider {
      .swiper-slide {
        max-width: 500px;
        a {
          .txt {
            font-size: 1.2rem;
          }
        }
      }
    }
  }

  /**contents**/
  #top-contents {
    .row {
      .col {
        a {
          .txt {
            span {
              &.en {
                font-size: 2.6rem;
              }
            }
          }
        }
      }
    }
  }

  /**staff**/
  #top-staff {
    .lib-title__outer {
      .title {
        font-size: 3.6rem;
      }
    }
    .lib-txt__outer {
      font-size: 1.1rem;
    }
    .staff-slider {
      .swiper-slide {
        a {
          .year {
            font-size: 0.9rem;
          }
          .info {
            width: calc(100% - 20px);
            border-radius: 10px;
            left: 10px;
            padding: 15px 15px 10px;
            .tag {
              font-size: 0.8rem;
            }
            .msg {
              font-size: 0.9rem;
            }
            .name {
              font-size: 0.8rem;
            }
            & > img {
              width: 25px;
            }
          }
        }
      }
    }
  }

  /**link**/
  #top-link {
    .row {
      .col {
        a {
          .txt {
            font-size: 1.2rem;
          }
        }
      }
    }
  }

  /**news**/

  /****/
  #top-entry {
    .entry-wrap {
      .wrap {
        padding-bottom: 50px;
        .row {
          .col {
            a {
              .txt {
                font-size: 2.4rem;
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  /**
    TOP
    **/

  .nav-wrap {
    margin-top: 30px;
    column-gap: 15px;
    .swiper-pagination {
      width: auto;
      display: flex;
      align-items: center;
      column-gap: 10px;
      .swiper-pagination-bullet {
        width: 10px !important;
        height: 10px !important;
      }
    }
    .swiper-button-prev,
    .swiper-button-next {
      width: 20px;
      height: 20px;
    }
  }

  .top-fv {
    & + #contents {
      padding: 40px 0 0;
    }
  }

  /**MV**/
  .top-fv {
    background: url(/dcms_media/image/fv.jpg) no-repeat center 40% / cover;
    .wrap {
      h1 {
        padding-bottom: 0.33em;
      }
    }
  }

  /**TAG**/
  #top-tag {
    .tag-slider1 {
      margin-bottom: 10px;
    }
    .slide {
      padding: 0 10px;
    }
  }

  /**message**/
  #top-message {
    padding-top: 50px;
    .lib-card__item {
      .lib-card__txtarea {
        .lib-card__inside {
          .title {
            font-size: 2rem;
            margin-bottom: 2em;
          }
          .lib-card__txt {
            padding-top: 2em;
            p {
              font-size: 1rem;
              margin-bottom: 2em;
            }
          }
        }
        .lib-card__btn {
          .btn-circle {
            margin: 0 auto;
          }
        }
      }
    }
    .msg-slider {
      &::before {
        font-size: 4rem;
      }
      &::after {
        font-size: 4em;
      }
      .msg-slide {
        width: 75%;
        max-width: 280px;
      }
    }
  }

  /**topics**/
  #top-topics {
    margin: 60px 0 0;
    padding: 50px 0;
    .lib-title__outer {
      .title {
        font-size: 3rem;
      }
    }
    .lib-txt__outer {
      margin-bottom: 40px;
      text-align: center;
    }
    .topics-slider {
      .swiper-slide {
        width: 100%;
        a {
          img {
            border: 8px solid var(--color_main);
          }
          .txt {
            font-size: 1rem;
            right: 7px;
          }
        }
      }
    }
  }

  /**contents**/
  #top-contents {
    padding-top: 50px;
    padding-bottom: 50px;
    .lib-title__outer {
      .title {
        font-size: 3rem;
      }
    }
    .lib-txt__outer {
      margin-bottom: 40px;
    }
    .contents-slider {
      max-width: 400px;
      margin: 0 auto;
      overflow: hidden;
    }
    .nav-wrap {
      display: flex;
    }
    .row {
      .col {
        a {
          aspect-ratio: 0.86;
          padding-bottom: calc(100% / 0.86);
          border-radius: 20px;
          .txt {
            span {
              &.en {
                font-size: 2.6rem;
              }
            }
          }
        }
        &:nth-child(2) {
          margin-top: 0;
        }
        &:nth-child(3) {
          margin-top: 0;
        }
      }
    }
  }

  /**staff**/
  #top-staff {
    padding: 0 0 60px;
    margin: 0;
    .top-staff-wrap {
      padding: 30px 0;
      margin: 0;
      &::before {
        width: 80vw;
        height: 150vw;
        left: -40%;
        top: 30%;
      }
    }
    .lib-title__outer {
      .title {
        font-size: 2rem;
        line-height: 1.3;
      }
    }
    .lib-txt__outer {
      font-size: 1.1rem;
      margin-bottom: 30px;
    }
    .staff-slider {
      width: 90%;
      max-width: 350px;
      margin: 0 auto;
      overflow: visible;
      .nav-wrap {
        margin: 90px 0 30px;
      }
    }
    .top-circleanim {
      aspect-ratio: 4;
      img {
        max-width: 600vw;
        width: 600%;
        z-index: 1;
      }
      &::before {
        background: url(/dcms_media/other/top-circle.svg) no-repeat center bottom/180% auto;
      }
      &.circle2 {
        &::before {
          background: url(/dcms_media/other/top-circle3.svg) no-repeat center top/180% auto;
        }
      }
    }
  }

  /**link**/
  #top-link {
    padding-bottom: 60px;
    .row {
      margin: 0 auto;
      display: grid;
      max-width: 400px;
      grid-row-gap: 15px;
      .col {
        width: 100%;
        a {
          aspect-ratio: 2;
          border-radius: 20px;
          .txt {
            color: #333333;
            display: grid;
            justify-items: center;
            grid-row-gap: 0.5em;
            font-size: 1.4rem;
            .en {
              font-size: 2em;
              line-height: 1;
              text-align: center;
            }
          }
        }
      }
    }
  }

  /**news**/
  #top-news {
    padding-bottom: 60px;
    .lib-title__outer {
      .title {
        font-size: 3rem;
      }
    }
    .row {
      row-gap: 30px;
      .lib-link__btn {
        width: 100%;
        max-width: 14em !important;
        grid-template-columns: 1fr auto;
        border-radius: 2em;
        height: 2.4em;
        padding: 0 0.5em;
        font-size: 1rem;
        margin: 0 auto;
        background-color: var(--color_main);
        color: #ffffff;
        order: 1;
        .txt {
          writing-mode: unset;
          transform: translateX(0);
          text-align: center;
        }
        img {
          width: 2em;
        }
      }
      .container {
        width: 100%;
        order: 1;
        .lib-rss__list {
          padding-bottom: 1em;
        }
      }
    }
  }

  /****/
  #top-entry {
    .entry-obj {
      width: 150%;
      max-width: 150%;
      margin: 0 -25% -1px;
    }
    .entry-wrap {
      .wrap {
        padding-top: 30px;
        padding-bottom: 40px;
        .row {
          row-gap: 20px;
          max-width: 400px;
          margin: 0 auto;
          .col {
            width: 100%;
            a {
              .txt {
                .year {
                  font-size: 1.1em;
                  margin-bottom: 0.25em;
                }
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 575.8) {
}

@media screen and (max-width: 768px) {
  .pcOnly {
    display: none !important;
  }
  .tbOnly {
    display: none !important;
  }
}
@media screen and (min-width: 1024px) {
  .tbOnly {
    display: none !important;
  }
  .sptbOnly {
    display: none !important;
  }
}
@media screen and (min-width: 769px) {
  .spOnly {
    display: none !important;
  }
}
@media screen and (min-width: 576px) {
  .spOnly2 {
    display: none !important;
  }
}

body {
  &.dcms_editor {
    #top-loading {
      display: none;
    }
  }
  &:not(.dcms_editor) {
    &:has(#top-loading.start) {
      overflow: hidden;
    }
  }
}

#top-loading {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: var(--color_main);
  left: 0;
  top: 0;
  transition: 1s;
  &.start {
    .top-ld {
      transform: translate(-50%,-50%);
      &:not(.top-ld8){
        img {
          animation-name: toploading;
          animation-duration: 15s;
          animation-fill-mode: forwards;
          animation-iteration-count: 1;
          transition-timing-function:linear;
        }
      }
      &.top-ld8 {
        img {
          animation-name: toploading2;
          animation-duration: 7.5s;
          animation-fill-mode: forwards;
          animation-iteration-count: 1;
          transition-timing-function:linear;
        }
      }
    }
  }
  .ld-logo {
    width: min(25%, 250px);
    background-color: #ffffff;
    padding: 15px;
    margin-top: 30px;
    margin-left: 30px;
    pointer-events: none;
  }
  .top-ld {
    position: absolute;
    img {
      display: block;
      pointer-events: none;
      transform-origin: center bottom;
      opacity: 0;
    }
    &.top-ld1 {
      width: 40%;
      left: 15%;
      top: 50%;
      img {
        animation-delay: 1s;
      }
    }
    &.top-ld2 {
      width: 48%;
      left: 78%;
      top: 16%;
      img {
        animation-delay: 1.4s;
      }
    }
    &.top-ld3 {
      width: 52%;
      left: 50%;
      top: 50%;
      img {
        animation-delay: 1.8s;
      }
    }
    &.top-ld4 {
      width: 35%;
      left: 30%;
      top: 18%;
      img {
        animation-delay: 2.2s;
      }
    }
    &.top-ld5 {
      width: 38%;
      left: 25%;
      top: 80%;
      img {
      animation-delay: 2.6s;
      }
    }
    &.top-ld6 {
      width: 26%;
      left: 74%;
      top: 83%;
      img {
        animation-delay: 3.0s;
      }
    }
    &.top-ld7 {
      width: 37%;
      left: 83%;
      top: 52%;
      img {
        animation-delay: 3.4s;
      }
    }
    &.top-ld8 {
        width: 60%;
        left: 50%;
        top:50%;
      img {
        animation-delay: 5s;
      }
    }
  }
  &.end {
    opacity: 0;
    pointer-events: none;
    &.finish {
      display: none;
    }
  }
  .animskip {
    font-size: 1.6rem;
    font-weight: 700;
    color: #ffffff;
    position: absolute;
    z-index: 99;
    cursor: pointer;
    right: 50px;
    bottom: 50px;
    display: grid;
    grid-template-columns: repeat(2, auto);
    align-items: center;
    justify-content: center;
    grid-column-gap: 0.33em;
    transition: 0.3s;
    opacity: 0;
    pointer-events: none;
    &::after {
      content: "";
      width: 0.4em;
      height: 0.8em;
      background-color: #ffffff;
      clip-path: polygon(0 0, 100% 50%, 0 100%);
    }
  }
  &.load {
    .animskip {
      opacity: 1;
      pointer-events: all;
    }
  }
}

@keyframes toploading {
  0% {
    opacity: 0;
    transform: translateY(2vh) scale(0.4);
    filter: blur(30);
  }
  10% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  100% {
    transform: translateY(-6vh) scale(1.1);
    opacity: 1;
  }
}
@keyframes toploading2 { 
    0% {
      opacity: 0;
      scale: .6;
      filter: blur(30);
    }
    15% {
      opacity: 1;
      scale:1;
      filter: blur(0);
    }
    100% {
      scale: 1.1;
      opacity: 1;
    }
}

@media screen and (max-width: 540.8px) {
  #top-loading {
    .top-ld {
      &.top-ld1 {
        width: 60%;
        left: 24%;
        top: 28%;
      }
      &.top-ld2 {
        width: 62%;
        left: 70%;
        top: 32%;
      }
      &.top-ld3 {
        width: 84%;
      }
      &.top-ld4 {
        width: 42%;
        left: 56%;
        top: 18%;
      }
      &.top-ld5 {
        width: 63%;
        left: 24%;
        top: 66%;
      }
      &.top-ld6 {
        width: 47%;
        left: 39%;
        top: 83%;
      }
      &.top-ld7 {
        width: 63%;
        left: 78%;
        top: 26%;
        top: 72%;
      }
      &.top-ld8 {
          width: 80%;
      }
    }
    .animskip {
      font-size: 1.4rem;
      right: 20px;
      bottom: 30px;
    }
  }
}

/**quiz**/
.fancybox__backdrop {
  background: rgba(0, 0, 0, 0.5) !important;
}
#quiz_modal {
  padding: 0;
  border-radius: 30px;
  .f-button {
    width: 30px;
    height: 30px;
    background: url(/dcms_media/other/quiz-close.svg) no-repeat center center/contain;
    top: 10px;
    right: 10px;
    svg {
      display: none;
    }
  }
}
.quiz_wrap {
  max-width: 600px;
  margin: 0 auto;
  .quiz_question {
    background-color: #efefef;
    border-radius: 30px;
    padding: 50px;
    transition: 0.5s;
    .img {
      img {
        display: block;
      }
    }
    p {
      &#quiz-text {
        font-size: 1.2rem;
        line-height: 1.7;
        font-weight: 600;
        padding: 1em 0;
        text-align: center;
      }
    }
    .quiz_select {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 10px;
      position: relative;
      .quiz_answer {
        &::before {
          content: none;
        }
        margin: 0;
        height: 6em;
        padding: 1em;
        background-color: #ffffff;
        border: 2px solid var(--color_main);
        border-radius: 20px;
        display: grid;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        font-weight: 600;
        line-height: 1.5;
        text-align: center;
        cursor: pointer;
        position: relative;
        .quiz-icon {
          display: block;
          position: absolute;
          top: -15px;
          right: -15px;
          width: 50px;
          height: 50px;
          background: url(/dcms_media/other/quiz-true.svg) no-repeat center center/contain;
          transition: 0.3s;
          opacity: 0;
          pointer-events: none;
        }
        &:nth-child(odd) {
          .quiz-icon {
            right: auto;
            left: -15px;
          }
        }
      }
    }
    .quiz_select_wrap {
      position: relative;
      #quiz-ans {
        font-size: 1.3rem;
        font-weight: 600;
        color: #ffffff;
        background-color: #FF6800;
        position: absolute;
        z-index: 2;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: grid;
        align-items: center;
        height: 3em;
        padding: 0 2em;
        min-width: 8em;
        text-align: center;
        border-radius: 10px;
        pointer-events: none;
        overflow: hidden;
        opacity: 0;
        height: 0;
        transition-duration: 0.3s;
      }
    }
    .quiz_step {
      font-size: 0.9rem;
      text-align: center;
      padding-top: 30px;
      font-weight: 500;
      letter-spacing: 0.1em;
    }
    &.result {
      .quiz_select {
        .quiz_answer {
          pointer-events: none;
          &.selected {
            background-color: #ffc298;
            border-color:#eca0a4;
            .quiz-icon {
              opacity: 1;
            }
          }
          &.selected2 {
            background-color: #98def9;
            border-color:#eca0a4;
            .quiz-icon {
              opacity: 1;
              background-image: url(/dcms_media/other/quiz-false.svg);
            }
          }
        }
      }
      .quiz_select_wrap {
        position: relative;
        #quiz-ans {
          height: 3em;
          opacity: 1;
          transition-delay: 0.66s;
        }
      }
      &.incorrect {
        .quiz_select_wrap {
          position: relative;
          #quiz-ans {
            background-color: #00AFF1;
          }
        }
      }
    }
    &.change {
      opacity: 0;
      pointer-events: none;
    }
    &.hide {
      display: none;
    }
  }
  .quiz_result {
    background-color: var(--color_main);
    border-radius: 30px;
    padding: 50px;
    position: relative;
    transition: 0.5s;
    opacity: 1;
    &:not(.show) {
      position: absolute;
      pointer-events: none;
      opacity: 0;
      z-index: -1;
    }
    .img {
      background-color: #ffffff;
      border-radius: 20px;
      padding: 30px;
      display: grid;
      grid-template-columns: 50% 1fr;
      align-items: center;
      grid-column-gap: 5%;
      margin-bottom: 30px;
      .percent {
        width: 100%;
        aspect-ratio: 1;
        border: 10px solid #cfcfcf;
        border-radius: 50%;
        display: grid;
        align-items: center;
        justify-content: center;
        padding: 5%;
        dl {
          display: grid;
          width: 100%;
          height: 100%;
          aspect-ratio: 1;
          border-radius: 50%;
          align-content: center;
          justify-items: center;
          border: 5px solid #fbb6b3;
          dt {
            font-size: 1rem;
            font-weight: 600;
            line-height: 1;
            &::after {
              content: "";
              display: block;
              margin: 1em auto 0.66em;
              width: 1em;
              height: 3px;
              background-color: #000000;
            }
          }
          dd {
            font-size: 1.5rem;
            line-height: 1;
            font-weight: 700;
            padding-left: 1em;
            background: linear-gradient(90deg, #e52245 0%, #ff8e44 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            #quiz-score {
              display: inline-block;
              font-size: 2em;
            }
          }
        }
      }
      .detail {
        text-align: center;
        p {
          font-size: 1.2rem;
          line-height: 1.5;
          font-weight: 500;
          color: #000000;
          &#quiz-class {
            background-color: var(--color_main);
            color: #ffffff;
            display: inline-block;
            padding: 0 0.66em;
            font-size: 1.5em;
            margin-bottom: 1em;
          }
        }
        img {
          display: block;
          width: 80%;
          margin: 0 auto;
        }
      }
    }
    p {
      color: #ffffff;
      text-align: center;
      line-height: 1.5;
      &.body1 {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: .66em;
        & + .body1 {
          margin-bottom: 1.5em;
        }
      }
      &.body2 {
        font-size: 1.1rem;
        padding: 1.5em 0 2em;
      }
    }
    .btnwrap {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-column-gap: 5%;
      margin-bottom: 30px;
      a {
        background-color: #ffffff;
        border: 2px solid #ffffff;
        color: #000000;
        text-decoration: none;
        font-size: 1rem;
        font-weight: 600;
        display: grid;
        height: 4em;
        border-radius: 10px;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 1.2;
        &::after {
          content: none !important;
        }
      }
    }
    .quiz_check {
      text-align: center;
      a {
        color: #ffffff;
      }
    }
  }
}

@media screen and (max-width: 620px) {
  #quiz_modal {
    border-radius: 20px;
    width: 94%;
    .f-button {
      width: 25px;
      height: 25px;
      top: 5px;
      right: 5px;
    }
  }
  .quiz_wrap {
    .quiz_question {
      border-radius: 20px;
      padding: 30px 20px;
      p {
        &#quiz-text {
          font-size: 0.85rem;
        }
      }
      .quiz_select {
        grid-gap: 5px;
        .quiz_answer {
          padding: 0.5em;
          border-radius: 10px;
          font-size: 0.9rem;
          .quiz-icon {
            top: -6px;
            right: -6px;
            width: 20px;
            height: 20px;
          }
        }
      }
      .quiz_select_wrap {
        #quiz-ans {
          font-size: 1.2rem;
        }
      }
    }
    .quiz_result {
      border-radius: 20px;
      padding: 30px 20px;
      .img {
        border-radius: 15px;
        padding: 15px;
        grid-template-columns: 50% 1fr;
        grid-column-gap: 2%;
        margin-bottom: 20px;
        .percent {
          border: 5px solid #cfcfcf;
          padding: 3%;
          dl {
            border: 3px solid #fbb6b3;
            dt {
              font-size: 0.8rem;
              &::after {
                margin: 0.5em auto 0.33em;
                height: 2px;
              }
            }
            dd {
              font-size: 1.1rem;
              #quiz-score {
                font-size: 1.8em;
              }
            }
          }
        }
        .detail {
          p {
            font-size: 0.9rem;
            &#quiz-class {
              font-size: 0.9rem;
            }
          }
        }
      }
      p {
        &.body1 {
          font-size: 1.1rem;
        }
        &.body2 {
          font-size: 0.9rem;
        }
      }
      .btnwrap {
        grid-column-gap: 3%;
        margin-bottom: 20px;
        a {
          font-size: 0.9rem;
        }
      }
    }
  }
}

@media (hover: hover) {
  .quiz_wrap {
    .quiz_question {
      .quiz_select {
        .quiz_answer {
          transition: 0.3s;
          &:hover {
            background-color: #FFDEDE;
          }
        }
      }
    }
    .quiz_result {
      .btnwrap {
        a {
          transition: 0.3s;
          &:hover {
            background-color: var(--color_main);
            color: #ffffff;
          }
        }
      }
      .quiz_check {
        a {
          &:hover {
            text-decoration: none;
          }
        }
      }
    }
  }
}

/* html:not(.is-editor) {
  body:not(.showtop):has(#top-loading) {
    visibility: hidden;
  }
} */

/**internship**/
#wrapper {
  &:has(#internship_mv) {
    .lib-breadcrumb__outer {
      display: none;
    }
    #contents,.container,.wrap {
      max-width: 1300px;
    }
  }
}

#internship_mv {
  position: relative;
  img {
    display: block;
  }
  .obj {
    width: 36%;
    position: absolute;
    left: 24%;
    bottom:-5%;
  }
  .msg {
    font-weight: 800;
    font-size:min(1.8vw,1.4rem);
    line-height: 1.3;
    text-align: center;
    position: absolute;
    right: 10.5%;
    bottom:22%;
    color:#FFFFFF;
    letter-spacing: .05em;
    .txt {
      font-size: min(2.9vw,2.3rem);
      color:#ffe600;
      font-style: italic;
    }
    .txt2 {
      font-size: min(2.9vw,2.3rem);
    }
  }
}

#internship_content {
  background: url(/dcms_media/image/internship-red-bg.jpg) no-repeat center center/cover;
  border-radius: 30px;
  margin-top: 0;
  text-align: center;
  .title_main {
    font-size:  min(4.8vw,3.8rem);
    color:#FFFFFF;
    font-weight: 800;
    display: grid;
    grid-template-columns: 1.5em 1fr 1.5em;
    align-items: center;
    margin-bottom: 1em;
    .text {
      display: grid;
      justify-items: center;
      align-content: center;
      .line {
        font-size: 1.33em;
        width: 5em;
        display: grid;
      }
    }
  }
  .body {
    font-size: min(2.3vw, 1.5rem);
    color:#FFFFFF;
    line-height: 2;
    font-weight: 600;
    position: relative;
    z-index: 1;
  }
  .info {
    display: grid;
    grid-template-columns: repeat(2,auto);
    align-items: center;
    justify-content: space-between;
    padding-left: 4em;
    max-width: 1000px;
    margin:0 auto;
    & > span {
      font-size: min(3vw, 2.2rem);
      color:#ffe600;
      font-weight: 800;
      font-style: italic;
      text-align: center;
      line-height: 1.4;
      text-shadow: 5px 0 1px #000000,
                  0 5px 1px #000000,
                  -5px 0 1px #000000,
                  0 -5px 1px #000000,
                  5px 5px 1px #000000,
                  5px -5px 1px #000000,
                  -5px 5px 1px #000000,
                  -5px -5px 1px #000000;
      position: relative;
      &::after {
        content:'';
        display: block;
        width: 8em;
        height: 8em;
        background: url(/dcms_media/image/internship-triangle.png) no-repeat center center/contain;
        position: absolute;
        z-index: 0;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%);
      }
      .txtwrap {
        position: relative;
        z-index: 1;
      }
      &.info2 {
        font-size: min(2.8vw, 2rem);
        .txt1 {
          font-size: .9em;
          .txt2 {
            font-size: .6em;
          }
        }
        &::after {
          background: url(/dcms_media/image/internship-round.png) no-repeat center center/contain;

        }
      }
    }
  }
  .title_h3 {
    font-size: 3rem;
    color:#FFFFFF;
    background-color: #000000;
    display: inline-block;
    line-height: 2;
    line-height: 2.2;
    height: 2.2em;
    padding:0 1.2em;
    border-radius: 1.1em 1.1em 0 1.1em;
    margin-bottom: 1em;
    .txt {
      font-size: .5em;
    }
  }
  #internship_event {
    .lib-grid__col {
      display: grid;
      grid-template-rows: auto 1fr;
      margin-bottom: 60px;
      &.open {
        .lib-card__item {
          border:5px solid #000000;
          .btn {
            border-radius: 28px 0 24px 0;
            padding-top: 5px;
          }
        }
      }
    }
    .lib-card__txtarea {
      display: grid;
      grid-template-rows: 1fr auto;
      .lib-card__inside {
        display: grid;
        grid-template-rows: auto auto 1fr auto;
      }
    }
    .opt {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: min(2vw, 1.6rem);
      column-gap: .66em;
      margin-bottom: -.5em;
      position: relative;
      z-index: 1;
      .circle {
        color:var(--color_main);
        background-color:#ffe600;
        line-height: 1.1;
        font-weight: 800;
        width: 4.6em;
        height: 4.6em;
        display: grid;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        box-shadow: 0 10px 20px rgba(0,0,0,.15);
      } 
      .cross {
        position: relative;
        width: 1.5em;
        &::before,&::after {
          content:'';
          display: block;
          width: 3px;
          height: 2em;
          background-color: #000000;
          position: absolute;
          left: 50%;
          top:50%;
          transform: translate(-50%,-70%) rotate(40deg);
        }
        &::after {
          transform: translate(-50%,-70%) rotate(-40deg);
        }
      }
      .label {
        background-color:#ffe600;
        font-size: min(2.5vw, 2.2rem);
        font-weight: 800;
        border-radius: 0 1em;
        margin-left: -.1em;
        margin-bottom: -.5em;
        display: grid;
        justify-items: center;
        align-content: center;
        line-height: 1.2;
        min-height: 4em;
        padding:0 1em;
        .month {
          font-size: .8em;
        }
      }
    }
    .lib-card__item {
      background: url(/dcms_media/image/internship-event-bg.jpg) repeat center center/auto;
      border: 2px solid #000000;
      border-radius: 30px;
      .lib-card__caption {
        font-size: min(1.8vw, 1.5rem);
        font-weight: 800;
        display: grid;
        grid-template-columns: repeat(3,auto);
        align-items: center;
        justify-content: center;
        grid-column-gap: .33em;
        margin-bottom: 1em;
        img {
          width: 1.33em;
        }
      }
      .lib-card__title {
        width: 56%;
        margin:0 auto;
        position: relative;
        img {
          display: block;
          position: relative;
          z-index: 1;
          &.img {
            position: absolute;
            width: 75%;
            right: -60%;
            top:-30%;
            z-index: 0;
          }
        }
      }
      .lib-card__txt {
        font-size: min(1.7vw, 1.4rem);
        font-weight: 600;
        margin-bottom: 2em;
      }
      .detail {
        width: 92%;
        background-color: #FFFFFF;
        margin:0 auto;
        border:1px solid #000000;
        border-radius: 15px 15px 0 15px;
        padding:20px 20px 30px;
        display: grid;
        justify-items: center;
        dt {
          font-size: min(1.8vw, 1.5rem);
          font-weight: 800;
          border-bottom:3px solid #000000;
          margin-bottom: .66em;
        }
        dd {
          display: grid;
          width: 100%;
          grid-template-columns: repeat(2,auto);
          align-items: center;
          justify-content: center;
          grid-column-gap: 5%;
          font-size: min(2.5vw, 2.2rem);
          .txt {
            color:var(--color_main);
            display: grid;
            grid-template-columns: 1em auto;
            grid-column-gap: .25em;
            align-items: center;
            justify-content: center;
            font-weight: 800;
          }
        }
      }
      .btn {
        background-color: #000000;
        color:#FFFFFF;
        font-size: min(1.8vw, 1.5rem);
        font-weight: 800;
        display: grid;
        grid-template-columns: auto 1em;
        grid-column-gap: .25em;
        align-items: center;
        justify-content: center;
        height: 3.2em;
        max-width:9em;
        margin-left: auto;
        margin-right: 0;
        border-radius: 28px 0;
      }
    }
  }
  .bnr {
    display: block;
    position: relative;
    img {
      display: block;
      border-radius: 40px;
      box-shadow: 3px 6px 20px rgba(0,0,0,.25);
    }
    .txtbox {
      display: grid;
      position: absolute;
      z-index: 1;
      top:50%;
      left: 35%;
      transform: translateY(-50%);
      color:#ffe600;
      font-size: min(2.5vw, 2rem);
      font-weight: 800;
      font-weight: 800;
      line-height: 1.2;
      text-align: left;
      .txt1 {
        font-size: 2em;
      }
      .txt2 {
        font-size: 2.5em;
      }
      .txt3 {
        color:#FFFFFF;
        margin-top: .5em;
      }
    }
  }
}

div[id^="internship_modal"] {
  padding:0;
  background-color: transparent;
  .f-button {
    top:-10px!important;
  }
}

/**編集画面で表示**/
html:not(.is-editor) {
  div[id^="internship_modal"] {
    display: none;
  }
}
#tinymce {
  div[id^="internship_modal"] {
    display: block!important;
  }
}

.internship_wrap {
  background: url(/dcms_media/image/internship-event-bg.jpg) repeat center center/auto;
  border-radius: 60px;
  position: relative;
  max-width: 1300px;
  margin:50px auto 0;
  padding:100px 60px 60px;
  .ftxt {
    background-color: #e89acf;
    color:#FFFFFF;
    font-size: min(4vw, 2.4rem);
    font-weight: 800;
    padding:.66em 1.2em;
    border-radius: .8em;
    position: absolute;
    left: 50%;
    top:-1em;
    transform: translateX(-50%);
    min-width: 15em;
    text-align: center;
    &::before {
      content:'';
      display: block;
      width: 2.4em;
      height: 1.1em;
      background-color: #e89acf;
      position: absolute;
      bottom:-1.0em;
      right: 4em;
      clip-path: polygon(50% 0,100% 0,0 100%);
    }
  }
  .titlewrap {
    display: grid;
    grid-template-columns: 25% 1fr;
    align-items: end;
    grid-column-gap: 3%;
    width: 90%;
    margin:0 auto 50px;
    & > img {
      position: relative;
      z-index: 0;
      transform: scale(1.2);
    }
    .title_inner {
      position: relative;
      z-index: 1;
      h2 {
        margin: 0;
        line-height: 1;
        &::before {
          content:none;
        }
      }
      .text {
        font-size: min(2.4vw, 1.5rem);
        line-height: 1.6;
      }
    }
  }
  .flow {
    display: flex;
    column-gap: 3%;
    margin-bottom: 60px;
    li {
      flex:1;
      background-color: #FFFFFF;
      border:1px solid #e89acf;
      border-radius: 20px;
      margin:0;
      padding:min(2.5vw,30px) min(1.8vw,20px);
      position: relative;
      &::before {
        content:none;
      }
      &:not(:last-child) {
        &::after {
          content:'';
          display: block;
          width: min(4vw,45px);
          height: 70px;
          background: url(/dcms_media/image/internship-arrow.png) no-repeat center center/contain;
          position: absolute;
          right: max(-3.5vw,-40px);
          top:50%;
          transform: translateY(-50%);
          z-index: 1;
        }
      }
      .img {
        display: block;
        position: relative;
        width: 80%;
        aspect-ratio: 1;
        display: grid;
        align-items: center;
        justify-content: center;
        border:1px solid #e89acf;
        border-radius: 50%;
        margin:0 auto;
        img {
          width: 60%;
          margin:0 auto;
        }
        .num {
          position: absolute;
          font-size: min(2.4vw, 1.8rem);
          background-color: #e89acf;
          line-height: 1.5;
          width: 1.5em;
          border-radius: 6px;
          color:#FFFFFF;
          text-align: center;
          font-weight: 600;
          top:0;
          left:-.5em;
        }
      }
      h3 {
        font-size: min(1.8vw, 1.4rem);
        color: #e89acf;
        text-align: center;
        line-height: 1.5;
        margin:1em 0;
        padding:0;
        border:none;
      }
      .text {
        font-size: min(1.6vw, 1rem);
        line-height: 1.66;
      }
    }
  }
  .infobox {
    max-width: 94%;
    margin:0 auto;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 30px 3%;
    margin-bottom: 90px;
    dl {
      font-size: clamp(.8rem,1.4vw, 1rem);
      display: grid;
      grid-template-columns: 8em 1fr;
      dt {
        font-size: 1.1em;
        font-weight: 600;
      }
      &:nth-child(-n+2){
        padding-bottom: 1.5em;
        border-bottom: 3px solid #000000;
      }
      dd {
        line-height: 1.5;
        .time {
          display: inline-block;
        }
      }
    }
  }
  .bnr {
    display: block;
    position: relative;
    img {
      display: block;
      border-radius: 40px;
      box-shadow: 3px 6px 20px rgba(0,0,0,.25);
    }
    .txtbox {
      display: grid;
      position: absolute;
      z-index: 1;
      top:50%;
      left: 35%;
      transform: translateY(-50%);
      color:#ffe600;
      font-size: min(2.5vw, 2rem);
      font-weight: 800;
      line-height: 1.2;
      text-align: left;
      .txt1 {
        font-size: 2em;
      }
      .txt2 {
        font-size: 2.5em;
      }
      .txt3 {
        color:#FFFFFF;
        margin-top: .5em;
      }
    }
  }
  &.internship2 {
    .ftxt {
      background-color: #006fbc;
      &::before {
        background-color: #006fbc;
      }
    }
    .flow {
      li {
        border:1px solid #006fbc;
        .img {
          border:1px solid #006fbc;
          .num {
            background-color: #006fbc;
          }
        }
        h3 {
          color: #006fbc;
        }
      }
    }
  }
  &.internship3 {
    .ftxt {
      background-color: #008816;
      &::before {
        background-color: #008816;
      }
    }
    .flow {
      column-gap: 2%;
      li {
        border:1px solid #008816;
        .img {
          border:1px solid #008816;
          .num {
            background-color: #008816;
          }
        }
        h3 {
          color: #008816;
        }
        &::after {
          width: min(3.0vw,35px);
          right: max(-2.5vw,-30px);
        }
      }
    }
  }
  &.internship4 {
    .ftxt {
      background-color: #e38827;
      &::before {
        background-color: #e38827;
      }
    }
    .flow {
      li {
        border:1px solid #e38827;
        .img {
          border:1px solid #e38827;
          .num {
            background-color: #e38827;
          }
        }
        h3 {
          color: #e38827;
        }
      }
    }
  }
}

@media (hover:hover) {

  #internship_content {
    #internship_event {
      .lib-card__item {
        .btn {
          &:hover {
            opacity: 1;
            background-color: var(--color_main);
            .txt {
              opacity: 1;
              text-decoration: none;
            }
          }
        }
      }
    }
    .bnr {
      img {
        transition:.3s;
      }
      &:hover {
        transform: scale(1.025);
        img {
          opacity: 1;
        }
      }
    }
  }

  .internship_wrap {
    .bnr {
      img {
        transition:.3s;
      }
      &:hover {
        transform: scale(1.025);
        img {
          opacity: 1;
        }
      }
    }
  }

}



@media screen and (max-width: 991px) {

.internship_wrap {
  padding:100px 30px 40px;
}

}


@media screen and (max-width: 768px) {

  /**internship**/

  #internship_mv {
    .obj {
      width: 18%;
      left: 36%;
    }
    .msg {
      font-size:3vw;
      right: 7%;
      bottom:14%;
      .txt {
        font-size: 3.8vw;
      }
      .txt2 {
        font-size: 3.8vw;
      }
    }
  }

  #internship_content {
    background: url(/dcms_media/image/internship-red-bg-sp.jpg) no-repeat center center/cover;
    width: 100vw;
    margin:0 -.75rem;
    .title_main {
      font-size:  5vw;
    }
    .body {
      font-size: 4vw;
      margin-bottom: 1.5em;
    }
    .info {
      margin:0 auto 1.5em;
      & > span {
        font-size: 5.4vw;
        &.info2 {
          font-size: 5vw;
        }
      }
    }
    .title_h3 {
      font-size: 7.5vw;
      margin-bottom: .5em;
    }
    #internship_event {
      .lib-grid__col {
        margin-bottom: 10vw;
        &.open {
          .lib-card__item {
            .btn {
              border-radius: 18px 0 14px 0;
            }
          }
        }
      }
      .opt {
        font-size: 4.2vw;
        .label {
          font-size: 6vw;
          margin-left: -1em;
          .month {
            font-size: .6em;
          }
        }
      }
      .lib-card__item {
        border-radius: 20px;
        .lib-card__caption {
          font-size: 4vw;
        }
        .lib-card__title {
          width: 60%;
          img {
            &.img {
              width: 60%;
              right: -50%;
              top:-20%;
            }
          }
        }
        .lib-card__txt {
          font-size: 4vw;
          margin-bottom: 1.5em;
        }
        .detail {
          width: 92%;
          border-radius: 10px 10px 0 10px;
          padding:3vw 3vw 4vw;
          dt {
            font-size: 4vw;
          }
          dd {
            font-size: 6vw;
          }
        }
        .btn {
          font-size: 4vw;
          border-radius: 18px 0;
        }
      }
    }
    .bnr {
      img {
        display: block;
        border-radius: 3.6vw;
      }
      .txtbox {
        font-size: 3vw;
        left: 28%;
        grid-row-gap: .33em;
      }
    }
  }

  .fancybox__slide.has-html {
    padding:8px 4px!important;
  }

  .internship_wrap {
    border-radius: 20px;
    margin:5vw auto 0;
    padding:30px 20px 30px;
    .ftxt {
      font-size: 5vw;
      border-radius: .5em;
    }
    .titlewrap {
      grid-template-columns: 1fr;
      width: 100%;
      margin:0 auto 3vw;
      & > img {
        transform: scale(1);
        width: 45%;
        margin:0 auto 3vw;
      }
      .title_inner {
        .text {
          font-size: 4vw;
        }
      }
    }
    .flow {
      display: grid;
      grid-row-gap: 5vw;
      margin-bottom: 10vw;
      li {
        border-radius: 15px;
        padding:3vw;
        display: grid;
        grid-template-columns: 33% 1fr;
        align-items: center;
        align-content: center;
        grid-column-gap: 3%;
        &:not(:last-child) {
          &::after {
            width: 8vw;
            height: 10vw;
            right: auto;
            left: calc(50% - 3vw);
            top:auto;
            bottom:-7vw;
            transform: translate(0,0) rotate(90deg);
          }
        }
        .img {
          grid-area: 1/1/3/2;
          .num {
            font-size: 4vw;
            border-radius: .3em;
          }
        }
        h3 {
          font-size: 4.5vw;
          text-align: left;
          margin:0 0 .2em;
        }
        .text {
          font-size: 3.8vw;
          line-height: 1.66;
          margin-top: 0;
        }
      }
    }
    .infobox {
      grid-template-columns: 1fr;
      margin-bottom: 10vw;
      grid-row-gap: 7vw;
      dl {
        font-size: 3.6vw;
        display: grid;
        grid-template-columns: 8em 1fr;
        &:nth-child(-n+2){
          padding-bottom: 7vw;
          border-bottom: 2px solid #000000;
        }
        &:nth-child(3) {
          order:2;
        }
        &:nth-child(4) {
          padding-bottom: 7vw;
          border-bottom: 2px solid #000000;
        }
      }
    }
    .bnr {
      img {
        display: block;
        border-radius: 3.6vw;
      }
      .txtbox {
        font-size: 3vw;
        left: 28%;
        grid-row-gap: .33em;
      }
    }
    &.internship3 {
      .ftxt {
        background-color: #008816;
        &::before {
          background-color: #008816;
        }
      }
      .flow {
        li {
          &::after {
            width: 8vw;
            height: 10vw;
          }
        }
      }
    }
  }

}