@charset "utf-8";

body {
    color: #0c0c0c;
}
.scroll-fade.effect {
    transition: all 0.8s ease;
    opacity: 1;
    transform: translateY(0);
}
.scroll-fade {
    opacity: 0;
    transform: translateY(50px);
}
.pc {
    display: block;
}
.sp {
    display: none;
}
.bg-g {
    background: #f7f7f7;
}
.bg-b {
    background: #1e3659;
}
.inner {
    max-width: 1000px;
    width: 90%;
    margin: auto;
}
.max-inner {
    width: 96%;
    margin: auto;
}
.area-title {
    font-size: min(2.4vw, 24px);
    font-weight: 500;
}
.flex-c {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.btn-box {
    padding: 3%;
    margin: auto;
    text-align: center;
}
.btn-box a {
    background: #fff;
    border: 1px solid #0c0c0c;
    border-radius: 100px;
    color: #0c0c0c;
    width: min(96%,410px);
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 26px;
    font-size: min(2vw,18px);
    transition: ease .6s;
}
.btn-box a:hover {
    background: #0c0c0c;
    color: #fff;
}
.bbg-b a {
    background: #1e3659;
    border: 1px solid #1e3659;
    color: #fff;
}
.bbg-b a:hover {
    background: #fff;
    color: #1e3659;
}
@media (max-width: 769px) {
    .pc {
        display: none;
    }
    .sp {
        display: block;
    }
    .flex-c {
        display: block;
    }
    .area-title {
        font-size: min(4.4vw, 24px);
        font-weight: bold;
    }
    .btn-box a {
        font-size: min(4vw, 18px);
    }
}

/*********** slide ***********/
.bg-fixd {
    background: #0c0c0c;
    height: calc(100lvh - 56px);
    position: fixed;
    width: 100%;
}
.main .bx-wrapper {
    background-color: transparent;
    margin: 0px auto;
    border: none;
    box-shadow: none;
}
.main .bx-wrapper li {
    height: 94lvh;
}
.main .bx-wrapper img,
.main .bx-wrapper video {
    display: block;
    width: 100%;
}
.main .bx-wrapper video,
.main .bx-wrapper .video-box img {
    object-fit: cover;
    height: 94lvh;
}
.video-box {
    position: relative;
}
.video-box a {
    position: absolute;
    display: block;
    width: 100%;
    z-index: 1;
}
.video-box::after {
    content: "";
    background: rgb(0 0 0 / 40%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.main .bx-wrapper video {
    filter: grayscale(50%) blur(0.5px);
}
.main_thumbnail {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style: none;
    margin-top: -7.5%;
    padding-left: 2%;
}
.main_thumbnail > li {
    width: calc(100% / 10);
}
.main_thumbnail > li > a {
    display: block;
    position: relative;
    padding-top: 75%;
}
.main_thumbnail > li > a > img {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100%;
    max-height: 100%;
    border: 1px solid #000;
}
.main_thumbnail > li > a.active img {
    border: 1px solid #fff;
}
.main .bx-wrapper .img-box .pc {
    display: block !important;
}
.main .bx-wrapper .img-box .sp {
    display: none !important;
}
@media (max-width: 769px) {
    .bg-fixd {
        height: calc(100lvh - 56px);
    }
    .main .bx-wrapper li {
        height: 80vh;
    }
    .main .bx-wrapper video,
    .main .bx-wrapper .video-box img {
        height: 80vh;
    }
    .main_thumbnail {
        margin-top: -18.5%;
    }
    .main_thumbnail > li {
        width: calc(100% / 4);
    }
    .main .bx-wrapper .img-box .pc {
        display: none !important;
    }
    .main .bx-wrapper .img-box .sp {
        display: block !important;
    }
}

/*********** main-fixd ***********/
.main-fixd {
    position: relative;
    margin-top: calc(100lvh - 56px);
}
@media (max-width: 769px) {
    .main-fixd {
        position: relative;
        margin-top: calc(100lvh - 56px);
    }
}

/*********** tw-about ***********/
.tw-about {
    background-image: url(../img/bg_tw.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 16% 0;
    color: #fff;
    position: relative;
}
.tw-about::after {
    content: "";
    display: block;
    background: rgb(0 0 0 / 25%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.tw-about .inner {
    position: relative;
    z-index: 1;
}
.tw-about .logo_tw {
    width: min(70%,453px);
    margin: auto;
    filter: drop-shadow(0px 0px 5px rgb(0 0 0 / 80%));
}
.tw-about .about_text {
    text-align: center;
    font-size: min(20px, 3vw);
    font-weight: bold;
    line-height: 2.8rem;
    text-shadow: 0 0 6px rgb(0 0 0 / 80%);
}
@media (max-width: 769px) {
    .tw-about .about_text {
        font-size: min(18px, 5vw);
        line-height: 2;
        text-align: justify;
        width: 90%;
        margin: 5% auto 0;
    }
}

/**** youtube ****/
.youtube-area .max-inner {
    padding: 4% 0;
}
.youtube-area .youtube_list {
    width: 100%;
}
.youtube_list .area-title {
    color: #fff;
    margin-bottom: 3vw;
    font-size: min(4vw, 50px);
}
.youtube_list .youtube-box {
    display: flex;
    flex-wrap: wrap;
    width: 46%;
}
.youtube_list .pickup-movie {
    width: 40%;
    margin-right: 12px;
}
.pickup-movie .youtube-movie {
    width: 100%;
    line-height: 1.6;
}
.youtube_list.youtube_list_01 .youtube-box {
    width: 100%;
}
.youtube_list .movie-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.youtube_list.youtube_list_01 .pickup-movie {
    width: 100%;
    margin-right: 0;
}
.youtube_list_01 .pickup-movie .youtube-movie {
    width: 24.7%;
    margin-right: 0.2%;
}
.youtube_list_01 .pickup-movie .youtube-movie:nth-of-type(4n) {
    margin-right: 0;
}


.pickup-movie .movie-title {
    color: #fff;
    font-size: min(2.8vw,18px);
    letter-spacing: 2px;
    margin-top: 6px;
}
.pickup-movie .youtube-movie .icon-title {
    font-size: 16px;
    top: 10px;
    left: 10px;
}
.pickup-movie .youtube-movie .play_btn {
    /* width: min(76px, 6vw); */
    width: min(50px, 4vw);
}
.youtube-movie {
    margin: 2px 2px 2%;
    width: calc(100% / 4 - 4px);
}
.youtube-movie a {
    display: block;
    transition: all 0.3s;
    line-height: 0;
    position: relative;
}
.youtube-movie .icon-title {
    display: block;
    position: absolute;
    top: 7px;
    left: 7px;
    z-index: 1;
    border: 1px solid #ba996b;
    background: #ba996b;
    border-radius: 100px;
    color: #ffffff;
    padding: 1px 10px;
    line-height: 1.2;
    font-size: 13px;
}
.youtube-movie .icon-title.imp {
    border: 1px solid #09579d;
    background: #09579d;
}
.youtube-movie .thumb_img {
    width: 100%;
    height: auto;
    max-width: 100%;
    position: relative;
    border-radius: 10px;
}
.youtube-movie .play_btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* width: min(50px,5vw); */
    width: min(35px, 3vw);
}
.youtube-box .movie-title {
    color: #fff;
    font-size: min(1.4vw, 14px);
    letter-spacing: 2px;
    margin-top: 3px;
    margin-left: 3px;
    line-height: 1.6;
}
.youtube-movie.comming a {
    pointer-events: none;
}
.youtube-movie.comming .play_btn {
    display: none;
}
@media (max-width: 769px) {
    .youtube-area .max-inner {
        padding: 11% 4% 9%;
    }
    .youtube_list .area-title {
        margin-bottom: 5vw;
        font-size: min(8vw, 50px);
    }
    .youtube_list .movie-box {
        display: block;
    }
    .youtube_list .pickup-movie {
        width: 100%;
        margin: 0 0 12px;
    }
    .pickup-movie .movie-title {
        font-size: min(3.4vw, 18px);
    }
    .pickup-movie .youtube-movie .play_btn {
        width: min(76px, 14vw);
    }
    .youtube_list .pickup-movie .youtube-box {
        flex-wrap: wrap;
        /* justify-content: center; */
        width: 100%;
    }
    .youtube-movie {
        margin: 2px 4px 6px;
        width: calc(100% / 2 - 8px);
    }
    .youtube-movie .thumb_img {
        border-radius: 5px;
    }
    .youtube-movie .play_btn {
        width: min(66px, 10vw);
    }
    .youtube-movie .icon-title {
        font-size: 9px;
        top: 5px;
        left: 5px;
    }
    .youtube-box .movie-title {
        font-size: min(2.8vw, 14px);
    }
    /*.youtube-movie.comming {
        display: none;
    }*/
    .youtube_list_01 .pickup-movie .youtube-movie {
        width: 32%;
    }
    .pickup-movie .youtube-movie .play_btn {
        /* width: min(76px, 6vw); */
        width: min(50px, 10vw);
    }
    .pickup-movie .youtube-movie.youtube-movie_sp_l .play_btn {
        /* width: min(76px, 6vw); */
        width: min(50px, 10vw);
    }
}

/**** impression ****/
.impression {
    padding: 6% 0 0;
}
.impression .max-inner {
    background: #fff;
    border-radius: 30px;
    padding: 40px;
    display: flex;
    align-items: center;
}
.impression_02 .max-inner {
    display: block;
}
.impression .area-title {
    text-align: center;
    font-size: min(4vw, 50px);
    color: #0c0c0c;
    margin-bottom: 0;
}
.youtube_btn {
    width: 34%;
    margin-right: 4%;
}
.youtube_btn a {
    display: block;
    width: min(84%,302px);
    margin: auto;
    transition: ease .6s;
}
#impression .short-box {
    margin: 0;
    width: 46%;
    margin-left: 0;
    margin-right: -4px;
}
.short-box ul {
    margin-bottom: 10px;
}
.youtube-short {
    /*width: calc(100% / 4 - 6px);*/
    aspect-ratio: 9 / 18;;
    margin: 0 3px;
    line-height: 0;
}
.youtube-short a {
    transition: all 0.4s;
    position: relative;
    display: block;
}
.youtube-short a::after {
    content: "";
    position: absolute;
    background: rgb(0 0 0 / 20%);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.youtube-short .sthumb_img {
    object-fit: cover;
    aspect-ratio: 9 / 18;
    border-radius: 10px;
    border: 1px solid #0c0c0c;
}
.youtube-short .short_btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(76px,6vw);
    z-index: 1;
}
.modal-video-movie-wrap.modal-video-short-wrap {
    width: 352px;
    height: 75%;
}
.modal-video-short-wrap button {
    position: absolute;
    z-index: 2;
    top: -45px;
    right: 0;
    display: inline-block;
    width: 35px;
    height: 35px;
    overflow: hidden;
    border: none;
    background: transparent;
}
.impression_midasi_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2vw;
}
#impression .youtube_list_02 .youtube-box {
    width: 100%;
}
#impression .youtube_list_02 .youtube-box .youtube-movie {
    margin: 0 6px 6px 0;
    width: calc(100% / 4 - 6px);
}
#impression .youtube_link {
    max-width: 220px;
    width: 25%;
    line-height: 1;
}
#impression .youtube_link_02 {
    display: none;
}
.impression_movie_wrap {
    width: 53%;
    margin-bottom: 0;
}
.impression_movie_wrap .youtube-box {
    display: flex;
    flex-wrap: wrap;
    margin-top: 1.7%;
}
.impression_movie {
    margin: 0 0 2%;
    width: 32%;
}
.impression_movie_wrap_wrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#impression .youtube_list_03 .youtube-box {
    width: 100%;
}
.youtube_list_03 .youtube-movie .impression_movie {
    margin: 0 6px 6px 0;
    width: calc(100% / 3 - 4px);
}
.youtube_list_03 .youtube-movie .impression_movie:nth-of-type(3n) {
    margin-right: 0;
}
@media (orientation: landscape) {
    .modal-video-short-wrap button {
        top:0;
        right: -45px
    }
}
.modal-video-short-wrap button:before {
    transform: rotate(45deg)
}
.modal-video-short-wrap button:after {
    transform: rotate(-45deg)
}
.modal-video-short-wrap button:before,.modal-video-short-wrap button:after {
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    top: 50%;
    left: 0;
    margin-top: -1px;
    background: #fff;
    border-radius: 5px;
    margin-top: -6px
}
.modal-video-short-wrap iframe {
    aspect-ratio: 9 / 18;
    width: 100%;
    height: 100%;
}
.impression .swiper-button-prev,
.impression .swiper-button-next {
    height: 48px;
    width: 48px;
}
.impression .swiper-button-prev::after,
.impression .swiper-button-next::after {
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: 48px;
    margin: auto;
    width: 48px;
}
.impression .swiper-button-prev::after {
  background-image: url(../img/movie/arrow-left.png);
}
.impression .swiper-button-next::after {
  background-image: url(../img/movie/arrow-right.png);
}
.impression .swiper-pagination-bullet-active {
    background: #0c0c0c;
}
.youtube_list_02 .pickup-movie .youtube-movie .play_btn,.youtube_list_03 .youtube-movie.impression_movie_wrap > a .play_btn {
    width: min(60px, 5.2vw);
}

