@media(min-width:768px) {

    .container-fluid {
        padding: 50px 120px;
    }

    #splash-logo img {
        width: 50vw;
    }

    .top-wrapper {
        background-image: url(../images-up-md/md-top-background.png);
        height: 721px;
    }

    .g-nav-list {
        display: flex;
    }

    .g-nav-list span {
        font-size: 1.8vw;
        margin-right: 3.5vw;
        position: relative;
    }

    .g-nav-list li span:hover {
        cursor: pointer;
    }

    .g-nav-list li span::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: #ffffbf;
        transition: all 0.3s;
        transform: scale(0, 1);
        transform-origin: center top;
        display: inline-block;
    }

    .g-nav-list li span:hover::after {
        transform: scale(1, 1);
    }

    .top-area {
        left: 15.6vw;
    }

    .top-area p {
        font-size: 2.3vw;
        line-height: 3.5vw;
        margin-bottom: 1.5vw;
    }

    .top-area span {
        font-size: 3.7vw;
    }

    .openbtn,
    .box {
        display: none;
    }

    .contents-area {
        padding-top: 3vw;
        max-width: 1280px;
        margin: 0 auto;
    }

    h2 {
        font-size: 2.8vw;
    }

    .site-name {
        padding-top: 50px;

    }

    .demo-list {
        justify-content: space-around;
    }

    .demo-list p {
        font-size: 26px;
    }

    .demo-list li dt {
        overflow: hidden;
        border: solid 3px #b3b386;
        border-radius: 20px;
        line-height: 0;
        margin: 0 0 20px 0;
    }

    .demo-list li dt:hover {
        box-shadow: 2px 2px 7px gray;
    }

    .demo-list li dt img {
        transition: all 0.5s;
    }

    .demo-list li dt:hover img {
        transform: scale(1.1);
        cursor: pointer;
    }

    .pc-md {
        display: block;
    }

    .sp {
        display: none;
    }

    .coment {
        padding-top: 4vw;
    }

    .coment {
        position: relative;
    }

    .coment p {
        font-size: 1.2vw;
    }

    .coment p:first-child {
        text-align: center;
    }

    .coment p:nth-child(2) {
        padding-top: 1.6vw;
    }

    .my-photo {
        padding-top: 4vw;
        height: 100%;
        z-index: -2;
    }

    .top-sakura {
        position: absolute;
        top: 3.5vw;
        left: -2.3vw;
        width: 13.8vw;
        z-index: -1;
    }

    .middle-sakura {
        position: absolute;
        top: 10.1vw;
        right: 0;
        width: 11vw;
        z-index: -1;
    }

    .under-sakura {
        position: absolute;
        bottom: 1.5vw;
        right: 27.3vw;
        width: 6.5vw;
        z-index: -1;
    }

    footer {
        height: 6.3vw;
    }

    footer p {
        font-size: 1.4vw;
        line-height: 6.3vw;
        cursor: pointer;
    }

    .modal {
        padding-right: 0;
    }

    .modal-dialog {
        max-width: 80%;
        font-size: 1.25vw;
    }

    .modal-body {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .modal-header,
    .modal-body {
        padding-left: 100px;
        padding-right: 100px;
    }

    .modal-body p {
        margin: 0 0 50px 0;
    }
    
      
}