/* -- 動画一覧／詳細 -------------------------------------- */

section {
     margin: 0 auto 150px;
}
.top_content{
     width:100%;
     -webkit-box-sizing: border-box;
             box-sizing: border-box;
}

.top_content video {
    max-width: 100%;
	padding: 0 10px;
}
.top_content2{
     width:100%;
     background-color: #000;
     margin: 10px;
     -webkit-box-sizing: border-box;
             box-sizing: border-box;
}
#sec01 .contents_division__kyouiku h1:before {
     background: url(../images/movie/icon01.png) no-repeat;
     background-size: cover;
     background-position: center;
}

/* serchBox */
.serchBox {
     font-size: 1.6rem;
	display: flex;
     justify-content: left;
	flex-wrap: wrap;
	align-items: center;
   }
   
.serchBox select {
     font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
     font-size: 1.6rem;
     padding: 5px 25px;
     margin-right: 10px;
}

.serchBox input[type="text"] {
     font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
     font-size: 1.6rem;
     padding: 5px 25px;
     margin-left: 30px;
     margin-right: 10px;
}

@media all and (-ms-high-contrast: none) {
     .serchBox input[type="text"] {
          margin-left: 10px;
          width: 250px;
     }
   }

.serchBox select span {
	font-weight:bold;
	
}
.serchBox p {
     display: inline-block;
}

@media screen and (max-width: 878px) {
.serchBox select {
	width: 45%;
	margin-bottom: 10px;
}

.serchBox input[type="text"] {
	width: 50%;
}
.serchBox .b {
     width: 100%;
}
.serchBox input[type="text"] {
     margin-left: 0;
     margin-right: 10px;
}
}

@media screen and (max-width: 480px) {
.serchBox select {
	width: 100%;
	margin-right: 0px;
}

.serchBox input[type="text"] {
	width: 50%;}
	
.btn-reset {
    margin: 10px auto;
}
}

/*.serchBox span {
     margin-right: 20px;
}*/

/* cards */
.flex{
     display:-webkit-box;
     display:-ms-flexbox;
     display:flex;
     -ms-flex-wrap:wrap;
         flex-wrap:wrap;
}
.cards{
     max-width: 1070px;
     width: calc(100% + 10px);
     margin-top: 50px;
     margin-left: -10px;
}
.cards_op{
     max-width: 1060px;
     width: 100%;
     margin-top: 0;
}
.card{
     border: 1px solid #d7d7d7;
     -webkit-box-sizing: border-box;
             box-sizing: border-box;
     width: calc((100% - 30px) * 1 / 3);
     margin-left: 10px;
     margin-top: 30px;
     position:relative;
     min-width: 344px;
}

@media all and (-ms-high-contrast: none) {
     .card{
          border: 1px solid #d7d7d7;
          -webkit-box-sizing: border-box;
                  box-sizing: border-box;
          width: calc((100% - 50px) * 1 / 3);
     }
   }


.card > a {
     display: relative;
}
.card > a::before {
     content: '';
     display: block;
     position: absolute;
     top:0;
     bottom: 0;
     left: 0;
     right: 0;
}
/* .card:nth-child(3n){
     margin-right: 0;
} */
.card_img{
     width: 100%;
     height: auto;
     border-bottom: 1px solid #d7d7d7;
}
.cards .division {
    padding: 0 15px;
    position: relative;
    top: 0;
    left: 0;
    background: #399837;
    color: #fff;
    display: inline-block;
}
.training .cards .division {
     display: block;
 }
.cards .division a,
.cards .division a:visited {
     color: #fff;
     text-decoration: none;
}
.cards .use {
    padding: 20px 5px 0;
	color: rgb(83 133 99);
}
.cards .use-name {
    padding: 5px 5px 10px 0;
    /* margin-left: 5px; */
    font-weight: bold;
    /* text-decoration: underline; */
    /* border-bottom: 1px solid; */
    display: block;
    /* width: 100%; */
}
.card_txt{
     padding: 5px;
     -webkit-box-sizing: border-box;
             box-sizing: border-box;
     word-wrap: break-word;
     margin-bottom: 2em;
     line-height: 1.5;
	 font-size: 1.4rem;
}
.card_time{
     position:absolute;
     bottom: 0.3em;
     right:1em;
}
/* //cards */

/* btn */
.txt-hide{
     display: none;
}
span.more {
     /* width: 120px;
     margin: 20px auto;
     display: block;
     background-color: #666;
     color: #fff;
     padding:10px 15px;
     border: none; */
     outline: 0;
     -webkit-transition: .5s;
     -o-transition: .5s;
     transition: .5s;
     -erbkit-transition: .5s;
}
span.more::after {
     /* content: "もっと見る"; */
     -webkit-transition: .2s;
     -o-transition: .2s;
     transition: .2s;
     -erbkit-transition: .2s;
}
/* span.more.on-click::after{
     content: "閉じる";
} */

.light{/*光彩*/
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
         -ms-flex-pack: center;
             justify-content: center;
     -webkit-box-align: end;
         -ms-flex-align: end;
             align-items: flex-end;
     background-color: #fff;
     background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(70%, white));
     background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, white 70%);
     background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 70%);
     background-color: transparent;
     width: 100%;
     height: 230px;
     margin-top: -220px;
     position: absolute;
     /* bottom: 0; */
     left: 0;
}

.op_plus {
     background-color: #399837;
     border-radius: 50%;
     display: block;
     position: relative;
     width: 60px;
     height: 60px;
     margin: 0 auto;
}
.op_plus:hover{
     cursor : pointer;
}
.op_plus:before, .op_plus:after {
     display: block;
     content: '';
     background-color: #fff;
     border-radius: 10px;
     position: absolute;
     width: 30px; /* yoko-length */
     height: 5px;
     top: 50%;
     left: 50%;
     transform: translateY(-50%) translateX(-50%);
     -webkit- transform: translateY(-50%) translateX(-50%);
}
.op_minus:before {
     width: 5px;
     height: 30px; /* tate-length */
     top: 50%;
     left: 50%;
     transform: translateY(-50%) translateX(-50%);
     -webkit- transform: translateY(-50%) translateX(-50%);
}
.op_margin{
     margin: 30px auto -110px;
}
/* //btn */

@media screen and (max-width:768px) {
     .flex{
          display:block;
     }
     .cards{
          margin-top: 30px;
     }
     .card{
          width: 95%;
          margin: 10px auto;
          
          line-height: 2;
          font-size: 18px;
          font-weight: 700;
     }
     .card:nth-child(3n){
          margin-right: auto;
     }
     .card_txt{
          height: 1.5;
     }
     .card_txt {
     padding: 15px 5px;
     height: 7em;
     -webkit-box-sizing: border-box;
             box-sizing: border-box;
     word-wrap: break-word;
     margin-bottom: 2em;
     line-height: 1.5;
}

     .light {
          height: 10%;
          margin-top: -280px;
     }
     .op_plus {
          width: 100px;
          height: 100px;
     }
     .op_margin {
          margin: 0 auto -120px;
     }
}

@media screen and (max-width:480px) {
     .serchBox p {
          display: block;
     }
}