.phone_area{
    display: none;
}

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

    .navbar .logo{
        padding: 0 5px 0 10px;
    }
    /* ヘッダー部分 */
    div.main-container.container {
        width: 100%;
    }

    div#navbar-collapse {
        width: 90%;
        /* background-color: #eee; */
        margin: 0 auto;
        }

    .navbar-nav {
        margin: 0;
        text-align: right;
    }

    .navbar-nav li a {
        margin-top: 0px!important;
        display: inline-block;
    }

    header#navbar {
        width: 100%!important;
    }

    .container > .navbar-header {
        margin: 0;
    }
    /* フッター部分 */
    .adwin .sitemap{
        width: 90%;
    }

    .region.region-content{
        width: 90%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;

    }

    div.VideoWrapper div.field--name-body::-webkit-scrollbar{
        width: 4px;
    }


    .view-md-list .video.views-row,
    .view-video-denki .video.views-row,
    #block-views-block-st-one-block-1 .views-row,
    #block-views-block-st-one-block-2 .views-row,
    .view-dc .view-content .views-row,
    .view-ms-video-list .views-row,
    .view-anime-history .video.views-row,
    .view-science .video.views-row,
    .view-science .test.views-row,
    .view-kikaihozen .video.views-row,
    .view-type-video2-list .video.views-row
    {
        display: grid;
        grid-template-rows: auto auto auto;
        grid-template-columns: 160px auto;
    }

    .view-md-list .video.views-row .views-field.views-field-field-contents, 
    .view-video-denki .video.views-row .views-field.views-field-field-contents, 
    #block-views-block-st-one-block-1 .views-row .views-field.views-field-field-contents, 
    #block-views-block-st-one-block-2 .views-row .views-field.views-field-field-contents, 
    .view-dc .views-row .views-field.views-field-field-contents, 
    .view-ms-video-list .views-row .views-field.views-field-field-contents, 
    .view-anime-history .video.views-row .views-field.views-field-field-contents, 
    .view-science .video.views-row .views-field.views-field-field-contents, 
    .view-science .test.views-row .views-field.views-field-field-contents, 
    .view-kikaihozen .video.views-row .views-field.views-field-field-contents, 
    .view-type-video2-list .video.views-row .views-field.views-field-field-contents 
    {
        grid-row: 2;
        grid-column: 2;
        margin: 1px 0 0 6px;
    }
    .view-md-list .video.views-row .views-field.views-field-field-contents ul li
    {
        font-size: 12px;
        padding-bottom: 0.2rem;
    }

    .view-md-list .video.views-row .views-field.views-field-title, 
    .view-video-denki .video.views-row .views-field.views-field-title, 
    #block-views-block-st-one-block-1 .views-row .views-field.views-field-field-head, 
    #block-views-block-st-one-block-2 .views-row .views-field.views-field-field-head, 
    .view-dc .views-row .views-field.views-field-field-head, 
    .view-ms-video-list .views-row .views-field.views-field-title, 
    .view-anime-history .video.views-row .views-field.views-field-title, 
    .view-science .video.views-row .views-field.views-field-title, 
    .view-science .test.views-row .views-field.views-field-title, 
    .view-kikaihozen .video.views-row .views-field.views-field-title, 
    .view-type-video2-list .video.views-row .views-field.views-field-title 
    {
        grid-row: 1;
        grid-column: 1/3;
        padding: 0px 0px 12px;
    }
    .view-md-list .video.views-row .views-field.views-field-title::before, 
    .view-video-denki .video.views-row .views-field.views-field-title::before, 
    #block-views-block-st-one-block-1 .views-row .views-field.views-field-field-head::before, 
    #block-views-block-st-one-block-2 .views-row .views-field.views-field-field-head::before, 
    .view-dc .views-row .views-field.views-field-field-head::before, 
    .view-ms-video-list .views-row .views-field.views-field-title::before, 
    .view-anime-history .video.views-row .views-field.views-field-title::before, 
    .view-science .video.views-row .views-field.views-field-title::before, 
    .view-science .test.views-row .views-field.views-field-title::before, 
    .view-kikaihozen .video.views-row .views-field.views-field-title::before, 
    .view-type-video2-list .video.views-row .views-field.views-field-title::before 
    {
        display: none;
    }
    .view-md-list .video.views-row .views-field.views-field-field-thumbnail, 
    .view-video-denki .video.views-row .views-field.views-field-field-thumbnail, 
    #block-views-block-st-one-block-1 .views-row .views-field.views-field-field-thumbnail, 
    #block-views-block-st-one-block-2 .views-row .views-field.views-field-field-thumbnail, 
    .view-dc .views-row .views-field.views-field-field-thumbnail, 
    .view-ms-video-list .views-row .views-field.views-field-field-thumbnail, 
    .view-anime-history .video.views-row .views-field.views-field-field-thumbnail, 
    .view-science .video.views-row .views-field.views-field-field-thumbnail, 
    .view-science .test.views-row .views-field.views-field-field-thumbnail, 
    .view-kikaihozen .video.views-row .views-field.views-field-field-thumbnail, 
    .view-type-video2-list .video.views-row .views-field.views-field-field-thumbnail 
    {
        grid-row: 2;
        grid-column: 1;
    }
    .view-md-list .video.views-row .views-field.views-field-field-thumbnail img, 
    .view-video-denki .video.views-row .views-field.views-field-field-thumbnail img, 
    #block-views-block-st-one-block-1 .views-row .views-field.views-field-field-thumbnail img, 
    #block-views-block-st-one-block-2 .views-row .views-field.views-field-field-thumbnail img, 
    .view-dc .views-row .views-field.views-field-field-thumbnail img, 
    .view-ms-video-list .views-row .views-field.views-field-field-thumbnail img, 
    .view-anime-history .video.views-row .views-field.views-field-field-thumbnail img, 
    .view-science .video.views-row .views-field.views-field-field-thumbnail img, 
    .view-science .test.views-row .views-field.views-field-field-thumbnail img, 
    .view-kikaihozen .video.views-row .views-field.views-field-field-thumbnail img, 
    .view-type-video2-list .video.views-row .views-field.views-field-field-thumbnail img 
    {
        border-radius: 3px;
        width: 100%;
    }
    .view-md-list .video.views-row .views-field.views-field-field-watch, 
    .view-video-denki .video.views-row .views-field.views-field-field-watch, 
    #block-views-block-st-one-block-1 .views-row .views-field.views-field-field-watch, 
    #block-views-block-st-one-block-2 .views-row .views-field.views-field-field-watch, 
    .view-dc .views-row .views-field.views-field-field-watch, 
    .view-ms-video-list .views-row .views-field.views-field-field-watch, 
    .view-anime-history .video.views-row .views-field.views-field-field-watch, 
    .view-science .video.views-row .views-field.views-field-field-watch, 
    .view-science .test.views-row .views-field.views-field-field-watch, 
    .view-kikaihozen .video.views-row .views-field.views-field-field-watch, 
    .view-type-video2-list .video.views-row .views-field.views-field-field-watch 
    {
        grid-row: 3;
        grid-column: 1/3;
        text-align: left;
        color: #999;
        margin-top: 8px;
    }


    /* 機械製図 */

    .md-content .pc_area{
        display: none;
    }
    .md-content .phone_area{
        display: block;
        font-family: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";

    }
    .md-content {
        background-image: initial;
        height: initial;
    }
    .md-content>.field.field--name-body.field--type-text-with-summary.field--label-hidden.field--item {
        width: 100%;
        float: initial;
        padding: 20px 0px;
        margin-top: 20px;
        text-align: center;
        }
    .md-content .field--name-body h3 {
        color: #222;
        margin: 10px 0;
        font-size: 22px;
        letter-spacing: 1px;
    }
    .md-content .field--name-body .topText {
        display: none;
    }

    .view-md-list .head.views-row,
    .view-video-denki .head.views-row,
    .view-anime-history .head.views-row,
    .view-science .head.views-row
    {
        font-size: 20px;
    }

    .md-content .phone_area .Title{
        display: block;
        width: 100%;
        font-family: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
        font-size: 20px;
        font-weight: 900;
        text-align: left;
        color: #0071bb;
        margin-bottom: 1rem;
        line-height: 35px;
        border-bottom: 1px solid #ccc;
    }

    .md-content .phone_area .Title span::before {
        content: '\f1b2';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        margin-right: 10px;
    }

    .md-content .phone_area .SampleMovie{
        position: relative;
        overflow: hidden;
        height: 0;
        padding: 0px 0 55%;
        max-width: 560px;
        margin: 0 auto;
    }
    
    .md-content .phone_area .SampleMovie iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        }


    .md-content .phone_area .head{
        display: block;
        width: 100%;
        font-size: 16px;
        text-align: left;
        font-weight: 700;
        margin: 1rem 0;
    }
    
    .md-content .phone_area .Intro {
        font-size: 14px;
        text-align: left;
        letter-spacing: 0.1rem;
    }

    section.block-views-blockmd-list-block-1 {
        margin-top: 0;
    }
    /* 第2種電気工事士 */
    .denki-content {
        background-image: initial;
        height: initial;
        background: linear-gradient(135deg, lightcyan, lightskyblue);
    }
    .denki-content>.field.field--name-body.field--type-text-with-summary.field--label-hidden.field--item {
        width: 100%;
        float: initial;
        padding: 20px 0px;
        margin-top: 20px;
        text-align: center;
        }
    .denki-content .field--name-body .denkitop {
        color: #000;
        margin: 10px 0;
    }

    .denki-content .field--name-body .denkitop p.denki {
        color: #222;
        font-size: 22px;
        letter-spacing: 1px;
    }

    .denki-content .field--name-body .topText {
        display: none;
    }

    /* メカトロニクスシーケンスキット */
    .course-top-page[about="/MS1"] .content,
    .course-top-page[about="/index.php/MS1"] .content,
    .course-top-page[about="/index.php/MS1_en"] .content,
    .course-top-page[about="/MS1_en"] .content
    {
        background-image: initial;
        height: initial;
        background: linear-gradient(-45deg, orange, lightsalmon);
    }

    .course-top-page[about="/MS1"] .content>.field.field--name-body.field--type-text-with-summary.field--label-hidden.field--item,
    .course-top-page[about="/index.php/MS1"] .content>.field.field--name-body.field--type-text-with-summary.field--label-hidden.field--item,
    .course-top-page[about="/index.php/MS1_en"] .content>.field.field--name-body.field--type-text-with-summary.field--label-hidden.field--item,
    .course-top-page[about="/MS1_en"] .content>.field.field--name-body.field--type-text-with-summary.field--label-hidden.field--item
    {
        width: 100%;
        float: initial;
        padding: 20px 0px;
        margin-top: 20px;
        text-align: center;
    }
    .course-top-page[about="/MS1"] .content .field--name-body h3,
    .course-top-page[about="/index.php/MS1"] .content .field--name-body h3,
    .course-top-page[about="/index.php/MS1_en"] .content .field--name-body h3,
    .course-top-page[about="/MS1_en"] .content .field--name-body h3
    {
        color: #444;
        margin: 10px 0;
        font-size: 22px;
        letter-spacing: 1px;
    }

    #block-adwin-views-block-ms-video-list-block-1 h2.block-title,
    #block-adwin-views-block-ms-video-list-block-2 h2.block-title,
    #block-adwin-views-block-ms-video-list-block-3 h2.block-title,
    #block-adwin-views-block-ms-video-list-block-4 h2.block-title
    {
        font-size: 22px;
    }

    .course-top-page[about="/MS1"] .content .field--name-body .topText,
    .course-top-page[about="/index.php/MS1"] .content .field--name-body .topText,
    .course-top-page[about="/index.php/MS1_en"] .content .field--name-body .topText,
    .course-top-page[about="/MS1_en"] .content .field--name-body .topText
    {
        display: none;
    }

    /* DCサーボ制御 */
    .course-top-page[about="/AKM-1502-02"] .content .TopImage{
        background-image: initial;
        height: initial;
        margin-bottom: 20px;
        background: linear-gradient(135deg, lightgreen, mediumaquamarine);
    }
    .course-top-page[about="/AKM-1502-02"] .content .TopImage>.TopWrapper {
        width: 100%;
        float: initial;
        padding: 20px 0px;
        margin-top: 20px;
        text-align: center;
    }
    .course-top-page[about="/AKM-1502-02"] .content .TopImage .TopWrapper h3 {
        color: #333;
        margin: 10px 0;
        letter-spacing: 2px;
    }
    .course-top-page[about="/AKM-1502-02"] .content .TopImage .TopWrapper .TopText {
        display: none;
    }

    #block-views-block-dc-block-1{
        margin-top: 0;
    }

    /* 機械保全（機械系保全作業） */
    .TopImage.Kikaihozen {
        background-image: initial;
        height: initial;
        background: linear-gradient(135deg, aquamarine,limegreen, limegreen);
    }
    .TopImage.Kikaihozen>.TopWrapper {
        width: 100%;
        float: initial;
        padding: 20px 0px;
        margin-top: 20px;
        text-align: center;
        }
    .TopImage.Kikaihozen .TopWrapper h3 {
        color: #333;
        margin: 10px 0;
        font-size: 22px;
        letter-spacing: 1px;
    }
    .TopImage.Kikaihozen .TopWrapper .TopText {
        display: none;
    }
    .view-kikaihozen .head.views-row{
        font-size: 18px;
    }

    /* 実習で学ぶ！空気圧制御 */
    .TopImage.AKM-1307 {
        background-image: initial;
        height: initial;
        background: linear-gradient(135deg, aquamarine,limegreen, limegreen);
    }
    .TopImage.AKM-1307>.TopWrapper {
        width: 100%;
        float: initial;
        padding: 20px 0px;
        margin-top: 20px;
        text-align: center;
        }
    .TopImage.AKM-1307 .TopWrapper h3 {
        color: #333;
        margin: 10px 0;
        font-size: 22px;
        letter-spacing: 1px;
    }
    .TopImage.AKM-1307 .TopWrapper .TopText {
        display: none;
    }
    .view-type-video2-list .head.views-row{
        font-size: 18px;
    }


    /* シーケンストレーナーOne */

    .TopImage.ST-One {
        background-image: initial;
        height: initial;
        background: linear-gradient(135deg, pink, tomato);
    }
    .TopImage.ST-One>.TopWrapper {
        width: 100%;
        float: initial;
        padding: 20px 0px;
        margin-top: 20px;
        text-align: center;
        }
    .TopImage.ST-One .TopWrapper h3 {
        color: #333;
        margin: 10px 0;
        font-size: 20px;
        letter-spacing: 1px;
    }
    .TopImage.ST-One .TopWrapper .TopText {
        display: none;
    }
    .view-header h2#Preface,.view-header h2#Exercise{
        font-size: 17px;
    }
    

    /* 冷間鍛造技術 */
    .TopImage.CFT {
        background-image: initial;
        height: initial;
        background: linear-gradient(135deg, lightskyblue, royalblue);
    }
    .TopImage.CFT>.TopWrapper {
        width: 100%;
        float: initial;
        padding: 20px 0px;
        margin-top: 20px;
        text-align: center;
        }
    .TopImage.CFT .TopWrapper h3 {
        color: #333;
        margin: 10px 0;
        font-size: 22px;
        letter-spacing: 2px;
    }
    .TopImage.CFT .TopWrapper .TopText {
        display: none;
    }

    #block-adwin-views-block-anime-history-block-1,
    #block-views-block-anime-history-block-2
    {
        margin-top: 20px;
    }

    /* アニメ中学理科 */
    article[about="/02CD-SJ"] .TopImage,
    article[about="/index.php/02CD-SJ"] .TopImage
    {
        background-image: initial;
        height: initial;
        background: linear-gradient(135deg, khaki, orange,orange);
    }
    article[about="/02CD-SJ"] .TopImage>.TopWrapper,
    article[about="/index.php/02CD-SJ"] .TopImage>.TopWrapper
    {
        width: 100%;
        float: initial;
        padding: 20px 0px;
        margin-top: 20px;
        text-align: center;
        }
    article[about="/02CD-SJ"] .TopImage .TopWrapper h3,
    article[about="/index.php/02CD-SJ"] .TopImage .TopWrapper h3
    {
        color: #333;
        margin: 10px 0;
        font-size: 22px;
        letter-spacing: 2px;
    }
    article[about="/02CD-SJ"] .TopImage .TopWrapper .TopText,
    article[about="/index.php/02CD-SJ"] .TopImage .TopWrapper .TopText
    {
        display: none;
    }

    article[about="/02CD-SJ"] .ContentList,
    article[about="/index.php/02CD-SJ"] .ContentList
    {
        margin-top: 20px;
    }
    article[about="/02CD-SJ"] .ContentList .MainWrapper,
    article[about="/index.php/02CD-SJ"] .ContentList .MainWrapper
    {
        margin-bottom: 4rem;
        display: grid;
        grid-template-rows: auto auto auto;
        grid-template-columns: auto;
        border: 1px solid #ccc;
        border-radius: 6px;
    }
    article[about="/02CD-SJ"] .ContentList .MainWrapper .title,
    article[about="/index.php/02CD-SJ"] .ContentList .MainWrapper .title
    {
        grid-row: 1;
        grid-column: 1;
        margin-left: 1rem;
    }
    article[about="/02CD-SJ"] .ContentList .MainWrapper .title h3,
    article[about="/index.php/02CD-SJ"] .ContentList .MainWrapper .title h3
    {
        font-size: 20px;
    }
    article[about="/02CD-SJ"] .ContentList .MainWrapper .thumbnail,
    article[about="/index.php/02CD-SJ"] .ContentList .MainWrapper .thumbnail
    {
        grid-row: 2;
        grid-column: 1;
        border: none;
        margin-top: 0;
    }
    article[about="/02CD-SJ"] .ContentList .MainWrapper .content,
    article[about="/index.php/02CD-SJ"] .ContentList .MainWrapper .content
    {
        grid-row: 3;
        grid-column: 1;
        margin-bottom: 2rem;
        margin-left: 1rem;
        border-left: 5px solid orange;
        padding-left: 1rem;
    }


    /* アニメ中学理科練習問題 */
    article.test-type1 .sectionTitle{
        font-size: 18px;
        font-weight: 800;
        padding: 1rem 0 1rem 1rem;
        border-left: 1rem solid limegreen;
        margin-bottom: 1rem;
    }

    article.test-type1 .content{
        display: grid;
        grid-template-rows: auto auto;
        grid-template-columns: auto;
        width: 100%;
    }

    article.test-type1 .main{
        grid-row: 1;
        grid-column: 1;
    }

    article.test-type1 .sidebar{
        grid-row: 2;
        grid-column: 1;
        margin-left: 0;
    }

    article.test-type1 .caution h4{
        font-size: 16px;
    }

    article.test-type1 .caution ul{
        padding-left: 2.5rem;
    }

    article.test-type1 .caution ul li{
        font-size: 12px;
        padding-right: 1rem;
    }

    article.test-type1 button#start{
        font-size: 16px;
        height: 42px;
    }

    article.test-type1 .main .Qcounter{
        text-align: left;
    }

    article.test-type1 .main .QWrapper .view-science-test-list .views-row{
        width: 100%;
    }

    article.test-type1 .main .QWrapper .view-science-test-list .views-row .views-field-body::before{
        font-size: 16px;
    }
    article.test-type1 .main .QWrapper .view-science-test-list .views-row .views-field-body p{
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: 16px;
    }
    article.test-type1 .main .QWrapper .view-science-test-list .views-row .views-field-body p img{
        width: 100%;
        max-width: 400px;
    }

    article.test-type1 .main .QWrapper .view-science-test-list .views-row .views-field-field-choice{
        width: 100%;
    }

    article.test-type1 .main .QWrapper .view-science-test-list .views-row .views-field-field-choice ul{
        padding: 0;
    }

    article.test-type1 .main .QWrapper .view-science-test-list .views-row .views-field-field-choice ul li{
        width: 100%;
        font-size: 14px;
    }

    article.test-type1 .main .ButtonField button#GoToNext,
    article.test-type1 .main .ButtonField button#GoToResult
    {
        height: 42px;
        font-size: 16px;
        margin-bottom: 4rem;
    }

    article.test-type1 .main .resultTop{
        width: 100%;
        display: grid;
        grid-template-rows: auto auto;
        grid-template-columns: 120px 1fr;
        margin-bottom: 3rem;
    }

    article.test-type1 .main .resultTop button#continue{
        grid-row: 1;
        grid-column: 1/3;
        margin-bottom: 1rem;
        height: 48px;
        font-size: 16px;
    }
    
    article.test-type1 .main .resultTop h2{
        grid-row: 2;
        grid-column: 1;
        font-size: 16px;
        font-weight: 800;
        margin-top: 2rem;
        margin-left: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 10px double #000;
        text-align: center;
    }

    article.test-type1 .main .resultTop .ResultScore{
        grid-row: 2;
        grid-column: 2;
        margin-top: 2rem;
        font-size: 16px;
        text-align: right;
        font-weight: bold;
    }

    article.test-type1 .main .resultTop .ResultScore span{
        padding: 1.5rem 2.5rem;
    }

    article.test-type1 .main .finish{
        margin-bottom: 4rem;
    }

    article.test-type1 .main .finish .Result .ResultWrapper{
        margin-top: 2rem;
    }

    article.test-type1 .main .finish .Result .ResultWrapper h2{
        font-size: 18px;
        margin: 1rem 0;
    }

    article.test-type1 .main .finish .Result .ResultWrapper .ResultSent h4{
        font-size: 16px;
        margin: 1rem;
    }

    article.test-type1 .main .finish .Result .ResultWrapper .ResultSent p{
        font-size: 14px;
        padding-left: 2rem;
        padding-right: 3rem;
    }

    article.test-type1 .main .finish .Result .ResultWrapper .ResultSent img{
        width: 100%;
        max-width: 400px;
    }

    article.test-type1 .main .finish .Result .ResultWrapper .ResultAnswer{
        margin-bottom: 1rem;
    }

    article.test-type1 .main .finish .Result .ResultWrapper .ResultAnswer p{
        display: block;
        width: 100%;
        margin: 0 0 0.5rem;
        font-size: 14px;
    }

    article.test-type1 .main .finish .Result .ResultWrapper .ResultAnswer p span{
        display: block;
        font-size: 16px;
    }



    /* アニメ歴史シアター */
    article[about="/96CD-JH"] .TopImage,
    article[about="/index.php/96CD-JH"] .TopImage
    {
        background-image: initial;
        height: initial;
        background: linear-gradient(135deg, tan, chocolate);
    }
    article[about="/96CD-JH"] .TopImage>.TopWrapper,
    article[about="/index.php/96CD-JH"] .TopImage>.TopWrapper
    {
        width: 100%;
        float: initial;
        padding: 20px 0px;
        margin-top: 20px;
        text-align: center;
        }
    article[about="/96CD-JH"] .TopImage .TopWrapper h3,
    article[about="/index.php//96CD-JH"] .TopImage .TopWrapper h3
    {
        color: #333;
        margin: 10px 0;
        font-size: 22px;
        letter-spacing: 2px;
    }
    article[about="/96CD-JH"] .TopImage .TopWrapper .TopText,
    article[about="/index.php/96CD-JH"] .TopImage .TopWrapper .TopText
    {
        display: none;
    }
    


