@charset "UTF-8";
@media screen and (min-width: 1025px) {
  .header-nav-menu {
    display: none;
  }
}
@media screen and (max-width: 1024px) {
  .br {
    display: none
  }
  .ham-wrapper {
    width: 24px;
    height: 100%;
    right: 0;
    position: absolute;
    top: 12px;
    cursor: pointer;
  }
  .ham-icon,
  .ham-icon::before,
  .ham-icon::after {
    border-radius: 8px;
    background-color: #222;
    width: 24px;
    height: 2px;
    right: 0;
    z-index: 9999;
  }
  .ham-icon {
    position: relative;
    top: 15px;
    transition: background 0.3s ease;
  }
  .ham-icon::before,
  .ham-icon::after {
    content: "";
    display: block;
    position: absolute;
  }
  .ham-icon::before {
    top: 6px;
  }
  .ham-icon::after {
    top: -6px;
  }
  .ham-wrapper.active .ham-icon {
    background-color: rgba(0, 0, 0, 0);
  }
  .ham-wrapper.active .ham-icon::before,
  .ham-wrapper.active .ham-icon::after {
    top: 0;
  }
  .ham-wrapper.active .ham-icon::before {
    transform: rotate(45deg);
  }
  .ham-wrapper.active .ham-icon::after {
    transform: rotate(-45deg);
  }
  .ham-icon::before,
  .ham-icon::after {
    transition: top 0.3s ease, transform 0.3s ease;
  }
  .header-nav-menu {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 51;
    width: 100%;
    transform: translateY(-100%);
    background-color: #fff;
    transition: transform ease 0.4s;
  }
  .header-nav-menu.active {
    transform: translateY(0);
  }
  .nav-menu-list {
    padding: 54px 16px 48px 16px;
  }
  .nav-menu-item {
    border-bottom: 1px solid #ebebeb;
  }
  .nav-menu-item a {
    position: relative;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    display: block;
    padding: 17px 0;
  }
  .nav-menu-item a::before {
    content: url(./img/arrow_menu_right.svg);
    position: absolute;
    right: 0;
  }
  /* 背景 */
  .ham-bg {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    content: "";
    width: 100vw;
    height: 100vh;
    z-index: 50;
    background: rgba(0, 0, 0, 0.6);
  }
  .ham-bg.active {
    display: block;
  }
  /* --------------------------ヘッダー-------------------------------------------- */
  .l-header {
    position: fixed;
    width: 100%;
    height: 54px;
    padding: 0 16px;
  }
  .header-inner {
    height: 100%;
  }
  .header-inner h1 {
    display: grid;
    place-items: center;
    max-width: 212px;
    width: 100%;
  }
  .nav-list {
    display: none;
  }
  .sp-header {
    display: grid;
    place-content: center;
  }
  /* --------------------------ファーストビュー-------------------------------------------- */
  .fv-mask {
    padding-top: 54px;
  }
  .fv-bg {
    height: auto;
  }
  .slider {
    margin: 0 16px;
  }
  .slick-list {
    overflow: hidden;
    border-radius: 20px;
    height: auto;
  }

  .slide-wrap {
    overflow: inherit;
  }
  .slide-wrap img {
    opacity: 0;
  }
  .slide-wrap:before {
    top: 0;
    left: 0;
    width: 100%;
    filter: blur(0);
    background-size: 102%;
  }

  .slide-wrap img {
    height: auto;
  }

  .slick-dots {
    bottom: 6px;
  }
  .slick-dots li {
    width: 8px;
  }
  .slick-dots li.slick-active button::before {
    opacity: 1;
    color: #fff;
  }
  .slick-dots li button::before {
    color: #aaaaaa;
    opacity: 1;
    font-size: 6px;
  }
  /* --------------------------おしらせ-------------------------------------------- */
  .news-wrap {
    margin: 40px auto 0 auto;
    padding: 24px 16px 24px;
  }
  .news-inner {
    flex-direction: column;
  }
  .news-section-title {
    font-size: 20px;
    margin: 0 0 22px 0;
  }
  .news-list a {
    /* display: flex; */
  }
  .news-time {
    margin: 0 10px 0 0;
    display: block;
  }
  /* --------------------------かんがえ-------------------------------------------- */
  .primary-bg {
    position: relative;
    padding: 0 16px;
    background-size: 216%;
    background-position: 70% 38%;
  }
  .primary-bg:before {
    top: 20px;
    left: 16px;
  }
  .primary-bg:after {
    top: 72.07px;
    width: 14vw;
    height: 10.162vw;
  }
  .primary-contents {
    display: flex;
    flex-direction: column-reverse;
    padding: 0 0 100px 0;
  }
  .primary-contents p {
    font-size: 16px;
  }
  .youtube-frame {
    margin: 0 0 24px 0;
    height: 164.85px;
    border-radius: 16px;
  }
  .youtube {
    border-radius: 32px;
    padding: 15.7px;
  }
  .section-title {
    font-size: 28px;
  }
  .section-title-wrap img {
    width: 94px;
  }
  /* --------------------------けんきゅう-------------------------------------------- */
  .secondary-bg {
    background-size: 68.27%;
    background-position: right 70px;
  }
  .secondary-bg::before {
    width: 84px;
    height: 47px;
    top: -24px;
    left: 8px;
  }
  .secondary-bg::after {
    width: 38px;
    height: 34px;
    top: -76px;
    right: 16px;
  }
  .secondary-contents {
    grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
    -moz-column-gap: 17px;
         column-gap: 17px;
    row-gap: 16px;
    margin: 24px 0 0 0;
  }
  .secondary-column {
    padding: 12px 12px 0;
  }
  .secondary-column p {
    font-size: 16px;
    letter-spacing: 0
  }
  .secondary-column img {
    height: 34.934vw;
  }
  .youtube-contents {
    flex-direction: column;
    margin: 32px 0 16px 0;
  }
  .youtube-white-frame {
    height: 52.8vw;
    max-width: none;
    max-height: none;
    padding: 16px;
    border-radius: 16px;
  }
  .youtube-secondary {
    border-radius: 8px;
  }
  .youtube-contents-title {
    padding: 16px 0;
    text-align: center;
  }
  .youtube-contents-txt {
    font-size: 14px;
    padding: 0 0 16px 0;
  }
  .youtube-btn {
    width: 210px;
    font-size: 16px;
    padding: 10px 0 10px 24px;
  }
  .arrow-right {
    width: 18px;
    margin: 0 12px 0 16px;
  }
  .modal-content {
    flex-direction: column;
    place-content: center;
    place-items: center;
    padding: 52px 16px 32px 16px;
  }
  .modal-content img {
    width: 100%;
    height: 39.841vw;
    min-height: 200px;
    border-radius: 16px;
  }
  .modal-close {
    top: 19px;
    right: 21px;
  }
  .modal-txt-contents {
    display: grid;
    place-content: center;
    width: 100%;
    padding: 16px 0 0 0;
  }
  .modal-txt-contents h2 {
    display: block;
    font-size: 18px;
    text-align: left;
  }
  .modal-txt-contents h2 p {
    font-size: 14px;
    padding: 16px 0 32px 0;
    line-height: 18.9px;
  }
  .modal-txt-contents button {
    max-width: 236px;
    margin: auto;
    padding: 10px 12px 10px 24px;
    font-size: 16px;
  }
  .modal-txt-contents button .modal-arrow {
    padding: 0 0px 0 16px;
  }
  /* --------------------------かつどう-------------------------------------------- */
  .third-bg {
    background-position: center top;
    background-size: 240%;
  }
  .third-bg::before {
    width: 51px;
    height: 44px;
    top: 26px;
    left: 16px;
  }
  .third-bg::after {
    width: 58px;
    height: 63px;
    top: -40px;
    right: 16px;
  }
  .third-wrap {
    padding: 0 16px;
  }
  .third-title-wrap {
    padding: 100px 0 24px 0;
  }
  .third-contents {
    padding: 16px 16px 0 16px;
    border-radius: 16px;
  }
  .third-contents h2 {
    font-size: 16px;
    padding: 12px 0;
  }
  .third-contents img {
    border-radius: 8px;
  }
  .third-contents-wrap {
    gap: 24px;
    padding: 0 0 100px 0;
  }
  /* --------------------------すたっふ-------------------------------------------- */
  .forth-wrap {
    position: relative;
  }

  .forth-wrap::before {
    top: -50px;
    left: 16px;
    width: 98px;
    height: 71px;
  }
  .forth-wrap::after {
    top: -60px;
    right: 16px;
    width: 63px;
    height: 45px;
  }
  .forth-title-wrap {
    padding: 0 0 24px 0;
  }
  .forth-contents-wrap {
    grid-template-columns: repeat(auto-fit, minmax(31.22%, 1fr));
    -moz-column-gap: 16px;
         column-gap: 16px;
    row-gap: 48px;
  }
  .modal-staff-container {
    max-width: none;
  }
  .modal-staff-txt {
    max-width: none;
    display: grid;
    place-content: center;
    place-items: center;
  }
  .modal-staff-txt h2 {
    padding: 0 0 8px 0;
  }
  .modal-staff-txt h3 {
    padding: 24px 0 12px 0;
  }
  img.staff-img {
    width: 163px;
    height: 163px;
  }
  img.dashed-modal {
    width: 114px;
    height: auto;
  }
  /* --------------------------フッター-------------------------------------------- */
  .footer-bg {
    height: 58.667vw;
    background-position: center;
  }
  .footer-column {
    margin: 0 0 6.83168vw 0;
  }
  .footer-column h3 {
    font-size: 28px;
    padding: 0 0 11px 0;
  }
  .footer-column a {
    font-size: 16px;
  }
  .footer-title-pi {
    width: 94px
  }
  
  .slide-wrap-01::before{
    background-image: url('/img/first_view_05.jpg');
  }
  .slide-wrap-02::before{
    background-image: url('/img/first_view_02.jpg');
  }
  .slide-wrap-03::before{
    background-image: url('/img/first_view_01.jpg');
  }
  .slide-wrap-04::before{
    background-image: url('/img/first_view_04.jpg');
  }
  .slide-wrap-05::before{
    background-image: url('/img/first_view_03.jpg');
  }
  .slide-wrap-06::before{
    background-image: url('/img/first_view_06.jpg');
  }
}
@media screen and (max-width: 1024px) and (min-width: 680px) and (max-width: 1024px) {
  .forth-wrap {
    padding: 100px 16px;
  }
  .wave-wrap {
    position: relative;
    background: #f5f5f5;
    height: 150px;
  }
  .wave {
    position: absolute;
    height: 150px;
    width: 100%;
    background: #fff;
    bottom: 0;
  }
  .wave::before, .wave::after {
    content: "";
    display: block;
    position: absolute;
    border-radius: 100% 50%;
  }
  .wave::before {
    width: 100%;
    height: 90%;
    background-color: #fff;
    top: 60%;
  }
  .wave::after {
    width: 55%;
    height: 100%;
    background-color: #fff;
    left: -1.5%;
    top: 40%;
  }
}/*# sourceMappingURL=responsive.css.map */