@charset "UTF-8";

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

.style img {
    width: 100%;
    height: auto;
}

.style .pc_only {
    display: block !important;
}

.style .sp_only {
    display: none !important;
}

.style .fadeIn {
    opacity: 0;
    visibility: hidden;
    transform: translate(0, 0px);
    transition: all 0.4s;
}

.style .fadeIn.scrollIn {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0px);
    transition-delay: 0.4s;
}

.style .inner {
    max-width: 1060px;
    width: 106rem;
    margin: 0 auto;
    padding-top: 20px;
    font-feature-settings: "falt";
    color: #4D4D4D;
}

.style .inner-bd {
    max-width: 1000px;
    margin: 0 auto;
}

.lp-ttl {
    letter-spacing: 0.1em;
    line-height: 2.3;
    font-family: "montserrat", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.7rem;
    margin: 0 auto;
    width: 62rem;
    margin-top: 12rem;
    text-align: center;
}

.subtext {
    letter-spacing: 0.1em;
    line-height: 2.3;
    font-family: "montserrat", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2rem;
    width: 40.5rem;
    margin: 0 auto;
    margin-left: 32rem;
    margin-top: 12.5rem; 
}

.style .breadcrumbs ul li {
    vertical-align: top;
}

.style .breadcrumbs ul li:not(:last-child)::after {
    vertical-align: top;
}

.style h1 {
    width: 95rem;
    margin: 4.8rem auto 7.5rem auto;
}

.style .item-area {
    margin: 0 auto 7rem auto;
}

.logo {
    width: 21rem;
    margin: 0 auto;
    margin-top: 10.8rem;
}

.style .credit_box {
    width: 15rem;
    height: 2.3rem;
    text-align: right;
    letter-spacing: 0.2px;
    font-size: 1.4rem;
    z-index: 100;
    position: relative;
    font-family: "montserrat", sans-serif;
}


.style .item-area .box01 {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    margin: 0 auto;
    margin-top: 15rem;
    width: 90rem;
    gap: 1.5rem;
    margin-bottom: -11.5rem;
    margin-left: 13rem;
    z-index: 0;
}

/* .style .item-area .box01 picture:nth-child(2),
.style .item-area .box01 picture:nth-child(3) {
    animation-delay: 0.3s;
} */

.style .item-area .box01 figure {
    width: 39rem;
    z-index: 0;
}

.style .item-area .box01 div {
    margin-bottom: 0rem;
}

.box01 .credit_box {
    margin: 13rem 0 0 77.5rem;
}


.style .item-area .box02 {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    margin: 0 auto;
    margin-top: 13rem;
    width: 87rem;
    column-gap: 1.5rem;
    margin-bottom: -11.5rem;
    z-index: 0;
}

.style .item-area .box02 figure {
    width: 42.5rem;
}

.style .item-area .box02 div {
    margin-bottom: 5.3rem;
}

.style .item-area .box02_1 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
    margin-top: 8rem;
    width: 42.5rem;
    z-index: 0;
}

.style .item-area .box02_1 figure {
    width: 42.5rem;
}

.style .item-area .box02_1 div {
    margin-bottom: 5.3rem;
}


.style .item-area .box02_2 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
    margin-top: 8rem;
    margin-bottom: -5.5rem;
    width: 95rem;
    z-index: 0;
}

.style .item-area .box02_2 figure {
    width: 95rem;
}

.style .item-area .box02_2 div {
    margin-bottom: 5.3rem;
}

.box02_2 .credit_box {
    margin: 0 auto;
    height: 2.2rem;
    text-align: center;
}

.box02 .credit {
    margin-top: 13rem;
}

.box02 .credit_box {
    margin-left: 81rem;
    height: 2.2rem;
}

.style .item-area .box03 {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    margin: 0 auto;
    margin-top: 14rem;
    margin-bottom: -5.5rem;
    width: 95rem;
    column-gap: 1.5rem;
    z-index: 0;
}


.style .item-area .box03 figure {
    width: 46.75rem;
}

.style .item-area .box03 div {
    margin-bottom: 5.3rem;
}

.style .item-area .box03_1 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
    margin-top: 10rem;
    width: 54rem;
    column-gap: 1.5rem;
    margin-bottom: -5.5rem;
    z-index: 0;
}


.style .item-area .box03_1 figure {
    width: 54rem;
}

.style .item-area .box03_1 div {
    margin-bottom: 5.3rem;
}


.box03 .credit_box {
    margin-left: 85.5rem;
    height: 2.2rem;
}

.box03_1 .credit_box {
    margin: 0 auto;
    height: 2.2rem;
    text-align: center;
}




.style .item-area .box04 {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    margin: 0 auto;
    margin-top: 14rem;
    margin-bottom: -5.5rem;
    width: 95rem;
    column-gap: 1.5rem;
    z-index: 0;
}


