/*---------------------------------------
Header
-------------------------------*/
header {
    width: 100%;
    margin: 0 auto;
    position: static;
}

nav {
    display: flex;
    padding: 2.5% 0 2.5% 0;
}

nav a {
    text-align: center;
    width: 25%
}


/*---------------------------------------
Main
-------------------------------*/
/*-- mv --*/
#mv {
    padding: 5% 0 5% 0;
}

#mv h1 {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 2.5%;
}

#mv h1 img {
    width: 7.7%;
    filter: brightness(0) invert(1);
}

#mv h2 {
    text-align: center;
}


/*-- btn --*/
#btn {
    display: flex;
    padding: 0 5% 0 5%;
}

#btn button {
    width: 25%;
    border-radius: 0.5rem 0.5rem 0 0;
    border-top: 0.1rem #ffffff solid;
    border-right: 0.1rem #ffffff solid;
    border-left: 0.1rem #ffffff solid;
    margin: 0 1.25% 0 1.25%;
    padding: 5% 0 3.75% 0;
}

#btn button span {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 7.5%;
}

#btn button span img {
    width: 33%;
    filter: brightness(0) invert(1);
}

#btn button p {
    font-weight: 600;
}

.none {
    display: none;
}


/*-- message --*/
#message {
    background-color: #ffffff;
    padding: 10% 0 10% 0;
}
@media screen and (min-width: 750px) {
    #message {
        padding: 5% 0 5% 0;
    }
}

#message .imgbox {
    display: flex;
    justify-content: center;
    padding-bottom: 2.5%;
}

#message .imgbox img {
    width: 10%;
}

#message h2 {
    text-align: center;
    color: #7cbfd6;
    margin-bottom: 5%;
}

#message p {
    text-align: center;
    line-height: 2;
    color: #2b2b2b;
}


/*-- price --*/
#price {
    background-color: #ffffff;
}

#price .text {
    padding: 5%;
}

#price .text .info_0 {
    padding-bottom: 7.5%;
}

#price .text .info_0 h2 {
    color: #2b2b2b;
    border-bottom: 0.05rem #2b2b2b solid;
    margin-bottom: 0.75%;
}

#price .text .info_0 p {
    line-height: 1.5;
    color: #2b2b2b;
}

#price .infos_2 {
    padding: 0;
}

#price .infos_2 .info {
    border: 0.05rem #7cbfd6 solid;
    background-color: #f8f8f8;
    margin-bottom: 2.5%;
    border-radius: 0.5rem;
}

#price .infos_2 .info h3 {
    border-radius: 0.5rem 0.5rem 0 0;
    background-color: #7cbfd6;
    padding: 2.5%;
}

#price .infos_2 .info .box {
    border-radius: 0 0 0.5rem 0.5rem;
    padding: 5%;
}

#price .infos_2 .info .box span {
    color: #2b2b2b;
}

#price .infos_2 .info .box h4 {
    color: #2b2b2b;
    border-bottom: 0.05rem #2b2b2b solid;
    margin-bottom: 1.25%;
    padding-bottom: 1.25%;
}

#price .infos_2 .info .box p {
    line-height: 1.5;
    color: #2b2b2b;
}


/*-- contents --*/
#contents {
    background-color: #ffffff;
}

#contents .infos {
    padding: 5%;
}

#contents .infos .info_0 {
    padding-bottom: 7.5%;
}

#contents .infos .info_0 h2 {
    color: #2b2b2b;
    border-bottom: 0.05rem #2b2b2b solid;
    margin-bottom: 0.75%;
}

#contents .infos .info_0 p {
    line-height: 1.5;
    color: #2b2b2b;
}

#contents .infos .info {
    border: 0.05rem #7cbfd6 solid;
    background-color: #f8f8f8;
    margin-bottom: 2.5%;
}

#contents .infos .info h3 {
    background-color: #7cbfd6;
    padding: 2.5%;
}

#contents .infos .info .box {
    padding: 5%;
}

#contents .infos .info .box h4 {
    color: #2b2b2b;
    border-bottom: 0.05rem #2b2b2b solid;
    margin-bottom: 1.25%;
    padding-bottom: 1.25%;
}

#contents .infos .info .box span {
    color: #2b2b2b;
}

#contents .infos .info .box p {
    color: #2b2b2b;
}


/*-- trial --*/
#trial {
    background-color: #ffffff;
}

#trial .infos {
    padding: 5%;
}

#trial .infos .info_0 {
    padding-bottom: 7.5%;
}

#trial .infos .info_0 h2 {
    color: #2b2b2b;
    border-bottom: 0.05rem #2b2b2b solid;
    margin-bottom: 0.75%;
}

#trial .infos .info_0 p {
    line-height: 1.5;
    color: #2b2b2b;
}

#trial .infos .info {
    border-radius: 1rem 0 1rem 0;
    border: 0.05rem #7cbfd6 solid;
    background-color: #f8f8f8;
    margin-bottom: 2.5%;
    padding-bottom: 2.5%;
}

#trial .infos .info h3 {
    border-radius: 1rem 0 1rem 0;
    background-color: #7cbfd6;
    margin-bottom: 2.5%;
    padding: 2.5%;
}

#trial .infos .info .set {
    display: flex;
    align-items: end;
    padding: 2.5% 5% 2.5% 5%;
}

#trial .infos .info h4 {
    flex: 1.5;
    color: #2b2b2b;
}

#trial .infos .info p {
    flex: 8.5;
    color: #2b2b2b;
}

#trial .infos .info span {
    color: #2b2b2b;
}


/*-- contact --*/
#contact {
    background-color: #ffffff;
}

#contact .infos {
    padding: 5% 5% 5% 5%;
}

#contact .infos .info_0 {
    padding: 5%;
}

#contact .infos .info_0 h2 {
    color: #2b2b2b;
    border-bottom: 0.05rem #2b2b2b solid;
    margin-bottom: 0.75%;
}

#contact .infos .info_0 p {
    line-height: 1.5;
    color: #2b2b2b;
}

#contact .infos .info {
    padding: 5%;
}

#contact .infos .info h3 {
    color: #7cbfd6;
    padding: 1.25%;
}

#contact .infos .info a {
    color: #2b2b2b;
}

#contact .infos .info a img {
    width: 10%;
    padding-bottom: 2.5%;
}


/*-- youtube --*/
#youtube {
    padding: 5%;
}

#youtube h2 {
    display: inline-block;
    color: #7cbfd6;
    background-color: #ffffff;
    margin-bottom: 1.25%;
    padding: 1.25%;
}

#youtube .youtubebox {
    width: 100%;
    aspect-ratio: 16 / 9;
}
#youtube .youtubebox iframe {
    width: 100%;
    height: 100%;
}


/*---------------------------------------
Animation
-------------------------------*/
/* Bigger */
.off_bigger {
    transform: scale(0);
}
.bigger {
    animation: bigger 0.9s ease-in-out forwards;
}
@keyframes bigger {
    0% {
      transform: scale(0);
    }
    50% {
        transform: scale(0);
    }
    75% {
        transform: scale(1.25);
    }
    100% {
        transform: scale(1);
    }
}