/*
=======================================================
==      ==  ==  ======     =======     ====
 ==    ==   ==  ==    ==   ==        ==    ==
  ==  ==    ==  ==    ==   =======   ==    ==
   ====     ==  ==    ==   ==        ==    ==
    ==      ==  ======     =======     ====
=======================================================
*/
    /* 動画ページ */
    article.video .videoTitle,
    article.ms-video .videoTitle,
    article.ms-video-en .videoTitle,
    article.type-video .videoTitle,
    article.type-video2 .videoTitle,
    article.type-video-with-simulation .videoTitle,
    article.dc-video .videoTitle
    {
        font-size: 18px;
        font-weight: bold;
        border-left: 1rem solid deepskyblue;
    }


    /* 高専数学用 */
    article.video .content{
        display: grid;
        grid-template-rows: auto auto auto auto;
        grid-template-columns: auto;
        width: 100%;

    }

    article.ms-video .content,
    article.ms-video-en .content,
    article.type-video .content,
    article.type-video2 .content,
    article.type-video-with-simulation .content,
    article.dc-video .content
    {
        display: grid;
        grid-template-rows: auto auto auto;
        grid-template-columns: auto;
        width: 100%;
    }

    article.video .content .video-content,
    article.ms-video .content .video-content,
    article.ms-video-en .content .video-content,
    article.type-video .content .video-content,
    article.type-video2 .content .video-content,
    article.type-video-with-simulation .content .video-content,
    article.dc-video .content .video-content
    {
        grid-row: 1;
        grid-column: 1;
        height: max-content;
        text-align: center;
    }

    article.ms-video .content .video-content .VideoWrapper,
    article.ms-video-en .content .video-content .VideoWrapper,
    article.type-video .content .video-content .VideoWrapper,
    article.type-video2 .content .video-content .VideoWrapper,
    article.type-video-with-simulation .content .video-content .VideoWrapper,
    article.dc-video .content .video-content .VideoWrapper
    {
        width: 100%;
        height: 100%;
    }

    article.dc-video .content .video-content .VideoWrapper div.field--name-body
    {
        max-height: 320px;
    }

    .VideoWrapper .ForbiddenWrapper{
        position: relative;
        overflow: hidden;
        height: 0;
        padding: 0px 0 60%;
        }

    .VideoWrapper .ForbiddenWrapper .forbidden{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .VideoWrapper .ForbiddenWrapper .forbidden a{
        width: 75%;
        padding: 2rem 1rem;
    }

    .VideoWrapper .ForbiddenWrapper .forbidden a::before{
        margin-right: 1rem;
    }

    article.video .content .video-content #video-wrapper,
    article.ms-video .content .video-content .VideoWrapper #video-wrapper,
    article.ms-video-en .content .video-content .VideoWrapper #video-wrapper,
    article.type-video .content .video-content .VideoWrapper #video-wrapper,
    article.type-video2 .content .video-content .VideoWrapper #video-wrapper,
    article.type-video-with-simulation .content .video-content .VideoWrapper #video-wrapper,
    article.dc-video .content .video-content .VideoWrapper #video-wrapper
    {
        position: relative;
        overflow: hidden;
        height: 0;
        padding: 0 0 66%;
    }

    article.video .content .video-content #video-wrapper iframe,
    article.ms-video .content .video-content .VideoWrapper #video-wrapper iframe,
    article.ms-video-en .content .video-content .VideoWrapper #video-wrapper iframe,
    article.type-video .content .video-content .VideoWrapper #video-wrapper iframe,
    article.type-video2 .content .video-content .VideoWrapper #video-wrapper iframe,
    article.type-video-with-simulation .content .video-content .VideoWrapper #video-wrapper iframe,
    article.dc-video .content .video-content .VideoWrapper #video-wrapper iframe
    {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: initial;
    }

    article.video .content .abstract{
        grid-row: 2;
        grid-column: 1;
        overflow: hidden;
    }

    article.video .content .abstract .abstract-content li{
        font-size: 14px;
    }

    article.video .content .abstract .abstract-content li p.formula,
    article.video .content .abstract .abstract-content li p.two-formula
    {
        font-size: 12px;
        overflow-x: scroll;
        padding-bottom: 0.5rem;
        padding-right: 1rem;
    }

    article.video .content .abstract .abstract-content li p.formula::-webkit-scrollbar,
    article.video .content .abstract .abstract-content li p.two-formula::-webkit-scrollbar
    {
        width: 1px;
        height: 2px;
    }
    
    article.video .content .abstract .abstract-content li p.formula::-webkit-scrollbar-thumb,
    article.video .content .abstract .abstract-content li p.two-formula::-webkit-scrollbar-thumb
    {
        background: #666;
        border-radius: 1px;
        width: 1px;
        height: 3px;
    }

    article.video .content .memo{
        grid-row: 3;
        grid-column: 1;
        margin-bottom: 4rem;
    }

    article.ms-video .content .Comments,
    article.ms-video-en .content .Comments,
    article.type-video .content .Comments,
    article.type-video2 .content .Comments,
    article.type-video-with-simulation .content .Comments,
    article.dc-video .content .Comments
    {
        grid-row: 2;
        grid-column: 1;
    }

    article.video .content .sidebar{
        grid-row: 4;
        grid-column: 1;
        margin-left: 0;

    } 
    article.ms-video .content .sidebar, 
    article.ms-video-en .content .sidebar, 
    article.type-video .content .sidebar, 
    article.type-video2 .content .sidebar, 
    article.type-video-with-simulation .content .sidebar, 
    article.dc-video .content .sidebar
    {
        grid-row: 3;
        grid-column: 1;
        margin-left: 0;
    }


    /* トップページ */
    article[about="/technojuku"] .content,
    article[about="/index.php/technojuku"] .content,
    article[about="/en/technojuku"] .content,
    article[about="/en/index.php/technojuku"] .content
    {
        order: 1;
    }

    article[about="/technojuku"] .content .adwin .TopArea,
    article[about="/en/technojuku"] .content .adwin .TopArea,
    article[about="/index.php/technojuku"] .content .adwin .TopArea,
    article[about="/en/index.php/technojuku"] .content .adwin .TopArea
    {
        width: 100%;
        height: 240px;
        padding-top: 6rem;
    }

    article[about="/technojuku"] .content .adwin .TopArea .TopMainText,
    article[about="/en/technojuku"] .content .adwin .TopArea .TopMainText,
    article[about="/en/index.php/technojuku"] .content .adwin .TopArea .TopMainText,
    article[about="/index.php/technojuku"] .content .adwin .TopArea .TopMainText
    {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    article[about="/technojuku"] .content .adwin .TopArea .TopSubText,
    article[about="/en/technojuku"] .content .adwin .TopArea .TopSubText,
    article[about="/en/index.php/technojuku"] .content .adwin .TopArea .TopSubText,
    article[about="/index.php/technojuku"] .content .adwin .TopArea .TopSubText
    {
        display: none;
    }
    article[about="/technojuku"] .content .adwin .TopArea a.button,
    article[about="/en/technojuku"] .content .adwin .TopArea a.button,
    article[about="/en/index.php/technojuku"] .content .adwin .TopArea a.button,
    article[about="/index.php/technojuku"] .content .adwin .TopArea a.button
    {
        width: 20rem;
        margin: 3rem auto;
        font-size: 1.3rem;
    }

    section#block-adwin-views-block-course-list-top-page-block-1 {
        order: 3;
        width: 90%;
        margin: 0 auto;
    }

    section#block-adwin-views-block-course-list-top-page-block-1 .view-content {
        width: 100%;
    }

    section#block-adwin-views-block-course-list-top-page-block-1 .view-content .views-row{
        display: grid;
        grid-template-rows: auto auto auto auto auto;
        grid-template-columns: auto;
        min-width: initial;
    }

    section#block-adwin-views-block-course-list-top-page-block-1 .view-content .views-row .views-field-field-pv{
        grid-row: 2;
        grid-column: 1;
    }

    section#block-adwin-views-block-course-list-top-page-block-1 .view-content .views-row .views-field-field-pv .Movie {
        position: relative;
        overflow: hidden;
        height: 0;
        margin: 0 auto;
        padding: 0 0 55%;
    }

    section#block-adwin-views-block-course-list-top-page-block-1 .view-content .views-row .views-field-field-pv .Movie iframe,
    section#block-adwin-views-block-course-list-top-page-block-1 .view-content .views-row .views-field-field-pv .Movie a
    {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    section#block-adwin-views-block-course-list-top-page-block-1 .view-content .views-row .views-field-field-pv .Movie a img{
        width: 100%;
        height: 100%;
    }

    section#block-adwin-views-block-course-list-top-page-block-1 .view-content .views-row .views-field-title{
        grid-row: 1;
        grid-column: 1;
        font-size: 20px;
        line-height: 35px;
    }

    section#block-adwin-views-block-course-list-top-page-block-1 .view-content .views-row .views-field-field-head{
        grid-row: 3;
        grid-column: 1;
        margin: 1rem 0;
        font-size: 16px;
    }

    section#block-adwin-views-block-course-list-top-page-block-1 .view-content .views-row .views-field-field-introduction{
        grid-row: 4;
        grid-column: 1;
        font-size: 14px;
    }

    section#block-adwin-views-block-course-list-top-page-block-1 .view-content .views-row .views-field-view-node{
        grid-row: 5;
        grid-column: 1;
    }

    section#block-go-to-lessons{
        width: 90%;
        order: 2;
        margin: 3rem auto 0;
    }
    section#block-go-to-lessons a.button2{
        width: 100%;
    }

    section#block-adwin-promotion {
        width: 90%;
        order: 4;
    }

    section#block-adwin-promotion a.button2 {
        width: 100%;
    }

    section#block-adwin-promotion h2.block-title{
        font-size: 20px;
    }

    section#block-adwin-promotion .Movie {
        position: relative;
        overflow: hidden;
        height: 0;
        padding: 0 0 66%;
    }

    section#block-adwin-promotion .Movie iframe{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }


    /* 百マス点検 */
    .field--name-body .QuizHeader{
        width: 100%;
        background: initial;
        display: initial;
    }

    .field--name-body .QuizHeader .Image{
        display: none;
    }
    
    .field--name-body .QuizHeader .description{
        display: initial;
        margin-top: 3rem;
        margin-right: 0;
    }


    .field--name-body .QuizHeader .description h1{
        font-size: 28px;
        text-align: center;
    }
    
    .field--name-body .QuizHeader .description p{
        margin-bottom: 2rem;
    }


    .field--name-body .QuizListBox{
        width: 100%;
        display: initial;
    }

    .field--name-body .QuizListBox .QuizContent{
        width: 100%;
        margin-bottom: 2rem;
    }

    .field--name-body .QuizListBox .QuizContent h3{
        font-size: 20px;
    }


    /* 開発中 */

    article[about="/on_development"] .field--name-body h2,
    article[about="/index.php/on_development"] .field--name-body h2
    {
        font-size: 18px;
    }
    article[about="/on_development"] .field--name-body img,
    article[about="/index.php/on_development"] .field--name-body img
    {
        width: 100%;
    }


    .Canceled,
    .AdwinCompleted{
        width: 100%;
    }

    .AdwinCompleted p{
        font-size: 14px;
        line-height: 2rem;
    }


    /* 言語切り換え */
    #navbar-collapse > .region.region-navigation-collapsible {
        display: flex;
        flex-direction: column-reverse;
    }

    section#block-adwin-yanyunoqieritie {
        display: inline-block;
        margin: 0 0 0 auto;
    }

    section#block-adwin-yanyunoqieritie > ul.links {
        display: inline-block;
        margin: 0 0 0.5rem;
        padding: 2rem 0.5rem 0;
    }

}