@charset "UTF-8";

body {
    opacity: .01;
    animation: bodyAppear .3s .3s forwards;
}

@keyframes bodyAppear {
    0% {
        opacity: .01;
    }

    100% {
        opacity: 1;
    }
}

.visually-hidden {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
@media screen and (min-width:768px) {}

@media screen and (min-width:1025px) {}

/*============================
	kv 
============================*/

.kv {
    margin-top: 60px;
}

.kv__item {
    position: relative;
}

.kv__copy {
    position: absolute;
    display: block;
    max-width: 730px;
    width: calc((730/960)*110%);
    z-index: 99;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.kv__item:nth-child(2) {
    .kv__copy {
        max-width: 815px;
        width: calc((815/960)*110%);
    }
}

.kv__copy .slide-in,
.kv__copy .slide-in_inner {
    animation-duration: 1s;
    animation-delay: .3s;
}


.kv__scroll {
    max-width: 123px;
    min-width: 60px;
    width: calc((123/1920)*100%);
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%);
    z-index: 9;
}



@keyframes copyAnime {
    0% {

        transform: rotate(0);
    }

    5% {
        transform: rotate(-3deg);
    }

    10% {

        transform: rotate(0);
    }

    15% {

        transform: rotate(-3deg);
    }

    20% {

        transform: rotate(0);
    }


    100% {
        transform: rotate(0);
    }
}


/* swiper */
.kv__swiper-area {
    position: relative;
}

.swiper__imgwrap {
    overflow: hidden;
    display: block;
}

.kv .swiper-slide-active .swiper__imgwrap img,
.kv .swiper-slide-duplicate-active .swiper__imgwrap img,
.kv .swiper-slide-prev .swiper__imgwrap img {
    animation: zoom-out 10s linear 0s 1 normal both;
}

@keyframes zoom-out {
    0% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}


.kv .swiper-pagination {
    left: 5%;
    bottom: -30px;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
}


.kv .swiper-pagination-bullet {
    display: block;
    background: none;
    font-size: 1.2rem;
    margin: 0 5px !important;
    color: #897d44;
    opacity: 1;
    width: 30px;
    text-align: left;
    line-height: 1;
    transition: .3s ease-out;
    position: relative;
    opacity: .5;

    &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        background-color: #897d44;
        bottom: -.5em;
        left: 0;
    }

    & span {
        position: absolute;
        bottom: 0;
        left: 0;
        line-height: 1;
        transition: .3s;
    }
}

.kv .swiper-pagination-bullet-active {
    opacity: 1;

    & span {
        font-size: 1.8rem;
    }
}



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

    .kv {
        margin-top: 60px;
    }

    .kv__item {
        width: 50%;
    }

    .kv__img img {
        width: 100%;
    }

    .kv__copy {
        width: calc((730/960)*100%);
        top: 70%;
        left: 50%;
    }

    .kv__item:nth-child(2) {
        .kv__copy {
            width: calc((815/960)*100%);
        }
    }


}


@media screen and (min-width:1025px) {

    .kv {
        margin-top: 120px;
    }

    .kv__item {
        width: 50%;
    }

    .kv__copy {
        width: calc((730/960)*100%);
        top: 70%;
        left: 50%;
    }

    .kv__item:nth-child(2) {
        .kv__copy {
            width: calc((815/960)*100%);
        }
    }

}

/*============================
   concept
============================*/
.concept {
    padding: 60px 0;
}

