@charset "utf-8";
/* CSS Document */

/* ********************************************************************** */
/* ココカラ　全体の基礎スタイル */
/* ********************************************************************** */
/* 全体 */
html,body,header,footer,h1,h2,h3,h4,h5,h6,section,article,div,nav,table,th,tr,td {margin:0; padding:0;}/* 標準でmarginとpaddingを0にする */
*, *:before, *:after {box-sizing:border-box;}/* サイズにpaddingとmarginを含める */
html {font-size:62.5%;} /* フォントサイズ62.5%の指定によって標準で10px、1rem（em）が10px */
a {text-decoration:none;}/* リンクのアンダーラインや色をリセット */
p {text-align:justify;}/* 行末揃え */

div.clear {clear:both;}
br.resp {display:block;}
@media screen and (min-width:1800px) {
  br.resp {display:none;}
}

html {height:auto;}
body {height:auto; margin:0;}

/***** レイアウト *****/
/* header */
header.mov-page {
    width:100%; height:auto; background-color:#005bac; position:fixed; top:0; left:0; z-index:999; padding:2rem;
}
img.logo {
    width:16rem; height:auto;
}

/* footer */
footer.mov-page-f {
    width:100vw; height:30rem; background-color:#005bac;
    margin-left: calc(((100vw - 100%) / 2) * -1);
    margin-right: calc(((100vw - 100%) / 2) * -1);
}

/* 大外 */
div.out-line {
    width:100%; height:auto; display:flex; justify-content:flex-start; flex-wrap:wrap; margin:4rem 0 0 0;
}

/* カード */
div.card {
    width:80%; height:auto; margin:0 auto; padding:0 0 6rem 0;
    /* paddingと合わせてbox-sizingも指定 */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box
}
/* カテゴリ */
h3.category {
    width:100%; height:auto; background-color:#fff; margin:0 0 1rem 0; padding:1rem; border-bottom:1px solid #0053a6; border-radius:1rem 1rem 0 0; font-size:2rem; font-weight:bold; color:#0053a6; text-align:center;
}
/* サムネイル */
div.lecture {
    padding-top:56.25%; width:100%; position:relative;
}
.lecture video {
	width:100%; height:100%; position:absolute; top:0px; left:0px;
}
/* 大きなサイズで */
p.movie-file {
    font-size:1.4rem; font-weight:bold; color:#fff; background-color:#0053a6; margin:1rem 0 0 0; padding:1rem 2rem; border-radius:0.8rem; display:inline-block; transition:0.3s;
}
p.movie-file:hover {
    font-size:1.4rem; font-weight:bold; color:#0053a6; background-color:#fff; padding:1rem 2rem; border-radius:0.8rem; display:inline-block; transition:0.3s;
}

@media screen and (min-width:769px) and (max-width:1079px) {
    /* 大外 */
    div.out-line {
    width:100%; height:auto; display:flex; justify-content:flex-start; flex-wrap:wrap; padding:4rem 0 0 0;
    padding:0 3%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box
    }
    /* カード */
    div.card {
    width:calc(100% / 2); height:auto; margin:0 auto; padding:0 2rem 6rem 2rem;
    /* paddingと合わせてbox-sizingも指定 */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box
    }
    /* カードダミー */
    div.card-dummy {
    width:calc(100% / 2); height:auto; margin:0 auto; padding:0 2rem 6rem 2rem;
    /* paddingと合わせてbox-sizingも指定 */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box
    }
}


@media screen and (min-width:1080px) {
    /* 大外 */
    div.out-line {
    width:100%; height:auto; display:flex; justify-content:flex-start; flex-wrap:wrap; padding:4rem 0 0 0;
    padding:0 5%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box
    }
    /* カード */
    div.card {
    width:calc(100% / 3); height:auto; margin:0 auto; padding:0 2rem 6rem 2rem;
    /* paddingと合わせてbox-sizingも指定 */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box
    }
    /* カードダミー */
    div.card-dummy {
    width:calc(100% / 3); height:auto; margin:0 auto; padding:0 2rem 6rem 2rem;
    /* paddingと合わせてbox-sizingも指定 */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box
    }
}