/* モバイルデバイスに対応するためのメディアクエリ */
@media screen and (max-width: 767px) {

    .slide-in {
        font-size: 27px;
    }

    .pages h1 {
        font-size: 32px;
    }

    .pages h1:first-letter {
        font-size: 52px;
    }

    .header a img {
        margin-left: 0px;
        margin-top: 10px;
        width: 120px;
        max-width: 220px;
    }

    .header_login {
        /*display: none;*/
        max-width: 50%;
        font-size: 12px;
    }

    /* ハンバーガーアイコン */
    .drawer_open {
        height: 100px;
        width: 70px;
        z-index: 100;
        right: 0;
    }

    /* メニューのアイコン */
    .drawer_open span,
    .drawer_open span:before,
    .drawer_open span:after {
        height: 4px;
        width: 50px;
        border-radius: 3px;
    }

    .drawer_open span:before {
        bottom: 12px;
    }

    .drawer_open span:after {
        top: 12px;
    }

    .nav_list li {
        margin: 2vh 0;
    }

    .nav_list li a {
        font-size: 22px;
        text-decoration: none;
    }

    .menuSNS li a img {
        margin: 0 25px;
    }

    /*=============================================*/


    .width-adjust {
        max-width: 1200px;
        margin: 0 auto;
        width: 100%;
        padding-bottom: 20px;
    }

    .main_texts {
        position: absolute;
        display: block;
        bottom: 10vh;
        right: 0;
        animation-name: zoomIn;
        animation-duration: 2s;
        animation-fill-mode: forwards;
        opacity: 0;
    }

    .main_texts h2 {
        font-weight: 750;
        font-size: 45px;
    }

    .main_texts p {
        font-size: 30px;
    }

    /*========== TOP Videos================*/


    .top_v {
        width: 75vw;
    }

    .top_vlst img {
        width: 75vw;
        aspect-ratio: 16/9;
    }

    /*=================================*/

    .top_headline h2 {
        padding-left: 10px;
        font-size: 32px;
    }

    .top_headline a {
        font-size: 17px;
    }

    .top_p {
        display:block;
        font-size: 14px;
    }


    /* ============= footer ============== */

    .copyright {
        font-size: 11px;
    }

    .footer-ul1 li {
        font-size: 15px;
    }
    
    .footer-ul2 {
        font-size: 11px;
    }

    /* ============= news ============== */

    .news_list_item {
        padding: 14px 0;
    }

    .inner {
        width: 80vw;
    }

    .topinner {
        width: 80vw;
    }

    .about-imgp {
        display: block;
    }

    .about-txt p,
    .about-txt a,
    .about-section table {
        font-size: 14px;
    }

    .about-section h2 {
        font-size: 27px;
    }

    .about-txt h3 {
        font-size: 22px;
    }

    .skill-body h3 {
        font-size: 17px;
    }

    .about-img {
        width: 100%;
    }

    .about-logo {
        display: none;
    }

    /* news viewer */
    .news-header h2,
    .videos-header h2 {
        font-size: 19px;
    }
    
    .videos-description summary{
        font-size: 17px;
    }
    .news-header p,
    .videos-header p,
    .news-detail,
    .videos-description p {
        font-size: 14px;
    }

    .social-share img{
        width: 22px;
    }

    /* ============= forms ============== */

    .video_pcs {
        list-style: none;
        text-align: center;
        margin: 0 auto;
    }

    .video_pcs li {
        width: 75vw;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .video_pcs img {
        width: 75vw;
        height: calc(75vw * 9/16);
    }

    .video_pcs time,
    .top_v time {
        font-size: 14px;
    }

    .video_title {
        font-size: 15px;
    }


    .filter-form {
        right: 20px;
    }
    
    .filter-form:after {
        right: 10px;
        top: 7px;
    }
    
    .filter-form select {
        max-width: 160px;
        height: 27px;
        font-size: 14px;
    }



    .description {
        font-size: 14px;
    }
    
    .description h2 {
        font-size: 20px;
    }

    .qa summary {
        font-size: 14px;
    }

    .contact-form {
        font-size: 13px;
    }
    
    .form-group label {
        font-size:17px;
    }
    
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group textarea,
    .form-group input[type="file"] {
        padding: 10px;
        font-size: 13px;
    }
    
    .form-group textarea {
        font-size: 13px;
    }
    
    .radio-group label {
        font-size: 13px;
    }
    
    .contact-subtitle {
        font-size: 10px;
    }
    
    .form-group button {
        font-size: 17px;
    }

    .vplayer_container {
        width: 85%;
    }

    .vplayer_container h2 {
        font-size: 19px;
    }

    .vplayer_description p{
        font-size: 14px;
    }
    
    .vplayer_description summary {
        font-size: 19px;
    }

    .datesrc_area time {
        font-size: 16px;
    }

    .mypage h2 {
        text-align: center;
        font-size: 22px;
    }
    
    .mypage h3 {
        text-align: center;
        font-size: 17px;
    }
    
    .mypageinfo {
        font-size: 14px;
        display: block;
        gap: 0;
        margin: 15px auto;
    }
    
    .mypageinfo img {
        width: 100px;
        display: block;
        margin: 0 auto;
    }
    
    .mypage-links {
        font-size: 14px;
        display: block;
        gap: 0;
    }

    .mypage-links a {
        display: block;
        text-align: center;
        margin: 10px 0;
    }
}