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

/*検索窓*/
.searchBox{ width: 480px; max-width: 100%; margin: 0 auto;}
.searchBox table{ width: 100%;  }
.searchBox table td{ }
.searchBox table .input_area{  width: calc(100% - 90px) ; }
.searchBox table .input_area input{border: 2px solid #999; border-right: none; border-radius: 25px 0 0 25px; width: 100%; padding: 12px 20px; font-size: 1.6rem;}
.searchBox table .button_area{ width: 90px; }
.searchBox table .button_area button{background-color: #0a3e6f; border: 2px solid #0a3e6f; color: #fff; text-align: center; width: 100%; height: 100%; border-radius: 0 25px 25px 0; padding: 12px 10px; cursor: pointer; font-size: 1.6rem;}
.searchBox table .button_area button:hover{ opacity: 0.6;}
.searchBox table .button_area button:before{font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f002"; margin-right: 5px; speak: none;}
.searchBox table .button_area button:after{ content: '検索'; font-weight: bold;}

/*動画リスト*/
.mov_list{ margin-top: 60px;}
.mov_list .item{ width: 22%; margin-right: 4%; margin-bottom: 40px; }
.mov_list .item .youtube{ overflow: hidden; }
.mov_list .item .youtube img{ position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.mov_list .item:nth-of-type(4n){ margin-right: 0;}
.mov_list .item a{ text-decoration: none; display: block; width: 100%; height: 100%; position: relative;}
.mov_list .item a:after{content:''; width: 100%; height: 100%; background-color: hsla(0,0%,100%,1.00); z-index: +1; position: absolute; top: 0; left: 0; opacity: 0; transition: all 0.2s ease-in 0s;}
.mov_list .item a:hover:after{ opacity: 0.6;}
.mov_list .item .stars{ margin-bottom: 10px;}
.mov_list .item p{ margin-bottom: 10px; line-height: 1.4; }
.mov_list .item p.name{ font-size: 1.8rem; color: #0a3e6f; font-weight: 600; margin-top: 10px !important;}
.mov_list .item p.title{ font-size: 1.6rem; color: #666; font-weight: 600;}

/*星*/
.stars { color: #ccc;}
.stars span:nth-of-type(1) { color: #ffc0c1; }
.stars span:nth-of-type(2) { color: #ff9d9e; }
.stars span:nth-of-type(3) { color: #f86b6d; }
.stars span:nth-of-type(4) { color: #f95d60; }
.stars span:nth-of-type(5) { color: #f74d51; }
.stars.level0 span{ display: none;}
.stars.level01 span{ display: none;}
.stars.level01 span:nth-of-type(1) { display: inline; }
.stars.level02 span{ display: none;}
.stars.level02 span:nth-of-type(1) ,.stars.level02 span:nth-of-type(2){ display: inline; }
.stars.level03 span{ display: none;}
.stars.level03 span:nth-of-type(1) ,.stars.level03 span:nth-of-type(2),.stars.level03 span:nth-of-type(3){ display: inline; }
.stars.level04 span{ display: none;}
.stars.level04 span:nth-of-type(1) ,.stars.level04 span:nth-of-type(2),.stars.level04 span:nth-of-type(3),.stars.level04 span:nth-of-type(4){ display: inline; }
.stars.level05 span{ display: inline;}
.stars.level06 span{ display: inline; color: #ea2d32;}
.stars.level06 span:nth-of-type(1) { opacity: 0.6;}
.stars.level06 span:nth-of-type(2) { opacity: 0.7;}
.stars.level06 span:nth-of-type(3) { opacity: 0.8;}
.stars.level06 span:nth-of-type(4) { opacity: 0.9;}
.stars.level06 span:nth-of-type(5) { opacity: 1;}
.stars.level07 span{ color: #ffbca2;}
.stars.level07 span:nth-of-type(2) { color: #ffa381;}
.stars.level07 span:nth-of-type(3) { color: #ff875c;}
.stars.level07 span:nth-of-type(4) { color: #ff7841;}
.stars.level07 span:nth-of-type(5) { color: #ff6a2f;}
.stars.level08 span:nth-of-type(1){ color: #ffc3df;}
.stars.level08 span:nth-of-type(2) { color: #ffaad3;}
.stars.level08 span:nth-of-type(3) { color: #ff8cc3;}
.stars.level08 span:nth-of-type(4) { color: #ff6fb5;}
.stars.level08 span:nth-of-type(5) { color: #ff4ba4;}
.stars.level09 span:nth-of-type(1){ color: #ed716e;}
.stars.level09 span:nth-of-type(2) { color: #ec5d58;}
.stars.level09 span:nth-of-type(3) { color: #eb4a42;}
.stars.level09 span:nth-of-type(4) { color: #ea3c31;}
.stars.level09 span:nth-of-type(5) { color: #ea3325;}
.stars.level10 span:nth-of-type(1){ color: #f8d8d9;}
.stars.level10 span:nth-of-type(2) { color: #f7d1d3;}
.stars.level10 span:nth-of-type(3) { color: #f6cacc;}
.stars.level10 span:nth-of-type(4) { color: #f6c4c6;}
.stars.level10 span:nth-of-type(5) { color: #f5bebf;}

/*検索結果ページネーション*/
.pagination{ width: 100%;}
.pagination table{ margin: 0 auto;}
.pagination table td{ padding: 0.5em;}
.pagination table a{ color: #666; text-decoration: none; font-weight: 400;}
.pagination table a.current,.pagination table a:hover{ color:#0a3e6f; font-weight: 700;}
.pagination table td.btn a{font-family: "Font Awesome 5 Free"; font-weight: 900; background-color: transparent; border: none; width: auto; height: auto;}
.pagination table td.btn.prev a:before{ content: '\f100';}
.pagination table td.btn.next a:before{ content: '\f101';}

/*モーダル*/
.content_modal .flexBox{ width: 600px; max-width:calc( 100% - 40px); margin: 0 auto; flex-direction: column; align-items: center;}
.content_modal .youtube{ width: 100%;  margin-bottom: 25px;}
.content_modal button.vote{ width: 340px; max-width: 90%; border-radius: 10px; padding: 1em; font-size: 1.8rem; font-weight: 600; text-align: center; background-color: #003366; border: 2px solid #003366; color: #fff; margin-bottom: 20px; box-shadow: 0 3px 0 hsla(0,0%,0%,0.2); transition: all 0.2s ease-in 0s; }
.content_modal button.vote:before{ content: '投票する'; cursor: pointer;}
.content_modal button.vote:hover{box-shadow: 0 0 0 hsla(0,0%,0%,0.2); transform: translateY(3px);}
.content_modal p{ margin-bottom: 10px; line-height: 1.4; }
.content_modal p.name{ font-size: 1.4rem; color: #0a3e6f;}
.content_modal p.title{ font-size: 1.6rem; color: #666; font-weight: 600; }
.content_modal .txtBox{ margin-top: 20px;}

/*ポップアップ*/
.content_modal.pop{ padding: 80px 0;}
p.back a{ width: fit-content; margin: 30px auto 0; display: block; font-size: 1.6rem; font-weight: 600; color: #0a3e6f; text-decoration: none;}
p.back a:before{font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f359"; margin: 0 0.5em 0 0; speak: none; display: inline-block;}
p.back a:hover:before{ transform: translateX(-5px);}

@media screen and (max-width:1024px) {
.mov_list .item{ width: 30%; margin-right: 5%; }
.mov_list .item:nth-of-type(4n){ margin-right: 5%;}
.mov_list .item:nth-of-type(3n){ margin-right: 0;}
}

@media screen and (max-width:640px){
.mov_list .item{ width: 47.5%; }
.mov_list .item:nth-of-type(3n){ margin-right: 5%;}
.mov_list .item:nth-of-type(2n){ margin-right: 0;}
	
}