@media screen and (max-width:700px) {

    .scrolldown1 {
        position: absolute;
        left: 50%;
        bottom: 10px;
        height: 50px;

    }

    /*Scrollテキストの描写*/
    .scrolldown1 span {
        /*描画位置*/
        position: absolute;
        left: -15px;
        top: 390px;
        /*テキストの形状*/
        color: black;
        font-size: 0.7rem;
        letter-spacing: 0.05em;
        writing-mode: horizontal-tb;
    }

    /* 線の描写 */


    .scrolldown1::after {
        content: "";
        /*描画位置*/
        position: absolute;
        top: 410px;
        /*線の形状*/
        width: 0.2px;
        height: 50px;
        background: red;
        /*線の動き1.4秒かけて動く。永遠にループ*/
        animation: pathmove 1.4s ease-in-out infinite;
        ;
        opacity: 0;
    }


    /*高さ・位置・透過が変化して線が上から下に動く*/
    @keyframes pathmove {
        0% {
            height: 25px;
            top: 405px;
            opacity: 0;
        }

        33% {
            height: 25px;
            top: 440px;
            opacity: 1;
        }

        100% {
            height: 25px;
            top: 405px;
            opacity: 0;
        }
    }

    .headernav {
        position: fixed;
        top: 0px;
        right: -1000px;
        transition: all 1s ease;
        background-image: url("../img/manu_maru.png");
        background-size: 150%;
        background-position: bottom left;

    }

    .headernav ul li {
        opacity: calc(1.0);

    }

    .open .headernav {
        top: 0px;
        right: 0;

        transition: all 0.8s ease;
    }

    .fa-solid.fa-bars {
        display: block;
        color: #CF2520;

    }

    .fa-solid.fa-xmark {
        display: none;
    }

    .open .fa-solid.fa-bars {
        display: none;

    }

    .open .fa-solid.fa-xmark {
        display: block;
        color: #CF2520;

    }



















    body {
        font-size: 12px;
    }

    #main {
        height: 400px;
        background-size: 35%;
    }

    #main h2 {
        font-size: 2em;
        margin-bottom: -50px;
        text-align: center;
    }

    #main::before {
        background-size: 100%;
    }

    .aboutoya {
        height: 700px;
        margin-top: 300px;
    }

    #about {
        width: 300px;
        height: 700px;
        margin-top: 20px;
        grid-template-columns: 1fr;
        grid-template-rows: 400px 300px;
    }


    .yokoji {
        animation: yoko 10s ease-in-out;
    }


    @keyframes yoko {
        0% {
            top: 0;
            opacity: 0;
            transform: translate(0, 10px);

        }

        50% {
            top: 100px;
            opacity: 1;

        }
    }

    .yoko p {
        animation: yokop 10s ease-in-out;
    }

    @keyframes yokop {
        0% {
            top: 0;
            opacity: 0;
            transform: translate(0, 10px);

        }

        50% {
            top: 100px;
            opacity: 1;

        }
    }


    .tatejinooya {
        grid-row-start: 1;
    }



    .tateji p {
        margin-left: 0;

    }

    #about p {
        padding: 0;
    }

    .articlepiar {
        height: 700px;
    }

    #article {
        width: 300px;
        height: 460px;
        margin: 0 auto;
    }

    #article h2 {
        background-size: 20%;

        background-position: bottom 13px left 12px;

    }

    .sakuhin {
        height: 85%;

    }

    .sakuhinmidashi {
        width: 300PX;

    }

    #article .sakuhinmidashi section {
        WIDTH: 300PX;
    }

    .zikan {
        padding: 0;
        margin-top: 0;

    }

    .more {
        margin-top: 100px !important;
    }

    .zengo p {
        padding: 30px 30px;
    }

    #prof {
        background-position: bottom -30px right 0;

    }

    .cp {
        width: 300px;
        height: 400px;
    }

    .cp h2 {
        background-size: 25%;
        background-position: bottom 13px left 10px;

    }

    .cp p {
        width: 300px;
    }

    footer {
        height: 150px;
        background-color: whitesmoke;
    }

    /* コラム一覧ページ */
    .koramu {
        /* height: 770px; */
    }

    .koramu #article h2 {
        background-position: bottom 17px left 14px;

    }

    /* 記事ページ */
    .kobetsukiji {
        width: 320px;
        margin: 0 auto;
    }

    .kobetsukiji #article {
        margin: 0;
    }

    .kobetsukiji #article h2 {
        background-position: bottom 17px left 14px;

    }

    .zenbun {
        width: 320px;
    }

    .zenbun h3 {
        margin: 50px;
        padding-top: 3px;
    }

    .gaku {
        width: 320px;
        height: 300px;
    }

    .gaku img {
        width: 400px;
    }

    .naiyo {
        font-size: 1.2em;
    }

    /* 問い合わせページ */
    #toiawase {
        width: 300px;
    }

    #toiawase h2 {
        background-size: 20%;
        background-position: bottom 19px left 16px;
    }


    .toiawasetyui {
        width: 250px;
        margin: 0 auto;

    }

    #contact {
        margin-top: 30px;
        grid-template-columns: 1fr;
    }

    .form1 {
        text-align: center;
    }

    input[type="text"] {
        height: 20px;
        width: 250px;
    }

    textarea {
        border: none;
        resize: none;
        width: 250px;
        height: 140px;
    }
}