@charset "utf-8";
.navDrawr > ul > li.player-menu {border-bottom: 8px solid #e84709;}
.bg_Box { background:url("../images/player/26_27/player_bg.png"), #00aeac;background-attachment: fixed; background-position: center; }
.wrap{width: 1200px;max-width: 100%;margin: auto;}
.wrap h3 { font-size: 45px; line-height: 45px; font-weight: 600; color: #fff; text-align: center; }
.wrap h3 span { font-size: 20px; line-height: 40px; display: block; }

.sec2 .wrap ul { list-style: none; display: flex; flex-wrap: wrap; width: 100%; padding: 0; justify-content: flex-start;gap: 0 2.3em;}
.sec2 .wrap ul li{ width: calc((100% - 100px) / 4); background: #dfefef; margin: 30px 0 22px; order: var(--order);filter: drop-shadow(10px 10px 0 #fff);position: relative;transition: 0.3s;height: 340px;}
.sec2 .wrap ul li:hover{filter: drop-shadow(10px 10px 0 #e84709);transform: translateY(-10px);}
.sec2 .wrap ul li figure{height: 100%;}
.sec2 .wrap ul li figcaption{position: absolute;bottom: 0;background: linear-gradient(rgba(28,126,141,0) 0%,rgba(28,126,141,1) 70%);width: 100%;padding-top: 20px;}
.sec2 .wrap ul li .inner_a{height: 100%;}
.sec2 .wrap ul li .img{text-align: center;height: 100%;}
.sec2 .wrap ul li img{max-height: 100%;}
.sec2 .wrap ul li .txt01{display: flex;justify-content: flex-start;align-items: end;padding: 10px 3px 5px 10px;}
.sec2 .wrap ul li .txt01 .numberBox{margin-right: 5px;}
.sec2 .wrap ul li .txt01 .numberBox .number{font-size: 85px;line-height: 0.8;color: #FFF;}
.sec2 .wrap ul li .txt01 .nameBox .jp{font-size: 20px;color: #FFF;line-height: 1.3;font-weight: bold;}
.sec2 .wrap ul li .txt01 .nameBox .en{font-size: 30px;color: #FFF;line-height: 1;}
.sec2 .wrap ul li .txt01 .nameBox .en br{display: none;}

.sec3 .wrap ul {list-style: none; display: flex; flex-wrap: wrap; width: 100%; padding: 0; justify-content: space-between;}
.sec3 .wrap ul li{ width: calc((100% - 100px) / 4);margin: 30px 0 22px;filter: drop-shadow(10px 10px 0 #1c7e8d);position: relative;height: 340px;}
.sec3 .wrap ul li .nameBox{position: absolute;bottom: 0;background: linear-gradient(rgba(28,126,141,0) 0%,rgba(28,126,141,1) 70%);width: 100%;padding:  20px 10px 5px 10px;}
.sec3 .wrap ul li .nameBox p{color: #FFF;font-weight: bold;}
.sec3 .wrap ul li .nameBox p.post{font-size: 16px;line-height: 1.2;}
.sec3 .wrap ul li .nameBox p.name{font-size: 20px}

@media screen and (max-width: 1030px) {
  .navDrawr > ul > li.player-menu {border-bottom: none;}
}
@media (min-width: 768px) and (max-width: 1120px) {
  .sec2 .wrap ul{width: 95%;margin: auto;gap: 3em;}
  .sec2 .wrap ul li{ width: calc((100% - 100px) / 3);height: 300px;margin: 0;}
}

/* スマホ: 768px以下 */
@media only screen and (max-width: 768px) {
  .navDrawr > ul > li.player-menu {border-bottom: none;}
  .wrap h3 { font-size: 30px; }
  .wrap h3 span { font-size: 15px; line-height: 25px; }
  .sec2 .wrap ul { width: 95%; margin: 1em auto 0; padding: 0 0 30px;transition: 0s;gap: 0 1.3em ; }
  .sec2 .wrap ul li {width: calc((100% - 20px) / 2);margin: 10px 0px; filter: drop-shadow(5px 5px 0 #fff);height: fit-content;min-height: 200px;;}
	.sec2 .wrap ul li:hover{filter: drop-shadow(5px 5px 0 #e84709);transform: translateY(0px);}
	.sec2 .wrap ul li .txt01 .numberBox .number{font-size:11vw ;}
	.sec2 .wrap ul li .txt01 .nameBox .jp{font-size: 3.2vw;}
	.sec2 .wrap ul li .txt01 .nameBox .en{font-size: 4vw;}

  .sec3 .wrap ul{ width: 95%; margin: 1em auto 0; padding: 0 0 30px;} 
  .sec3 .wrap ul li {width: calc((100% - 20px) / 2);margin: 10px 0px;filter: drop-shadow(5px 5px 0 #1c7e8d); height: fit-content;min-height: 200px;}
  .sec3 .wrap ul li .nameBox p.post{font-size: 3vw;}
  .sec3 .wrap ul li .nameBox p.name{font-size: 3.2vw;}
}