.style .item-area .box04 figure {
    width: 46.75rem;
}

.style .item-area .box04 div {
    margin-bottom: 5.3rem;
}


.box04 .credit_box {
    margin-left: 85.5rem;
    height: 2.2rem;
}

.style .item-area .box05 {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    margin: 0 auto;
    margin-top: 10rem;
    margin-bottom: -5.5rem;
    width: 67rem;
    column-gap: 1.5rem;
    z-index: 0;
}


.style .item-area .box05 figure {
    width: 32.75rem;
}

.style .item-area .box05 div {
    margin-bottom: 5.3rem;
}



.style .item-area .box06 {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    margin: 0 auto;
    margin-top: 23rem;
    margin-bottom: -5.5rem;
    width: 67rem;
    column-gap: 1.5rem;
    z-index: 0;
}


.style .item-area .box06 figure {
    width: 67rem;
}

.style .item-area .box06 div {
    margin-bottom: 5.3rem;
}

.box06 .credit_box {
    margin: 0 auto;
    height: 2.2rem;
    text-align: center;
}


/* Instagram */

.style .item-area .box08 {
    margin: 0 auto;
    width: 16.7rem;
    margin-top: 20rem;
}

.box08 img {
    width: 4.5rem;
}

.style .item-area .box08_1 {    
    margin: 0 auto;
    width: 22.8rem;
    margin-top: -6rem;
    font-size: 1.2rem;
}

.style .item-area .box08_1 p {
    width: fit-content;
    text-align: center;
    letter-spacing: .1px;
} 

.style .item-area .box09 {
    display: flex;
    justify-content: center;
    margin-top: -3rem;
}

.style .item-area .box09 figure {
    width: 24rem;
    margin-top: -2.7rem;
    margin-left: 0rem;
}

.style .btn-area {
    display: flex;
    margin: 10rem auto 17rem auto;
}

.style .btn-area a {
    margin: 0 auto;
    padding: 1.2rem 4.4rem;
    letter-spacing: 0.1em;
    font-family: 'Nunito', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1.4rem;
    border: 1px solid #19191E;
    color: #19191E;
}

.btn-area a:hover {
    background-color: #f5f5f5;
}

/*　画像の拡大　*/

    .zoomIn img{
        transform: scale(1);
        transition: all 0.4s;/*移り変わる速さを変更したい場合はこの数値を変更*/
    }
  
    .zoomIn a:hover img{/*hoverした時の変化*/
        transform: scale(1.1);/*拡大の値を変更したい場合はこの数値を変更*/
    }
    
  /*　画像のマスク　*/
  .mask{
      display: block;
      line-height: 0;/*行の高さを0にする*/
      overflow: hidden;/*拡大してはみ出る要素を隠す*/
  }