@media (max-width: 769px) {
    .impression {
        padding: 10% 0 0;
    }
    .impression .area-title {
        font-size: min(8vw, 50px);
    }
    .impression .max-inner {
        flex-direction: column-reverse;
        padding: 8% 5%;
    }
    .short-box {
        width: 90%;
    }
    .youtube-short .short_btn {
        width: min(76px, 12vw);
    }
    .modal-video-movie-wrap.modal-video-short-wrap {
        width: 84%;
        height: 570px;
    }
    .impression .swiper-button-prev,
    .impression .swiper-button-next {
        height: 35px;
        width: 35px;
    }
    .youtube_btn {
        width: 86%;
        margin: 3% auto;
    }
    #impression .youtube_list .youtube-box {
        width: 100%;
        margin-top: max(2%, 10px);
    }
    .impression_movie {
        margin: 0 0 2%;
        width: 49%;
    }
    .impression_movie_wrap {
        width: 100%;
    }
    #impression .short-box {
        width: 100%;
        margin-top: max(2%, 7px);
    }
    #impression .youtube_link {
        display: none;
    }
    .youtube_list_01 .pickup-movie .youtube-movie {
        margin: 2px 2px 0px;
        width: calc(100% / 2 - 4px);
    }
    .youtube_list_01 .pickup-movie .youtube-movie_sp_l {
        /*width: 100%;*/
        margin-bottom: 8px;
    }
    .impression_movie {
        width: 49%;
    }
    .youtube_list_03 .youtube-movie .impression_movie {
        margin: 0 6px 6px 0;
        width: calc(100% / 2 - 3px);
    }
    .youtube_list_03 .youtube-movie .impression_movie:nth-of-type(3n) {
        margin-right: 6px;
    }
    .youtube_list_03 .youtube-movie .impression_movie:nth-of-type(2n) {
        margin-right: 0;
    }
    #impression .youtube_link_02 {
        display: block;
        max-width: 330px;
        width: 60%;
        margin: 20px auto 0;
    }
    .impression_midasi_wrap {
        margin-bottom: 5vw;
    }
    #impression .youtube_list_02 .pickup-movie {
        margin: 0;
    }
    #impression .youtube_list_02 .pickup-movie .youtube-movie:first-of-type {
        margin: 0;
    }
    #impression .youtube_list_02 .youtube-box .youtube-movie {
        width: calc(100% / 2 - 6px);
    }
    #impression .youtube_list_02 .youtube_link_02 {
        margin: 7% auto 0;
    }
    .youtube_list_02 .pickup-movie .youtube-movie .play_btn, .youtube_list_03 .youtube-movie.impression_movie_wrap > a .play_btn {
        width: min(50px, 13vw);

    }
}

