@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: 91.5rem;
    margin: 4.8rem auto 7.5rem auto;
}

.visual {
    width: 91.5rem;
    margin: 4.8rem auto 15.5rem auto;
}

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

.style .lp-tx {
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1.35rem;
    text-align: center;
    line-height: 1.7;
}

.style .credit_box,
.style .credit_box3,
.style .credit_box4,
.style .credit_box5_2,
.style .credit_box6,
.style .credit_box7,
.style .credit_box8 {
    width: 83rem;
    height: 2rem;
    text-align: right;
    letter-spacing: 0.2px;
    font-size: 1.4rem;
    z-index: 100;
    position: relative;
    font-family: "montserrat", sans-serif;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    column-gap: 3rem;
}

.style .credit_box2,
.style .credit_box5 {
    width: 83rem;
    height: 2rem;
    text-align: right;
    letter-spacing: 0.2px;
    font-size: 1.4rem;
    z-index: 100;
    position: relative;
    font-family: "montserrat", sans-serif;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
}


.style .cre_list {
    width: 40rem;
}

.style .box02 .credit_box2 .cre_list {
    height: 2rem;
}

.style .box05 .credit_box5 .cre_list {
    height: 2rem;
}

.style .item-area .box01 {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    margin: 0 auto;
    margin-top: 1.5rem;
    width: 83rem;
    gap: 3rem;
    z-index: 0;
}

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

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

.box01 .credit_box,
.box03 .credit_box3,
.box04 .credit_box4,
.box06 .credit_box6,
.box07 .credit_box7,
.box08 .credit_box8 {
    margin-top: -4rem;
}

.box02 .credit_box2 {
    margin-top: -6.2rem;
    margin-left: 43rem;
}

.box05 .credit_box5 {
    margin-top: -4.5rem;
}

.box05 .credit_box5_2 {
    margin-top: -5.5rem;
    margin-left: 43rem;
}


.style .item-area .box02 {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    margin: 0 auto;
    margin-top: 1.5rem;
    width: 83rem;
    gap: 3rem;
    z-index: 0;
}

.style .item-area .box02 figure {
    width: 40rem;
    z-index: 0;
}

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



.style .item-area .box03 {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    margin: 0 auto;
    margin-top: 1.5rem;
    width: 83rem;
    gap: 3rem;
    z-index: 0;
}

.style .item-area .box03 figure {
    width: 40rem;
    z-index: 0;
}

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


.style .item-area .box04 {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    margin: 0 auto;
    margin-top: 1.5rem;
    width: 83rem;
    gap: 3rem;
    z-index: 0;
}

.style .item-area .box04 figure {
    width: 40rem;
    z-index: 0;
}

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

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

.style .item-area .box05 figure {
    width: 40rem;
    z-index: 0;
}

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

.style .item-area .box06 {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    margin: 0 auto;
    margin-top: 1.5rem;
    width: 83rem;
    gap: 3rem;
    z-index: 0;
}

.style .item-area .box06 figure {
    width: 40rem;
    z-index: 0;
}

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

.style .item-area .box07 {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    margin: 0 auto;
    margin-top: 1.5rem;
    width: 83rem;
    gap: 3rem;
    z-index: 0;
}

.style .item-area .box07 figure {
    width: 40rem;
    z-index: 0;
}

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

.box07 .credit_box {
    margin-left: 35rem;
    top: -439.5rem;
}



.style .item-area .box08 {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    margin: 0 auto;
    margin-top: 1.5rem;
    width: 83rem;
    gap: 3rem;
    z-index: 0;
}

.style .item-area .box08 figure {
    width: 40rem;
    z-index: 0;
}

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


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

.box00 img {
    width: 4.5rem;
}

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

