@media screen and (min-width: 416px) {
    body {
        width: 100%;
        height: 100%;
        background-color: #fefefe;
        margin: 0;
    }

    .headline-wrap {
        display: flex;
        position: relative;
        width: 100%;
        height: 700px;
    }

    .headline {
        width: 50px;
        height: 700px;
        /* 水平方向の中央揃え */
        margin: 0 auto;
        position: relative;
    }

    .info {
        position: absolute;
        width: 30%;
        height: 500px;
        top: 100px;
        right: 0;
        z-index: 10;
    }

    .info h2 {
        font-family: "Sawarabi Mincho";
    }

    .info p {
        font-family: "Sawarabi Mincho";
    }

    .ka {
        margin-top: 100px;
        font-size: 45px;
        font-family: "Hannari";
    }

    .ro {
        font-size: 45px;
        font-family: "Hannari";
    }

    .ya {
        font-size: 45px;
        font-family: "Hannari";
    }

    .hana {
        font-size: 50px;
        font-family: "Sawarabi Mincho";
        color: #f0fbd2;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: rgb(140, 136, 136);
    }

    /* ふわっと表示 */
    /* 右からふわっと現れる */
    /* jQueryで追加・削除 */
    .fadeInRight {
        -webkit-animation-name: fadeInRightAnime;
        animation-name: fadeInRightAnime;
        /*アニメーションの名前*/
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
        /*アニメーションの時間を1秒に設定*/
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        /*アニメーション実行後、要素が表示されたままにする*/
    }

    @-webkit-keyframes fadeInRightAnime {
        0% {
            opacity: 0;
            /*非表示*/
            -webkit-transform: translateX(100px);
            transform: translateX(100px);
            /*100px分横にずれる*/
        }

        100% {
            opacity: 1;
            /*表示*/
            -webkit-transform: translateX(0);
            transform: translateX(0);
            /*元の位置*/
        }
    }

    @keyframes fadeInRightAnime {
        0% {
            opacity: 0;
            /*非表示*/
            -webkit-transform: translateX(100px);
            transform: translateX(100px);
            /*100px分横にずれる*/
        }

        100% {
            opacity: 1;
            /*表示*/
            -webkit-transform: translateX(0);
            transform: translateX(0);
            /*元の位置*/
        }
    }

    .fadeInRightTrigger {
        opacity: 0;
        /*非表示*/
    }

    /* 左からふわっと現れる */
    /* jQueryで追加・削除 */
    .fadeInLeft {
        -webkit-animation-name: fadeInLeftAnime;
        animation-name: fadeInLeftAnime;
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }

    @-webkit-keyframes fadeInLeftAnime {
        0% {
            opacity: 0;
            -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }
    }

    @keyframes fadeInLeftAnime {
        0% {
            opacity: 0;
            -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }
    }

    .fadeInLeftTrigger {
        opacity: 0;
    }

    /* 下からふわっと現れる */

    /* jQueryで追加、削除 */
    .fadeUp {
        -webkit-animation-name: fadeUpAnime;
        animation-name: fadeUpAnime;
        /*アニメーションの名前*/
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        /*アニメーションの実行時間*/
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        /*アニメーション後、要素が表示されたままにする*/
    }

    @-webkit-keyframes fadeUpAnime {
        0% {
            opacity: 0;
            /*非表示*/
            -webkit-transform: translateY(100px);
            transform: translateY(100px);
            /*縦方向に100pxずらす*/
        }

        100% {
            opacity: 1;
            /*表示*/
            -webkit-transform: translateY(0);
            transform: translateY(0);
            /*元の位置*/
        }
    }

    @keyframes fadeUpAnime {
        0% {
            opacity: 0;
            /*非表示*/
            -webkit-transform: translateY(100px);
            transform: translateY(100px);
            /*縦方向に100pxずらす*/
        }

        100% {
            opacity: 1;
            /*表示*/
            -webkit-transform: translateY(0);
            transform: translateY(0);
            /*元の位置*/
        }
    }

    .fadeUpTrigger {
        opacity: 0;
        /*非表示*/
    }

    /* カレンダー */
    .calendarTitel {
        font-family: "Sawarabi Mincho";
        margin-left: 10%;
    }

    .calendar-p {
        font-family: "Sawarabi Mincho";
        margin-left: 10%;
    }

    .google-cal iframe {
        width: 100%;
        margin-left: 10%;
        max-width: 1100px;
        height: 700px;
    }

    /* スローガン */
    .slogan {
        margin-top: 15%;
        width: 100%;
        height: 300px;
        text-align: center;
        font-family: "Sawarabi Mincho";
    }

    /* メニュー */
    .menuTitel {
        font-family: "Sawarabi Mincho";
        margin-left: 5%;
    }

    .menu-wrap {
        width: 100%;
        height: 100%;
        display: flex;
    }

    .siatsu {
        width: 30%;
        height: 60%;
        margin: 0 5%;
        border-radius: 30px;
    }

    .menu-container {
        width: 60%;
        height: 100%;
        font-family: "Sawarabi Mincho";
        margin-left: 10%;
    }

    .menu-item {
        margin-bottom: 20px;
    }

    .menu-header {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        border-bottom: 2px solid #ddd;
        padding-bottom: 5px;
        margin-bottom: 10px;
    }

    .course-name {
        font-size: 1.4em;
        color: #333;
    }

    .price {
        font-size: 1.2em;
        color: #888;
    }

    .course-details {
        font-size: 1em;
        color: #666;
        padding-left: 10px;
    }

    .note {
        font-family: "Sawarabi Mincho";
        margin-left: 10%;
        font-size: 12px;
    }


    /* access */
    .accessTitel {
        margin-top: 10%;
        font-family: "Sawarabi Mincho";
        margin-left: 5%;
    }

    .access-wrap {
        width: 100%;
        height: 600px;
        display: flex;
    }

    .access {
        width: 30%;
        height: 500px;
        font-family: "Sawarabi Mincho";
        margin-left: 20%;
        margin-top: 0;
    }

    /* 横幅を指定するための要素 */
    .map-wrap {
        width: 40%;
        /* ここに横幅を指定 */
    }

    /* Google Mapを囲う要素 */
    .map {
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 75%;
        /* 比率を4:3に固定 */
    }

    /* Google Mapのiframe */
    .map iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* フッター */
    footer {
        background-color: #f0fbd2;
        text-align: center;
        bottom: 0;
    }

    .copyright p {
        margin: 0;
    }
}

