@charset "UTF-8";

html {font-size: 62.5%;}
#Wrap {width: 100%;}

#contentsAll a:hover {cursor: pointer; opacity: .7;}
#contentsAll ul li {list-style: none;}
#contentsAll img {width: 100%;}
#contentsAll .relativeArea {position: relative;}


#Contents .scrollFade.done {opacity: 1;transform: translate(0, 0);}
#Contents .scrollFade {opacity: 0;transform: translateY(100px);transition: all .8s;}
#Contents .fade {transition: all 2s;opacity: 0;visibility: hidden;transform: translate(0px, 0px);}
#Contents .fadein {opacity: 1;visibility: visible;transform: translate(0px, 0px);} 
#Contents .loadFade{animation:fadeIn ease 2s;}
@keyframes fadeIn{
    from{opacity: 0;}
    to{opacity: 1; }
}

#Contents .loadFade.done::after{width: 100% !important;}
#contents .loadFade::after {width: 0;transition: all .6s;}

/* ========= font ========= */

#contentsAll .Noto {
    font-family: noto-sans,sans-serif;
    font-weight: 300;
    font-style: normal;
}

#contentsAll .UsualL {
    font-family: usual,sans-serif;
    font-weight: 300;
    font-style: normal;
}

#contentsAll .UsualR {
    font-family: usual,sans-serif;
    font-weight: 400;
    font-style: normal;
}

#contentsAll .UsualR li a {
    font-weight: 400;
    font-style: normal;
}

#contentsAll .UsualM {
    font-family: usual,sans-serif;
    font-weight: 600;
    font-style: normal;
}

p.contentsCredit {
    margin: 0px;
    /* font-size: 1.6rem; */
    overflow: hidden;
}