.style .item-area .box00_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;
    }

    .visual {
        width: 100%;
        margin: calc(50* (100vw / 750)) auto calc(130* (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 .lp-tx {
        font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: calc(17* (100vw / 750));
        text-align: center;
        line-height: 1.7;
    }

    .style .item-area {
        width: 100%;
        margin: 0 auto calc(166* (100vw / 750)) auto;
    }

    .style .credit_box,
    .style .credit_box3,
    .style .credit_box4,
    .style .credit_box5_2,
    .style .credit_box6,
    .style .credit_box7,
    .style .credit_box8 {
        width: calc(630*(100vw/750));
        height: 10px;
        text-align: right;
        letter-spacing: 0.2px;
        font-size: 1.4rem;
        font-size: calc(15* (100vw / 750));
        z-index: 100;
        position: relative;
        font-family: "montserrat", sans-serif;
        *color: #fff;
        display: flex;
        flex-wrap: wrap;
        column-gap: calc(30* (100vw / 750));
    }
      
    .style .credit_box2,
    .style .credit_box5 {
        width: calc(630*(100vw/750));
        height: 10px;
        text-align: right;
        letter-spacing: 0.2px;
        font-size: 1.4rem;
        font-size: calc(13* (100vw / 750));
        z-index: 100;
        position: relative;
        font-family: "montserrat", sans-serif;
        *color: #000;
        display: flex;
        flex-wrap: wrap;
    }
    
    .style .cre_list {
        width: calc(300* (100vw / 750));
    }

    .style .box02 .credit_box2 .cre_list {
        height: 10px;
    }
    
    .style .box05 .credit_box5 .cre_list {
        height: 10px;
    }

    .box01 .credit_box,
    .box03 .credit_box3,
    .box04 .credit_box4,
    .box06 .credit_box6,
    .box07 .credit_box7,
    .box08 .credit_box8 {
        margin-top: calc(-25* (100vw / 750));
    }
    
    .box02 .credit_box2 {
        margin-top: calc(-75* (100vw / 750));
        margin-left: calc(390*(100vw/750));
    }
    
    .box05 .credit_box5 {
        margin-top: calc(-45* (100vw / 750));
    }
    
    .box05 .credit_box5_2 {
        margin-top: calc(-55* (100vw / 750));
        margin-left: calc(390*(100vw/750));
    }

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


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

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

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

    .style .item-area .box05 {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 0 auto;
        margin-top: calc(30*(100vw/750));
        width: 100%;
        gap: calc(30* (100vw / 750));
        margin-bottom: calc(-30*(100vw/750));
        z-index: 0;
    }
    
    
    .style .item-area .box05 figure {
        width: calc(300* (100vw / 750));
    }
    
    .style .item-area .box05 div {
        margin-bottom: calc(0* (100vw / 750));
    }
    
    
    .style .item-area .box06 {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 0 auto;
        margin-top: calc(30*(100vw/750));
        width: 100%;
        gap: calc(30* (100vw / 750));
        margin-bottom: calc(-30*(100vw/750));
        z-index: 0;
    }
    
    .style .item-area .box06 figure {
        width: calc(300* (100vw / 750));
    }
    
    .style .item-area .box06 div {
        margin-bottom: calc(0* (100vw / 750));
    }
    
    .style .item-area .box07 {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 0 auto;
        margin-top: calc(60*(100vw/750));
        width: 100%;
        gap: calc(30* (100vw / 750));
        margin-bottom: calc(-60*(100vw/750));
        z-index: 0;
    }
    
    
    .style .item-area .box07 figure {
        width: calc(300* (100vw / 750));
    }
    
    .style .item-area .box07 div {
        margin-bottom: calc(0* (100vw / 750));
    }
    
    .style .item-area .box08 {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 0 auto;
        margin-top: calc(90*(100vw/750));
        width: 100%;
        gap: calc(30* (100vw / 750));
        margin-bottom: calc(-90*(100vw/750));
        z-index: 0;
    }
    
    .style .item-area .box08 figure {
        width: calc(300* (100vw / 750));
    }
    
    .style .item-area .box08 div {
        margin-bottom: calc(0* (100vw / 750));
    }
    

    .style .item-area .box00 {
        margin: 0 auto;
        width: calc(200* (100vw / 750));
        margin-top: calc(300* (100vw / 750));
    }
    
    .box00 img {
        width: calc(55* (100vw / 750));
    }
    
    .style .item-area .box00_1 {    
        margin: 0 auto;
        width: calc(280* (100vw / 750));
        margin-top: calc(-150* (100vw / 750));
    }
    
    .style .item-area .box00_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;
    }

    #main_visual {
        position: relative;
    }
    #main_visual .visual {
        line-height: 0;
    }
    #main_visual h1 {
        width: 25%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        line-height: 0;
        padding: 0;
        margin: 0;
    }
    @media only screen and (max-width: 768px)  {
        #main_visual h1 {
            width: 50%;
            position: absolute;
            top: 6%;
            left: 50%;
            transform: translate(-50%,0%);
            line-height: 0;
        }	
    }
    #main_logo {
        margin: 10% auto;
        width: 50%;
        max-width: 200px;
        line-height: 0;
    }
    @media only screen and (max-width: 768px)  {
        #main_logo {
            margin: 20% auto;
        }	
    }
    
    #main_contents {
        position: relative;
    }
    #main_contents .section {
        margin: 10% auto 15%;
        position: relative;
    }
    .section .img {
        line-height: 0;
        position: relative;
        overflow: hidden;
    }
    
    .section .look {
        *margin: 5% auto;
        position: relative;
    }
    .section .list {
        margin: 0 auto;
        text-align: center;
    }
    .section .list li {
        font-size: 12px;
        font-weight: 600;
        display: inline-block;
        margin: 0 10px;
    }
    .section .list li.no {
        font-size: 14px;
        font-weight: 700;
        display: block;
        margin-bottom: 10px;
    }
    .section .list li a {
        display: inline-block;
        padding-bottom: 5px;
        border-bottom: 1px solid #000;
    }
    @media only screen and (max-width: 768px)  {
        .section .list {
            margin: 5% auto;
            text-align: left;
            width: 85%;
        }
        .section .list li {
            font-size: 11px;
            display: block;
            margin: 10px 0;
        }
        .section .list li.no {
            font-size: 14px;
            font-weight: 700;
            display: block;
            margin-bottom: 20px;
        }
    }
    #look-01 .look,#look-05 .look,#look-09 .look,#look-03 .look,#look-08 .look {
        width: 80%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-left: 20%;
        column-gap: 1vw;
    }
    #look-03 .look,#look-08 .look {
        width: 80%;
        margin-left: 0%;
    }
    
    #look-02 .look,#look-07 .look {
        width: 50%;
    }
    
    #look-04 .look {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
    #look-04 .look .img:nth-of-type(1) {
        grid-column: 1/3;
        grid-row: 1/3;
        box-sizing: border-box;
        width: 70%;
        margin: 15% auto;
    
    }
    #look-04 .look .img:nth-of-type(2) {
        margin-bottom: 1vw;
    
    }
    #look-06 .look,#look-10 .look {
        width: 70%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    #look-06 .look .img:nth-of-type(1),#look-10 .look .img:nth-of-type(1) {
        grid-column: 1/3;
        box-sizing: border-box;
        width: 70%;
        margin: 0 15% 15%;
    }
    
    #look-11 .look{
        width: 50%;
    }
    
    #look-11 .look .img:nth-of-type(2){
        width: 50%;
        margin: 15% auto 0;
    }
    @media only screen and (max-width: 768px)  {
        #look-01 .look,#look-05 .look,#look-09 .look,#look-03 .look,#look-08 .look {
            width:100%;
            display: block;
            margin-left: 0%;
        }
        #look-02 .look,#look-07 .look {
            width: 100%;
            margin: 0 auto;
        }
        #look-01 .look .img:nth-of-type(2),#look-09 .look .img:nth-of-type(2) {
            width: 75%;
            margin: 15% auto 0;
        }
        #look-05 .look .img:nth-of-type(1),#look-03 .look .img:nth-of-type(1),#look-08 .look .img:nth-of-type(1) {
            width: 75%;
            margin: 0 auto 15%;
        }
        
        #look-04 .look {
            grid-template-columns: 1fr 1fr;
        }
        #look-04 .look .img:nth-of-type(1) {
            grid-column: 1/3;
            grid-row: 1/2;
            box-sizing: border-box;
            width: 70%;
            margin: 0 auto 15%;
    
        }
        #look-06 .look,#look-10 .look {
            width: 100%;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
        #look-06 .look .img:nth-of-type(1),#look-10 .look .img:nth-of-type(1) {
            grid-column: 1/3;
            box-sizing: border-box;
            width: 70%;
            margin: 0 auto 15%;
        }
    
        #look-11 .look{
            width: 100%;
            margin: 0 auto;
        }
    
        #look-11 .look .img:nth-of-type(2){
            width: 50%;
            margin: 15% auto 0;
        }
    }
    
    #main_foot {
        margin: 10% auto;
    }
    #main_foot .logo {
        max-width: 200px;
        width: 30%;
        margin: 0 auto;
    }
    @media only screen and (max-width: 768px)  {
        #main_foot {
            margin: 20% auto;
        }
        #main_foot .logo {
            max-width: 35%;
            width: 35%;
            margin: 0 0 0 55%;
        }	
        
    }
    #main_visual h1 {
        opacity: 0;
        transition: 1.6s all 1s ease;
    }
    #main_visual.ac h1 {
        opacity: 1;
    }
    #main_visual .visual {
        overflow: hidden;
    }
    #main_visual .visual img {
        transform: scale(1.1);
        opacity: 0;
        transition: 2s all 0s ease;
    }
    #main_visual.ac .visual img {
        opacity: 1;
        transform: scale(1);
    }
    .section .list {
        transform: translate(0,-20px);
        opacity: 0;
        transition: 1.6s all 0s ease;
    }
    .section .list.ac {
        transform: translate(0);
        opacity: 1
    }
    .section .img {
        opacity: 0;
        transition: 1.6s all 0s ease;
    }
    .section .img.ac {
        opacity: 1;
    }
    .section .img img {
        transform: scale(1.1);
        transition: 2s all 0s ease;
    }
    .section .img.ac img {
        transform: scale(1);
    }
    @media only screen and (max-width: 768px)  {
        .section .list {
            transform: translate(-20px,0px);
            opacity: 0;
            transition: 1.6s all 0s ease;
        }
        .section .list.ac {
            transform: translate(0);
            opacity: 1
        }
        
    }