/* *********************************************************** */

/* レスポンシブデザイン(スマホ版) */
@media screen and (max-width: 415px) {
    body {
        width: 100%;
        height: 100%;
        background-color: #fefefe;
        margin: 0;
    }

    h2 {
        font-family: "Sawarabi Mincho";
        margin: 5%;
    }

    .headline-wrap {
        width: 100%;
        height: 100%;
        margin-bottom: 20%;
    }

    .headline {
        width: 50px;
        height: 80%;
        /* 水平方向の中央揃え */
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 45%;
        margin-right: 0;
        position: relative;
    }

    .ka {
        margin-top: 100px;
        font-size: 45px;
        font-family: "Hannari";
    }

    .ro {
        font-size: 45px;
        font-family: "Hannari";
    }

    .ya {
        font-size: 45px;
        font-family: "Hannari";
    }

    .hana {
        font-size: 50px;
        font-family: "Sawarabi Mincho";
        color: #f0fbd2;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: rgb(140, 136, 136);
    }

    /* ふわっと表示 */
    /* 右からふわっと現れる */
    /* jQueryで追加・削除 */
    .fadeInRight {
        -webkit-animation-name: fadeInRightAnime;
        animation-name: fadeInRightAnime;
        /*アニメーションの名前*/
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
        /*アニメーションの時間を1秒に設定*/
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        /*アニメーション実行後、要素が表示されたままにする*/
    }

    @-webkit-keyframes fadeInRightAnime {
        0% {
            opacity: 0;
            /*非表示*/
            -webkit-transform: translateX(100px);
            transform: translateX(100px);
            /*100px分横にずれる*/
        }

        100% {
            opacity: 1;
            /*表示*/
            -webkit-transform: translateX(0);
            transform: translateX(0);
            /*元の位置*/
        }
    }

    @keyframes fadeInRightAnime {
        0% {
            opacity: 0;
            /*非表示*/
            -webkit-transform: translateX(100px);
            transform: translateX(100px);
            /*100px分横にずれる*/
        }

        100% {
            opacity: 1;
            /*表示*/
            -webkit-transform: translateX(0);
            transform: translateX(0);
            /*元の位置*/
        }
    }

    .fadeInRightTrigger {
        opacity: 0;
        /*非表示*/
    }

    /* 左からふわっと現れる */
    /* jQueryで追加・削除 */
    .fadeInLeft {
        -webkit-animation-name: fadeInLeftAnime;
        animation-name: fadeInLeftAnime;
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }

    @-webkit-keyframes fadeInLeftAnime {
        0% {
            opacity: 0;
            -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }
    }

    @keyframes fadeInLeftAnime {
        0% {
            opacity: 0;
            -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }
    }

    .fadeInLeftTrigger {
        opacity: 0;
    }

    .info {
        width: 100%;
        height: auto;
        text-align: center;
    }

    .info h2 {
        font-family: "Sawarabi Mincho";
    }

    .info p {
        font-family: "Sawarabi Mincho";
    }

    /* 下からふわっと現れる */

    /* jQueryで追加、削除 */
    .fadeUp {
        -webkit-animation-name: fadeUpAnime;
        animation-name: fadeUpAnime;
        /*アニメーションの名前*/
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        /*アニメーションの実行時間*/
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        /*アニメーション後、要素が表示されたままにする*/
    }

    @-webkit-keyframes fadeUpAnime {
        0% {
            opacity: 0;
            /*非表示*/
            -webkit-transform: translateY(100px);
            transform: translateY(100px);
            /*縦方向に100pxずらす*/
        }

        100% {
            opacity: 1;
            /*表示*/
            -webkit-transform: translateY(0);
            transform: translateY(0);
            /*元の位置*/
        }
    }

    @keyframes fadeUpAnime {
        0% {
            opacity: 0;
            /*非表示*/
            -webkit-transform: translateY(100px);
            transform: translateY(100px);
            /*縦方向に100pxずらす*/
        }

        100% {
            opacity: 1;
            /*表示*/
            -webkit-transform: translateY(0);
            transform: translateY(0);
            /*元の位置*/
        }
    }

    .fadeUpTrigger {
        opacity: 0;
        /*非表示*/
    }

    /*  カレンダー */
    .calendarTitel {
        font-family: "Sawarabi Mincho";
        margin-left: 10%;
    }

    .calendar-p {
        font-family: "Sawarabi Mincho";
        margin-left: 10%;
        width: 80%;
    }

    .google-cal iframe {
        width: 100%;
        margin-left: 10%;
        max-width: 320px;
        height: 300px;
    }


    /* スローガン */
    .slogan {
        margin-top: 40%;
        width: 100%;
        height: 300px;
        text-align: center;
        font-family: "Sawarabi Mincho";
    }

    /* メニュー */
    .menu-wrap {
        width: 100%;
        height: 100%;
    }

    .siatsu {
        width: 90%;
        height: 50%;
        border-radius: 30px;
        margin: 5%;
    }


    /* メニュー */
    .menuTitel {
        font-family: "Sawarabi Mincho";
        margin-left: 5%;
        margin-top: 40%;
    }

    .menu-wrap {
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: column;
    }

    .siatsu {
        width: 80%;
        height: 60%;
        margin: 0% 10%;
        border-radius: 30px;
    }

    .menu-container {
        width: 90%;
        height: 100%;
        font-family: "Sawarabi Mincho";
        margin-left: 5%;
    }

    .menu-item {
        margin-bottom: 20px;
    }

    .menu-header {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        border-bottom: 2px solid #ddd;
        padding-bottom: 5px;
        margin-bottom: 10px;
    }

    .course-name {
        font-size: 1.4em;
        color: #333;
    }

    .price {
        font-size: 1.2em;
        color: #888;
    }

    .course-details {
        font-size: 1em;
        color: #666;
        padding-left: 10px;
    }

    .note {
        font-family: "Sawarabi Mincho";
        margin-left: 5%;
        font-size: 12px;
    }

    /* access */
    .accessTitel {
        font-family: "Sawarabi Mincho";
        margin-top: 40%;
    }

    .access-wrap {
        width: 100%;
        height: 100%;
    }

    .access {
        width: 90%;
        height: 100%;
        font-family: "Sawarabi Mincho";
        margin-left: 5%;
        text-align: center;
    }

    .map {
        margin: 0 5%;
    }

    /* フッター */
    footer {
        background-color: #f0fbd2;
        text-align: center;
        bottom: 0;
    }

    .copyright p {
        margin: 0;
    }
}