@media screen and (max-width: 767px) {
    .style .pc_only {
        display: none !important;
    }

    .style .sp_only {
        display: block !important;
    }

    .style .inner {
        max-width: none;
        width: 100%;
        padding-top: calc(40* (100vw / 750));
        overflow-x: hidden;
    }

    .style .inner-bd {
        max-width: none;
        width: 100%;
    }

    .style .backbg {
        top: calc(28* (100vw / 750));
        max-width: none;
        width: calc(750* (100vw / 750));
        background: url(../../Page/Feature/210816_style/img/sp.jpg) no-repeat;
        background-size: 100%;
    }

    .style h1 {
        width: 100%;
        margin: calc(50* (100vw / 750)) auto calc(90* (100vw / 750)) auto;
    }

    .lp-ttl {
        letter-spacing: calc(2* (100vw / 750));
        line-height: 1.8;
        font-family: "montserrat", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: calc(17* (100vw / 750));
        margin: 0 auto;
        width: calc(620* (100vw / 750));
        margin-top: calc(20* (100vw / 750));
        margin-bottom: calc(120* (100vw / 750));
        text-align: center;
    }
    
    .style .item-area {
        width: 100%;
        margin: 0 auto calc(166* (100vw / 750)) auto;
    }

    .logo {
        width: calc(160*(100vw/750));
        margin: 0 auto;
    }

    .style .credit_box {
        width: calc(166* (100vw / 750));
        height: 10px;
        text-align: right;
        letter-spacing: 0.2px;
        font-size: calc(13* (100vw / 750));
        z-index: 100;
        position: relative;
        font-family: "montserrat", sans-serif;
    }
    

    .style .item-area .box01 {
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
        margin: 0 auto;
        margin-top: calc(120* (100vw / 750));
        width: calc(620* (100vw / 750));
        gap: calc(20* (100vw / 750));
        margin-bottom: calc(-145* (100vw / 750));
        z-index: 0;
    }
    
    
    .style .item-area .box01 figure {
        width: calc(300* (100vw / 750));
    }
    
    .style .item-area .box01 div {
        margin-bottom: calc(0* (100vw / 750));
    }
    


    .box01 .credit_box {
        margin: calc(0*(100vw/750)) 0 0 calc(521* (100vw / 750));
    }

    
    .style .item-area .box02 {
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
        margin: 0 auto;
        margin-top: calc(75* (100vw / 750));
        width: calc(700* (100vw / 750));
        column-gap: calc(20* (100vw / 750));
        margin-bottom: calc(-210* (100vw / 750));
    }
    
    .style .item-area .box02 figure {
        width: calc(340* (100vw / 750));
    }
    
    .style .item-area .box02 div {
        margin-bottom: calc(0* (100vw / 750));
    }

    .box02 .credit {
        margin-top: calc(231*(100vw/750));
    }
    
    .box02 .credit_box {
        margin-left: calc(560* (100vw / 750));
        height: 10px;
    }



    .style .item-area .box02_1 {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 0 auto;
        margin-top: calc(30* (100vw / 750));
        width: calc(335* (100vw / 750));
        z-index: 0;
    }
    
    .style .item-area .box02_1 figure {
        width: calc(335* (100vw / 750));
    }
    
    .style .item-area .box02_1 div {
        margin-bottom: calc(0*(100vw/750))
    }

    .style .item-area .box02_2 {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 0 auto;
        margin-top: calc(65* (100vw / 750));
        margin-bottom: calc(-142*(100vw/750));
        width: 100%;
        z-index: 0;
    }
    
    .style .item-area .box02_2 figure {
        width: 100%;
    }
    
    .style .item-area .box02_2 div {
        margin-bottom: calc(0*(100vw/750))
    }

    .box02_2 .credit_box {
        margin: 0 auto;
        text-align: center;
        height: 10px;
    }
    





    .style .item-area .box03 {
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
        margin: 0 auto;
        margin-top: calc(75* (100vw / 750));
        width: 100%;
        column-gap: calc(20* (100vw / 750));
        margin-bottom: calc(-210* (100vw / 750));
    }
    
    .style .item-area .box03 figure {
        width: calc(365* (100vw / 750));
    }
    
    .style .item-area .box03 div {
        margin-bottom: calc(0* (100vw / 750));
    }

    .box03 .credit {
        margin-top: calc(231*(100vw/750));
    }
    
    .box03 .credit_box {
        margin-left: calc(570* (100vw / 750));
        height: 10px;
    }



    .style .item-area .box03_1 {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 0 auto;
        margin-top: calc(50* (100vw / 750));
        width: calc(440* (100vw / 750));
        column-gap: calc(20* (100vw / 750));
        margin-bottom: calc(-145* (100vw / 750));
        z-index: 0;
    }
    
    
    .style .item-area .box03_1 figure {
        width: calc(440* (100vw / 750));
    }
    
    .style .item-area .box03_1 div {
        margin-bottom: calc(0* (100vw / 750));
    }

    
    .box03_1 .credit_box {
        margin: 0 auto;
        text-align: center;
        height: 10px;
    }


    .style .item-area .box04 {
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
        margin: 0 auto;
        margin-top: calc(75* (100vw / 750));
        width: 100%;
        column-gap: calc(20* (100vw / 750));
        margin-bottom: calc(-210* (100vw / 750));
    }
    
    .style .item-area .box04 figure {
        width: calc(365* (100vw / 750));
    }
    
    .style .item-area .box04 div {
        margin-bottom: calc(0* (100vw / 750));
    }

    .box04 .credit {
        margin-top: calc(231*(100vw/750));
    }
    
    .box04 .credit_box {
        margin-left: calc(570* (100vw / 750));
        height: 10px;
    }







    .style .item-area .box05 {
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
        margin: 0 auto;
        margin-top: calc(55* (100vw / 750));
        width: calc(540* (100vw / 750));
        column-gap: calc(20* (100vw / 750));
        margin-bottom: calc(-105* (100vw / 750));
    }
    
    .style .item-area .box05 figure {
        width: calc(260* (100vw / 750));
    }
    
    .style .item-area .box05 div {
        margin-bottom: calc(0* (100vw / 750));
    }


    .style .item-area .box06 {
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
        margin: 0 auto;
        margin-top: calc(225* (100vw / 750));
        width: calc(540* (100vw / 750));
        column-gap: calc(20* (100vw / 750));
        margin-bottom: calc(-140* (100vw / 750));
    }
    
    .style .item-area .box06 figure {
        width: calc(540* (100vw / 750));
    }
    
    .style .item-area .box06 div {
        margin-bottom: calc(0* (100vw / 750));
    }
    
    .box06 .credit_box {
        margin: 0 auto;
        text-align: center;
        height: 10px;
    }


    .style .item-area .box07 {
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
        margin: 0 auto;
        margin-top: calc(70* (100vw / 750));
        width: calc(700* (100vw / 750));
        column-gap: calc(20* (100vw / 750));
        margin-bottom: calc(-190* (100vw / 750));
    }
    
    .style .item-area .box07 figure {
        width: calc(340* (100vw / 750));
    }
    
    .style .item-area .box07 div {
        margin-bottom: calc(0* (100vw / 750));
    }
    
    .box07 .credit_box {
        margin-left: calc(553* (100vw / 750));
    }


    /* 上から　*/
    .fadeIn_down {
        opacity: 0;
        transform: translate(0, 0px);
        transition: 0.4s;
    }
    .fadeIn_down.is-show {
        transform: translate(0, 0);
        opacity: 1;
    }
    /* 左から */
    .fadeIn_left {
        opacity: 0;
        transform: translate(0, 0px);
        transition: 0.4s;
    }
    .fadeIn_left.is-show {
        transform: translate(0, 0);
        opacity: 1;
    }
    /* 右から */
    .fadeIn_right {
        opacity: 0;
        transform: translate(0, 0px);
        transition: 0.4s;
    }
    .fadeIn_right.is-show {
        transform: translate(0, 0);
        opacity: 1;
    }
    /* 下から */
    .fadeIn_up {
        opacity: 0;
        transform: translate(0, 0px);
        transition: 0.4s;
    }
    .fadeIn_up.is-show {
        transform: translate(0, 0);
        opacity: 1;
    }

    .style .item-area .box08 {
        margin: 0 auto;
        width: calc(200* (100vw / 750));
        margin-top: calc(200* (100vw / 750));
    }
    
    .box08 img {
        width: calc(55* (100vw / 750));
    }
    
    .style .item-area .box08_1 {    
        margin: 0 auto;
        width: calc(280* (100vw / 750));
        margin-top: calc(-150* (100vw / 750));
    }
    
    .style .item-area .box08_1 p {
        width: fit-content;
        text-align: center;
        font-size: calc(15* (100vw / 750));
        letter-spacing: .1px;
    }

    .style .item-area .box09 {
        display: flex;
        justify-content: center;
        margin-top: calc(-150* (100vw / 750));
        margin-bottom: calc(-50* (100vw / 750));
    }
    
    .style .item-area .box09 figure {
        width: calc(270* (100vw / 750));
        margin-top: calc(0* (100vw / 750));
        margin-left: calc(0* (100vw / 750));
    }

    .style .btn-area {
        margin: calc(0* (100vw / 750)) auto calc(160* (100vw / 750)) auto;
    }
    
    .style .btn-area a {
        padding: calc(22* (100vw / 750)) calc(82* (100vw / 750));
        font-size: calc(23* (100vw / 750));
    }

}

    /* fade in */
    .fade {
        animation: fadein 1.5s ease 0s 1 normal;
        -webkit-animation: fadein 1.5s ease 0s 1 normal;
    }

    @keyframes fadein {
        from {
        opacity: 0;
        transform: translateY(50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
        }
        @-webkit-keyframes fadein {
            from {
            opacity: 0;
            transform: translateY(50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .imgFade.fadeT {
        opacity: 0;
        transform: translateY(50px);
    }

    .imgFade.fadeD {
        opacity: 0;
        transform: translateY(-50px);
    }


    .imgFade.fadeR {
        opacity: 0;
        transform: translateX(50px);
    }

    .imgFade.fadeL {
        opacity: 0;
        transform: translateX(-50px);
    }

    .imgAnim.fadeT {
        -webkit-animation-name: imgAnim;
        animation-name: imgAnim;
        -webkit-animation-duration: 1.4s;
        animation-duration: 1.4s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }

    .imgAnim.fadeR {
        -webkit-animation-name: imgAnim;
        animation-name: imgAnim;
        -webkit-animation-duration: 1.4s;
        animation-duration: 1.4s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }

    .imgAnim.fadeL {
        -webkit-animation-name: imgAnim;
        animation-name: imgAnim;
        -webkit-animation-duration: 1.4s;
        animation-duration: 1.4s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }

    @keyframes imgAnim {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
            -webkit-transform: translate(0);
            transform: translate(0);
        }
    }

    /* ▽ animation ▽ */
    .js_imgFadeIn {
        opacity: 0;
        transition: transform 1s ease-in-out, opacity 1s ease-in-out;
    }

    .imgAnimated {
        opacity: 1;
    }


    ul div li {
        overflow: hidden;
        position: relative;
    }
    ul div li::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 200;
        transition: 1s all 0s ease;
    }

    ul div li.ac::before {
        left: 100%;
    }

    #main_visual ul div li::before {
        background: #fff;	
    }

    
    #main_visual.ac h1 {
        opacity: 1;
    }