/**** tw767 ****/
.tw767 .info {
    position: relative;
}
.link_cover {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}
.info .logo {
    width: min(80%, 254px);
    margin-bottom: 10px;
}
.info .catch {
    font-size: min(3.4vw, 34px);
    line-height: 1.6;
}
.info .copy {
    font-size: min(2.6vw,26px);
    line-height: 1.6;
}
.info .body {
    font-size: min(1.6vw,16px);
    margin-bottom: 2em;
}
.info .btn {
    width: min(100%,410px);
    background: #1e3659;
    border: 1px solid #1e3659;
    border-radius: 100px;
    color: #fff;
    padding: 14px 26px;
    font-size: min(2vw,20px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: ease .6s;
}
.tw767 .img {
    overflow: hidden;
    border-radius: 15px;
    width: 100%;
    line-height: 0;
}
.tw767 .img img {
    border-radius: 15px;
    transition: ease .6s;
}
.info:hover .img img,
.tw767_top .inner:hover .img img {
    transform:scale(1.05);
}
.info:hover .btn,
.tw767_top .inner:hover .btn {
    background: #fff;
    color: #1e3659;
}

.tw767_top {
    border-bottom: 1px solid #0c0c0c;
    padding-bottom: 4rem;
    padding-top: 7em;/*inmp*/
}
.tw767_top .inner {
    position: relative;
}
.tw767_top .info {
    width: 44%;
    margin-right: 6%;
}
.tw767_top .catch {
    margin-bottom: 10px;
}
.tw767_top .copy {
    margin-bottom: 20px;
}
.tw767_top .img {
    width: min(50%, 542px);
}

.tw767_club {
    align-items: stretch;
}
.tw767_club .info {
    width: 50%;
    padding: 5% 0 10%;
    display: flex;
    flex-direction: column;
}
.tw767_club .club_dr {
    border-right: 1px solid #0c0c0c;
    padding-right: 5%;
}
.tw767_club .club_iron {
    padding-left: 5%;
}
.tw767_club .img {
    margin-bottom: 3%;
}
.tw767_club .btn {
    margin-top: auto;
}
.tw767_club .copy {
    margin-bottom: 4%;
    font-size: min(2vw, 20px);
}
@media (max-width: 769px) {
    .tw767 {
        padding-bottom: 5em;
    }
    .info .catch {
        font-size: min(7vw, 34px);
    }
    .info .copy {
        font-size: min(5vw, 26px);
    }
    .info .body {
        font-size: min(3.4vw,16px);
    }
    .info .btn {
        font-size: min(3.8vw, 20px);
    }

    .tw767_top {
        padding-bottom: 2rem;
    }
    .tw767_top .inner {
        display: flex;
        flex-direction: column-reverse;
    }
    .tw767_top .info {
        width: 90%;
        margin: 6% auto 0;
    }
    .tw767_top .img {
        width: 90%;
    }
    .info .logo {
        width: min(50%, 254px);
    }

    .tw767_club .info {
        width: 90%;
        padding: 2em 0 0;
        margin: auto;
    }
    .tw767_club .club_dr {
        border-right: none;
        padding-right: 0;
    }
    .tw767_club .club_iron {
        padding-left: 0;
    }
    .tw767_club .img {
        width: 100%;
    }
    .tw767_club .img img {
        object-fit: cover;
        width: 100%;
        height: 130px;
    }
}