/*************************************SP****************************************/
@media screen and ( max-width:560px ) {

    #contentsAll .pcOnly {display: none;}
    .footer .footer-inner {margin: 0 !important;}
    
    
    #contentsAll {width: calc(750*(100vw/750)); margin: 0 auto;overflow: hidden;}

    /*==========================
    contentsAll
    ==========================*/


    /* .spOnly{
        display: block;
    } */

    .pcOnly{
        display: none;
    }

    .mainVisualArea .mainImg p.contentsCredit {
        margin-top: calc(18 *(100vw /750));
        margin-left: calc(40 *(100vw /750));
        width: 100%;
    }

    p.contentsCredit {
        font-size: calc(24 *(100vw /750));
        margin-top: calc(30 *(100vw /750));
        width: calc(600 *(100vw /750));
        text-align: left;
    }

    p.contentsCredit ._slash{
      font-weight: 300;
      margin-left: calc(8 *(100vw /750));
  }

    .mouse_ImgArea {
        width: calc(600 *(100vw /750));
    }

    #mainVisualArea .mouse_ImgArea {
        width: calc(750 *(100vw /750)) !important;
        overflow-y: hidden;
    }


    /*==========================
    mainVisualArea
    ==========================*/

    .mouse_ImgArea .spOnly {
        position: relative;
    }

    .main_logo {
        position: absolute;
        top: 34.7%;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        z-index: 1;
    }
    #moji3_sp {
        margin: calc(9 *(100vw /750)) 0 0 calc(20 *(100vw /750));
    }

    .mainVisualArea .box1 {
        width: calc(605 *(100vw /750));
        margin: calc(106 *(100vw /750)) auto 0;
    }

    .mainVisualArea .box2 {
        width: calc(603 *(100vw /750));
        margin: calc(106 *(100vw /750)) auto 0;
    }

    .main_textArea {
        text-align: center;
    }
    
    .main_title {
        font-size: calc(15 *(100vw /750));
        margin-top: calc(50.4 *(100vw /750));
        padding-bottom: calc(2 *(100vw /750));
    }

    h1.slide-in_inner.downAnimeInner.main_title.UsualM.slideAnimeUpDown {
        margin-top: calc(106 *(100vw /750));
        font-size: calc(30 *(100vw /750));
    }

    .main_text{
        margin-top: calc(36 *(100vw /750));
        line-height: 2;
        letter-spacing: 0.03em;
        margin-left: calc(19 *(100vw /750));
    }
    .mous_text {
        font-size: calc(18 *(100vw /750));
        margin-top: calc(87.6 *(100vw /750));        
    }

    .mous_text .mous_text02{
        font-weight: 300;
        padding-bottom: calc(2 *(100vw /750));
    }

    .main_textArea {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hover-click.mainImg{
        width: calc(750 *(100vw /750));
    }

    /*==========================
    flexArea
    ==========================*/

    .box1 {
        width: calc(600 *(100vw /750));
        margin: calc(110 *(100vw /750)) auto 0;
    }

    .box2 {
        width: calc(604 *(100vw /750));
        margin: calc(82 *(100vw /750)) auto 0;
    }

    /*.slide-in.downAnime.moji2.slideAnimeDownUp {
        margin-top: calc(42 *(100vw /750));
    }*/

    /*==========================
    contentsAll
    ==========================*/

    .contents1 .hover-click,.contents2 .hover-click,
    .contents3 .hover-click,.contents4 .hover-click,
    .contents5 .hover-click,.contents6 .hover-click {
        text-align: center;
    }

    .hover-click {
        width: calc(600 *(100vw /750));
        margin: auto;
    }

    .mainVisualArea .hover-click img {
        width: calc(300 *(100vw /750));
    }

    .hover-click{
        width: calc(600 *(100vw /750));
    }

    /*==========================
    Contents1
    ==========================*/

    .contents1.fade{
        margin-top: calc(50 *(100vw /750));
    }

    .contents1 .mouse1 {
        /* margin: calc(20 *(100vw /750)) auto 0; */
        margin-top: calc(20 *(100vw /750));
    }

    .slide-in.downAnime.moji3.pcOnly.slideAnimeDownUp{
        text-align: left;
    }

    .slide-in.downAnime.moji4.slideAnimeDownUp {
        width: calc(600 *(100vw /750));
text-align: left;
line-height: 1.9;
    }
    
    /*==========================
    Contents2
    ==========================*/
    .contents2.fade{
        margin-top: calc(150 *(100vw /750));
    }
    .hover-click.mouse3,
    .hover-click.mouse4,
    .hover-click.mouse7,
    .hover-click.mouse8,
    .contents4.fade,
    .hover-click.mouse11,
    .hover-click.mouse12,
    .contents5.fade,
    .hover-click.mouse15,
    .hover-click.mouse16 {
        margin-top: calc(190 *(100vw /750));
    }

    /*==========================
    Contents3
    ==========================*/
    .contents3.fade {
        margin-top: calc(200 *(100vw /750));
    }
    .hover-click.mouse6,
    .hover-click.mouse10,
    .hover-click.mouse14 {
        margin-top: calc(260 *(100vw /750));
    }

    /*==========================
    Contents6
    ==========================*/
    .contents6 {
        margin-top: calc(238 *(100vw /750));
    }

    /*==========================
    Contents7
    ==========================*/

    .contents7 {
        width: calc(650 *(100vw /750));
        margin: calc(50 *(100vw /750)) auto 0;
        position: relative;
    }

    /*==========================
    Click - moji
    ==========================*/

    .slide-in.downAnime.moji16.slideAnimeDownUp{
        line-height: 1.9;
    }

    .item_neme {
        font-size: calc(22 *(100vw /750));
        font-weight: 300;
        letter-spacing: 0.03em;
    }

    .item_neme01 {
        font-size: calc(20 *(100vw /750));
    }

    .txtheight {
        padding-bottom:calc(2 *(100vw /750));
    }

    .item_tax {
        font-size: calc(24 *(100vw /750));
        font-weight: 300;
        font-family: 'Noto Sans', sans-serif;
        letter-spacing: 0.03em;
    }


    /*==========================
    contents6
    ==========================*/
    .contents6 {
        margin-top: calc(190 *(100vw /750));
        position: relative;
    }

    .contents6 {
        margin-top: calc(252 *(100vw /750));
        position: relative;
        margin-bottom: calc(230 *(100vw /750));
    }

    .btm_Img img {
        width: calc(256 *(100vw /750));
    }

    .btm_textArea{
        width: 100%;
        margin-bottom: calc(130 *(100vw /750));
    }
    .btm_textArea .main_text{
      margin: 0 auto;
      text-align: center;
      display: block;
    }

    .contentsbottom{
        text-align: center;
        width: calc(356*(100vw/750));
        margin: auto;
    }
    .contentsbottom .btm_name{
      margin: calc(100*(100vw/750)) auto calc(240*(100vw/750));
      line-height: 1.78;
    }
    
    .contentsbottom .menu_name li {
        font-weight: 400;
        font-style: normal;
    } 



    .footer {
        padding: calc(77 * (100vw / 750)) 0 calc(90 * (100vw / 750));
        text-align: center;
    }
    .footer .footer-nav .pagetop {
        margin: 0 calc(40 * (100vw / 750)) calc(90 * (100vw / 750));
    }

    .footer .footer-nav .pagetop {
        padding-top: calc(40 * (100vw / 750));
    }

    
}


