@charset "utf-8";

.pc {
    display: block;
}

.sp {
    display: none;
}


@media (max-width: 767.98px) {

    .sp {
        display: block;
    }

    .pc {
        display: none;
    }

}

.load-fade {opacity : 0; transition : all 2s;}
.load-up{opacity: 0; transform: translateY(100px);
    transition: all 2s;}
.load-up.done, .load-fade.done{opacity : 1; transform : translate(0, 0);}


html {
    background: #f1f1f1;
}

body {
    background: #f1f1f1;
    font-family: "Noto Sans JP", sans-serif;
}

#header {
    background: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      opacity: 1;
      visibility: visible;
      transition: opacity 0.6s ease, visibility 0.6s ease, transform 0.4s ease;
      z-index: 1000;
}


/* ¥Ø¥Ã¥À©`¤òëL¤¹¥¯¥é¥¹ */
.header--hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-80px);
}

/*.header--hidden .logo {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-40px);

}
*/
#container {
    width: 100%;
    margin: 0;
    padding: 0;
}

footer {
    background: #868f93;
}

.footer__copyright {
  color:#282e30;
}


.main {
    width:100%;
    margin:0 auto;
    position:relative;
}

.menu {
    position:absolute;
    right:0;
    top:100px;
}


.menu ul li a {
    font-family: "League Spartan", sans-serif;
    font-weight:300;
    font-size:1.1rem;
}


.mainTitle {
    max-width: 540px;
    margin:12rem auto 8rem;
}


.title {
    font-family: "Cormorant Garamond", serif;
    font-size: 3.6rem;
    line-height: 1;
    text-align: center;
    margin: 0 0 .8rem 0;
    color: #000;
}

.copy {
    font-size: 1.4rem;
    font-family: "League Spartan", sans-serif;
    text-align: center;
    font-weight: 300;
    margin: 0 0 1.6rem 0;
    color: #000;
}

.mv {
    max-width:540px;
    margin:0 auto;
}

.mainCopy {
    width:100%;
    max-width:540px;
    font-family: "Shippori Mincho", serif;
    font-size:1.25rem;
    line-height:3.2rem;
    margin:12rem auto 12rem;
}


.section {
    width: 90%;
    max-width:1280px;
    margin: 20rem auto;
}

.section h2 {
    font-family: "Cormorant Garamond", serif;
    font-size:3rem;
    text-align: center;
    margin-top:8rem;
    margin-bottom:8rem;
}

.row {
    margin-top: 20rem;
    margin-bottom: 20rem;
}


.row1 {
    width: 50%;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}



.row2 {
    width: 60%;
    max-width: 768px;
    margin-right: 40%;

}

.row3 {
    width: 40%;
    max-width: 512px;
    margin-left: 50%;
    margin-right: 10%;
}


.row4 {
    width: 90%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 10%;
    margin-left: auto;
    margin-right: auto;
}

.row5 {
    width: 40%;
    max-width: 512px;
    margin-left: 60%;
}

.row5 .col {
    place-content: top;
}



.row6 {
    width: 80%;
    max-width: 1024px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
    margin-left: auto;
    margin-right: auto;
}


.row7 {
    width: 40%;
    max-width: 512px;
    margin-left: auto;
    margin-right: auto;
}


.row8 {
    width: 40%;
    max-width: 512px;
    margin-left: 10%;
    margin-right: 50%;
}




.credit .list {
    line-height: 1.6;
    font-size: 1rem;
    font-family: "League Spartan", sans-serif;
    font-weight: 300;
    margin: .8rem 0 1.6rem 0;
}






/* ¥¹¥Þ¥Û */

@media (max-width: 767.98px) {




    .mainTitle {
        display:grid;
/*        grid-template-rows: 1fr 1fr;*/
        height:50vh;
        align-self: center;
        margin:0 0 25vh 0;
    }


    .title {
        font-family: "Cormorant Garamond", serif;
        font-size: 3.6rem;
        line-height: 1;
        text-align: center;
        margin: 0 0 .8rem 0;
    }

    .copy {
        font-size: 1.4rem;
        font-family: "League Spartan", sans-serif;
        text-align: center;
        font-weight: 300;
        margin: 0 0 1.6rem 0;
    }



    .main {
        width: 90%;
        margin: 12rem auto;
    }

    .section {
        width: 90%;
        margin: 12rem auto;
    }

    .row {
        margin-top: 10rem;
        margin-bottom: 10rem;
    }

    .credit .list {
        font-size:.76rem;
    }


    .mainCopy {
        font-size:1rem;
        line-height:2.8rem;
        margin:12rem auto 12rem;
    }



    /*  ¥»¥ó¥¿¥ê¥ó¥°  */
    .row1 {
        width:80%;
        margin:0 auto;
    }

    /*  ×ó¼Ä¤»  */
    .row2 {
        width: 80%;
        margin-right: 20%;

    }

    /*  ÓҼĤ»  */
    .row3 {
        width: 50%;
        margin-left: 40%;
        margin-right: 10%;
    }


    /*  ¥»¥ó¥¿¥ê¥ó¥° - 2¥«¥é¥à  */
    .row4 {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 5%;
        margin-left: auto;
        margin-right: auto;
    }


    .row5 {
        width: 60%;
        margin-left: 40%;
    }


    .row6 {
        width: 100%;
        grid-column-gap: 5%;
        margin-left: auto;
        margin-right: auto;
    }

    .row7 {
        width: 60%;
        margin-left: auto;
        margin-right: auto;
    }



    .row8 {
        width: 60%;
        margin-left: 20%;
        margin-right: 20%;
    }




}

.btnBlock {
    width:90%;
    margin:0 auto 8rem;
}


.btnArea--comment {
    border-top:1px solid #000;
    padding:6.4rem 0;
}

.btnArea p {
    text-align: center;
    font-size:1.2rem;
    font-family: "Shippori Mincho", serif;
/*    font-weight:400;*/
    margin-bottom:1.6rem;
}

.btnArea {
    margin-bottom:6.4rem;
}

.btnArea a {
    display:block;
    width:100%;
    font-size:1rem;
    padding:.8rem 1.6rem;
    border-radius: 10rem;
    background: #282e30;
    color:#fff;
    max-width: 400px;
    text-align: center;
    margin-left:auto;
    margin-right:auto;
}

.btnArea a:hover {
    opacity:.7;
    transition:.7s;
}