.conc__ttl {
    .font-en {
        font-size: 6rem;
        color: #fff;
    }

    .txt {
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.conc__left {
    margin-bottom: 30px;
}

@media screen and (min-width:768px) {
    .concept {
        padding: 80px 0;
    }

    .conc__ttl {
        .font-en {
            font-size: 8rem;
        }

        .txt {

            top: 60%;
        }
    }

    .conc__left {
        margin-bottom: 0;
        width: 50%;
    }

    .conc__img {
        width: 47%;
    }
}

@media screen and (min-width:1025px) {
    .concept {
        padding: 120px 0;
    }

    .conc__ttl {
        .font-en {
            font-size: 14rem;
        }

        .txt {

            top: 60%;
        }
    }

    .conc__left {
        width: 50%;
    }

    .conc__img {
        width: 48%;
    }
}

/*============================
   movie
============================*/
.movie {
    padding: 80px 0 60px;
    background: url(../images/movie_bg.png) no-repeat center center/cover;
}

.mov__ttl {
    color: #fff;

    .txt {
        margin-top: .5em;
    }

    .font-en.-bd::before {
        background: #fff;
        left: 50%;
        transform: translate(-50%);
    }
}

.mov__mov video {
    width: 100%;

}

@media screen and (min-width:768px) {
    .movie {
        padding: 120px 0 80px;
    }

}

@media screen and (min-width:1025px) {
    .movie {
        padding: 150px 0 120px;
    }

}


/*============================
   recommend
============================*/

.recommend {
    padding: 60px 0 0;
}

.recom__flex {
    display: flex;
    flex-direction: column-reverse;
}

.recom__ttl {
    margin-bottom: 30px;

    .txt {
        margin-top: .5em;
    }
}

.recom__left {
    padding: 30px 5%;

    &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: calc(100% + 50px);
        left: 0;
        bottom: 0;
        z-index: -1;
        background: #fff;
    }
}

.recom__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.recom__atc {
    width: 48%;

    &:last-child {
        margin: 30px auto 0;
    }
}

.recom__num {
    top: 0;
    left: .5em;
    transform: translate(-50%, -50%);
}

.recom__h3 {
    margin-top: .5em;
}

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

    .recommend {
        padding: 80px 0 0;
    }

    .recom__flex {
        flex-direction: row;
    }

    .recom__ttl {
        margin-bottom: 0;
        padding-top: 150px;

    }

    .recom__left {
        width: 60%;
        padding: 30px 5%;

        &::before {
            width: 200%;
            height: 100%;
            left: auto;
            right: -30%;
            bottom: 0;
        }
    }

    .recom__items {
        display: flex;
        flex-wrap: wrap;
    }

    .recom__atc {
        width: 48%;

        &:last-child {
            margin: 30px auto 0;
        }
    }

    .recom__num {
        top: 0;
        left: 0;
    }

    .recom__h3 {
        margin-top: .5em;
    }
}

@media screen and (min-width:1025px) {
    .recommend {
        padding: 80px 0;
    }


    .recom__ttl {
        padding-top: 80px;
        width: 35%;

    }

    .recom__left {
        width: 60%;
        padding: 30px 5%;

        &::before {
            width: 200%;
            height: 100%;
            left: auto;
            right: -30%;
            bottom: 0;
        }
    }


    .recom__atc {
        width: 32%;

        &:last-child {
            margin: 0;
        }
    }

    .recom__num {
        top: 0;
        left: 0;
    }

    .recom__h3 {
        margin-top: .5em;
        font-size: min(2rem, 1.6vw);
    }
}


/*============================
   service
============================*/
.service {
    padding: 60px 0;
}

.ser__ttl {
    .txt {
        margin-top: .5em;
    }
}

.ser__atc {
    margin: 0 auto 30px;
    width: fit-content;
    padding-left: 20px;
    position: relative;
}

.ser__img {
    position: relative;
}

.ser__caption {
    position: absolute;
    top: 0;
    left: -20px;
    white-space: nowrap;
}

.ser__h3 {
    margin-top: .5em;

    .fs-26 {
        display: block;
    }

    .txt {
        display: block;
    }
}

@media screen and (min-width:768px) {
    .service {
        padding: 80px 0;
    }

    .ser__ttl {
        .txt {
            margin-top: .5em;
        }
    }

    .ser__items {
        align-items: flex-start;
    }

    .ser__atc {
        width: 48%;
        max-width: 580px;
        margin: 0;
        padding-left: 20px;

        &:nth-child(even) {
            margin-top: 50px;
        }
    }

    .ser__caption {
        top: 0;
        left: -20px;
    }

    .ser__h3 {
        margin-top: .5em;

    }

}

@media screen and (min-width:1025px) {
    .service {
        padding: 120px 0;
    }


    .ser__atc {
        width: 48%;
        padding-left: 30px;

        &:nth-child(even) {
            margin-top: 120px;
        }
    }

    .ser__caption {
        top: 0;
        left: -30px;
    }

}


/*============================
   contents
============================*/