/*************************************タブレット****************************************/
@media screen and (max-width: 2100px) and (min-width: 561px) {
    html {font-size: calc(10* (100vw / 2100)) !important;}

}



/*************************************PC****************************************/

@media only screen and (min-width: 561px) {
    
    #contentsAll .spOnly {display: none;}
    .main-area {overflow-x: hidden;}
    .main-area::after {margin: 0 auto !important;}

    #contentsAll .contentsInner {width: 120rem;margin: 8rem auto 0;}

    .contents-inner{
        width: 210rem;
        margin: 0 auto 0;
    }

    #contentsAll {
        overflow-x: hidden;
    }

    img{ 
        width: 100%;
    }

    #contentsAll p {
        margin: 0px;
    }

    .btm_name.spOnly {
        display: none;
    }

    /*==========================
    contentsAll
    ==========================*/

    .mouse_ImgArea {
        width: 72.5rem;
        margin: 0 auto;
    }

    .main_textArea {
        text-align: center;
        margin-top: 12.4rem;
    }

    .item_neme {
        font-size: 1.6rem;
    }
    .item_neme01 {
        font-size: 1.4rem;
    }
    .txtheight {
        padding-bottom:0.2rem;
    }
    .item_tax {
        font-size: 1.7rem;
    }

    ._slash {
        font-size: 1.6rem;
        font-weight: lighter;
        margin-left: 0.4rem;
    }

    p.contentsCredit {
        letter-spacing: 0.038em;
    }

    .contentsCredit {
        text-align: left;
    }

    /*==========================
    mainVisualArea
    ==========================*/

    .mainVisualArea .flexArea {
        width: 150.6rem;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }

    .mainVisualArea .flexArea .box1,
    .mainVisualArea .flexArea .box2 {
        width: 72.5rem;
    }

    .main_textArea {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .main_title {
        font-size: 2.3rem;
        padding-bottom: 0.2rem;
    }

    .main_text {
        font-size: 1.4rem;
        margin-top: 3.4rem;
        line-height: 2;
        letter-spacing: 0.03em;
    }

    .mous_text {
        margin-top: 6rem;
        font-size: 1.5rem;
        letter-spacing: 0.04em;        
    }

    .mous_text .mous_text01{
        font-weight: 300;
        padding-bottom: 0.2rem;
    }

    .mainVisualArea .box1 {
        margin-left: -0.3rem;
    }
    .mainVisualArea .box2 {
        margin-right: 0.2rem;
    }
    

    /*==========================
    hover-click
    ==========================*/

    .hover-click {
        width: 72.5rem;
        text-align: center;
        margin: 0 auto 0;
    }

    .hover-click img {
        width: 72.5rem;
    }

    .hover-click{
        position: relative;
    }
    .hover-click > a{
        display: block;
        width: 100%;
        color: #000;
        font-size: 14px;
        text-decoration: none;
    }
    .hover-click > div{
        text-align: left;
        margin-top: 1.5rem;
        width: 100%;
    }

    .hover-click .slide-in_inner.downAnimeInner.contentsCredit{
        text-align: left;
    }


    /*==========================
    flexArea
    ==========================*/

    .flexArea {
        width: 150.8rem;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }
    .box2 {
        width: 72.4rem;
    }

    /*==========================
    Contents1
    ==========================*/

    .contents1.fade {
        margin-top: 4rem;
    }

    .contents1 .mouse1 {
        margin-top: 10.5rem;
    }

    .slide-in.downAnime.moji3.pcOnly.slideAnimeDownUp{
        text-align: left;
    }

    .slide-in.downAnime.moji4.slideAnimeDownUp {
        text-align: left;
        margin-top: 1.8rem;
    }
    
    /*==========================
    Contents2
    ==========================*/
    .contents2.fade {
        margin-top: 20rem;
    }

    .hover-click.mouse3 {
        margin-top: 19rem;
    }

    .hover-click.mouse4 {
        margin-top: 19.8rem;
    }

    .slide-in.downAnime.moji5.slideAnimeDownUp{
        text-align: left;
        margin-top: 1.2rem;
    }
    .slide-in.downAnime.moji6.slideAnimeDownUp,
    .slide-in.downAnime.moji7.slideAnimeDownUp {
        text-align: left;
        margin-top: 1.8rem;
    }

    
    /*==========================
    Contents3
    ==========================*/

    .contents3.fade {
        margin-top: 19.8rem;
    }
    .hover-click.mouse6 {
        margin-top: 19rem;
    }
    .hover-click.mouse7 {
        margin-top: 19.4rem;
    }
    img.mouse7 {
        margin-left: -2.6rem;
    }
    .hover-click.mouse8 {
        margin-top: 21rem;
    }
    img.mouse8 {
        margin-left: -0.6rem;
    }

    .slide-in.downAnime.moji9.slideAnimeDownUp{
        text-align: left;
        margin-top: 1.8rem;
    }
    .slide-in.downAnime.moji10.slideAnimeDownUp{
        text-align: left;
        margin-top: 1.8rem;
        margin-left: -1.4rem;
    }
    .slide-in.downAnime.moji11.slideAnimeDownUp {
        text-align: left;
        margin-top: 1.8rem;
        margin-left: -0.5rem;
    }


    /*==========================
    Contents4
    ==========================*/

    ._textArea p.UsualR {
        font-size: 1.4rem;
    }

    .contents4.fade {
        margin-top: 19rem;
    }
    .hover-click.mouse10 {
        margin-top: 18.6rem;
    }
    img.mouse10 {
        margin-left: 0.4rem;
    }
    .hover-click.mouse11 {
        margin-top: 20.2rem;
    }
    img.mouse11 {
        margin-left: 0.4rem;
    }
    .hover-click.mouse12 {
        margin-top: 19rem;
    }
    img.mouse12 {
        margin-left: -0.7rem;
    }

    .slide-in.downAnime.moji12.slideAnimeDownUp{
        text-align: left;
        margin-top: 1.8rem;
        margin-left: 0.4rem;
    }
    .slide-in.downAnime.moji13.slideAnimeDownUp{
        text-align: left;
        margin-top: 1.8rem;
        margin-left: 0.4rem;
    }

    .slide-in.downAnime.moji14.slideAnimeDownUp{
        text-align: left;
        margin-top: 1.8rem;
        margin-left: -0.6rem;
    }


    /*==========================
    Contents5
    ==========================*/
    .contents5.fade {
        margin-top: 18.8rem;
    }
    .hover-click.mouse14 {
        margin-top: 20rem;
    }
    .hover-click.mouse15 {
        margin-top: 19.6rem;
    }
    .hover-click.mouse16 {
        margin-top: 19rem;
    }

    .slide-in.downAnime.moji15.slideAnimeDownUp{
        text-align: left;
        margin-top: 1.8rem;
        margin-left: -0.1rem;
    }
    .slide-in.downAnime.moji16.slideAnimeDownUp,
    .slide-in.downAnime.moji17.slideAnimeDownUp{
        text-align: left;
        margin-top: 1.8rem;
    }

    /*==========================
    Contents6
    ==========================*/

    .contents6 {
        width: 158rem;
        margin: 28.7rem auto 0;
        position: relative;
    }
    img.mouse17 {
        margin-left: 0.6rem;
    }

    .slide-in.downAnime.moji18.slideAnimeDownUp{
        text-align: left;
        margin-top: 1.8rem;
        margin-left: 0.5rem;
    }

    .contents6 span.item_tax.Noto {
        margin-left: 0.3rem;
    }
        
    span.slide-in.downAnime.btm_textArea.slideAnimeDownUp {
        text-align: center;
        display: block;
        margin-top: 14rem;
    }



    /*==========================
    check_btn
    ==========================*/
    .gnavi.check_btn.UsualM {
        margin: 10.5rem  0 0 0.1rem;
        text-align: center;
        font-size: 1.98rem;
        letter-spacing: 0.006em;
    }

    /*==========================
    Contents5
    ==========================*/
    
    .btm_Img {
        width: 43rem;
        margin: 8.27rem auto 0;
    }

    /*==========================
    Click - moji
    ==========================*/
    .mouse_ImgArea {
        letter-spacing: 0.05em;
    }

    #contentsAll #moji2 {
        margin-top: 1.8rem;
        letter-spacing: 0.03em;
    }

    #contentsAll .moji3{
    margin-top: 1.9rem;
    letter-spacing: 0.05em;
    }

    #contentsAll span.item_neme.UsualL:nth-child(1) {
        margin-left: 0.14rem;
    }

    #contentsAll #moji4{
        margin-top: 1.7rem;
        letter-spacing: 0.05em;
    }

    #contentsAll #moji5{
        margin-top: 1.37rem;
    }

    #contentsAll #moji6{
        margin-top: 1.7rem;
    }

    #contentsAll #moji7{
        margin-top: 1.8rem;
    }

    #contentsAll #moji9{
        margin-top: 1.8rem;
    }

    #contentsAll #moji10{
        margin-top: 1.8rem;
        margin-left: -1.3rem;
    }

    #contentsAll #moji11{
        margin-top: 1.8rem;
        margin-left: -0.4rem;
    }

    #contentsAll #moji13{
        margin-top: 1.8rem;
        margin-left: 0.4rem;
    }

    #contentsAll #moji14{
        margin-top: 1.8rem;
        margin-left: 0.4rem;
    }

    #contentsAll #moji15{
        margin-top: 1.8rem;
        margin-left: -0.5rem;
    }

    #contentsAll #moji17{
        margin-top: 1.9rem;
    }

    #contentsAll #moji17 ._slash {
        margin-left: 0;
    }

    #contentsAll #moji18{
        margin-top: 1.7rem;
    }

    #contentsAll #moji19{
        margin-top: 1.8rem;
    }

    #contentsAll #moji20{
        margin-top: 1.8rem;
        margin-left: 0.5rem;
    }
    .btm_Img img {
        margin-left: 0.3rem;
    }
    .contentsbottom {
        position: relative;
        width: 158rem;
        margin: auto;
    }
    .contentsbottom .btm_name{
        text-align: right;
        position: absolute;
        top: 84rem;
        right: 0;
        line-height: 2.18;
        font-size: 1.1rem;
        z-index: 10;
      }
    .contentsbottom .btm_name .menu_name li {
        font-weight: 400;
    }

    /*==========================
    footer
    ==========================*/
    
    .footer {
        padding: 0 0 6rem;
        text-align: center;
    }

    .footer .pagetop {
        margin: 0 auto -0.9rem;
        border: none;
    }

    .footer .pagetop a {
        margin-top: 2.4rem;
    }
    
    /* hoveranimation */
    .hover-click > .slide-in p{
        transition: opacity 0.8s;
        opacity: 0!important;
    }
    .hover-click:hover > .slide-in p{
        opacity: 1!important;
    }
    


}

@media screen and (max-width: 1580px) and (min-width: 561px) {
 _:lang(x)::-internal-media-controls-overlay-cast-button, .contentsbottom .btm_name{
        transform: scale(0.8);
        transform-origin: 100% 0;
 }
}