.cont__item {
    padding: 30px 5%;
    background: url(../images/contents_bg01.jpg) no-repeat center center/cover;
    color: #fff;

    &:nth-child(2) {
        background: url(../images/contents_bg02.jpg) no-repeat center center/cover;
    }
}

.cont__ttl {
    .txt {
        margin-top: .5em;
    }
}

@media screen and (min-width:768px) {
    .cont__item {
        width: 50%;
        padding: 50px 1em;
    }


}

@media screen and (min-width:1025px) {
    .cont__item {
        width: 50%;
        padding: 60px 1em;
    }


}


/*============================
   repeat
============================*/

.repeat {
    padding: 60px 0;
}

.rep__img {
    width: 95%;
    margin: -30px 0 0 auto;
}

.rep__left {
    width: 95%;
    background: #fff;
    padding: 30px 10% 30px 5%;
    z-index: 1;
    position: relative;

    &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        border: solid 1px #7d2f2f;
        bottom: 10px;
        right: 10px;
    }
}

.rep__ttl--en {
    width: 60px;
    right: 0;
    bottom: 10px;
}
.rep__ttl{
    .txt{
        margin-top: .75em;
    }
}

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

    .repeat {
        padding: 80px 0;
    }

    .rep__img {
        width: 66%;
        margin: 0 0 0 -16%;
    }

    .rep__left {
        width: 66%;
        margin: 30px -16% 0 0;
        padding: 50px 10% 50px 3%;

        &::before {
            bottom: 10px;
            right: 10px;
        }
    }

    .rep__ttl--en {
        width: 60px;
        right: 0;
        bottom: 10px;
    }
}

@media screen and (min-width:1025px) {
    .repeat {
        padding: 120px 0;
    }

    .rep__img {
        width: 66%;
        margin: 0 0 0 -16%;
        & img{
            object-fit: cover;
            width: 100%;
            height: 600px;
        }
    }

    .rep__left {
        width: 66%;
        margin: 100px -16% 0 0;
        padding: 80px 10% 100px 3%;

        &::before {
            bottom: 20px;
            right: 20px;
        }
    }

    .rep__ttl--en {
        width: 150px;
        right: 0;
        bottom: 20px;
    }
    .rep__left--inner{
        width: fit-content;
        margin: 0 auto;
    }
}

/*============================
   news
============================*/
.news {
    padding: 0 0 60px;
    background: #f4f4f4;
}

.news__bg {
    padding: 30px 0;
    background: url(../images/pt_grid.png);
}

.news__ttl {
    display: flex;
    align-items: baseline;
    padding-bottom: 1em;
    border-bottom: solid 1px #222;

    .txt {
        margin-left: 1em;
    }
}

.news__flex {
    display: flex;
    flex-direction: column-reverse;
}

.news__atc {

    & a {
        display: block;
        align-items: center;
        width: 100%;
        height: 100%;
        margin-bottom: 1.5em;
    }

    &:last-child a {
        margin-bottom: 0;
    }


}

.news__date {
    white-space: nowrap;
}


.news__atc--ttl {
    margin-top: .5em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

}

.news__btn {
    max-width: 252px;
    width: 160px;
    margin-top: 30px;
}

@media screen and (min-width:768px) {
    .news {
        padding: 0 0 80px;
    }

    .news__bg {
        padding: 40px 0;
    }


    .news__flex {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
    }

    .news__atcwrap {
        width: calc(100% - 200px);
    }

    .news__atc {

        & a {
            display: flex;
            margin-bottom: 1.5em;
        }

        &:last-child a {
            margin-bottom: 0;
        }


    }

    .news__date {
        white-space: nowrap;
    }


    .news__atc--ttl {
        margin-top: 0;
        margin-left: 1em;

    }

    .news__btn {
        max-width: 252px;
        width: 160px;
        margin-top: 0;
    }
}

@media screen and (min-width:1025px) {
    .news {
        padding: 0 0 120px;
    }

    .news__bg {
        padding: 40px 0;
    }


    .news__atcwrap {
        width: calc(100% - 330px);
    }

    .news__atc {

        & a {
            margin-bottom: 1.5em;
        }
    }

    .news__atc--ttl {
        margin-left: 1em;

    }

    .news__btn {
        max-width: 252px;
        width: 100%;
    }
}