@charset "UTF-8";
@media screen and (max-width: 768px){
    .content-wrap.w100_sp{
        padding: 0;
    }
}
/* ---------------------------------------------
	プロ野球100人分の1位
--------------------------------------------- */
.content-wrap h2{ margin-bottom: 0.5em;}
.pb100__year{
    background-color: #002c8c;
    display: inline-block;
    margin: 0 auto;
    color: #fff;
    line-height: 1.1;
    font-size: 88%;
    margin-top: 0.2em;
    padding: 0 0.3em;
}
.pb100__intro{
    text-align: center;
    font-size: 104%;
    line-height: 1.6;
    margin-bottom: 1em;
}
.pb100__schedule{
    background-color: rgba(255,255,255,0.5);
    font-weight: bold;
    font-size: 114%;
    color: #ea5504;
    margin: 0 0.5em 1.2em;
    text-align: center;
    padding: 0.3em 0;
}
/* ------------タブ------------ */
.pb100__tab{
    display: flex;
    justify-content: space-between;
    border-bottom: solid 0.4em #ea5504;
    padding: 0 0.4em;
}
.pb100__tab > li{
    background-color: #ea5504;
    color: #fff;
    flex-grow: 1;
    margin: 0 0.4%;
    line-height: 2.2em;
    border-radius: 0.4em 0.4em 0 0;
    padding: 0.7em 0 0.5em;
    transition: all 300ms;
}
.pb100__tab > li.comingsoon{
    background-color: #002c8c6b;
    color: rgba(255,255,255,0.6);
}
.pb100__tab > li.comingsoon::after{
    content: "coming soon";
    line-height: 1.2;
    display: flex;
    align-items: last baseline;
    justify-content: center;
    margin-top: 0.2em;
}
.pb100__tab > li.off{
    background-color: #002c8cbf;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
}
.pb100__tab > li.off:hover{
    background-color: #002c8c;
    color: #fff;
}
.pb100__tab__item{
    font-size: 140%;
    font-weight: bold;
    line-height: 1.2;
    display: flex;
    align-items: last baseline;
    justify-content: center;
}
.pb100__tab__item::after{
    content: "部門";
    font-size: 70%;
    margin-left: 0.2em;
}
.pb100__tab__oadate{
    line-height: 1.2;
    display: flex;
    align-items: last baseline;
    justify-content: center;
    margin-top: 0.2em;
}

@media screen and (max-width: 768px){
    .pb100__tab-wrap{
        overflow-x: scroll;
    }
    .pb100__tab{ width: 144%;}
    .pb100__tab__item{ font-size: 120%;}
}
/* ------------ランキング------------ */
.pb100__main{
    background-color: rgba(255,255,255,0.5);
    padding: 2em;
}
.pb100__ranking{
    width: 60%;
    margin: 0 auto;
}
.pb100__ranking__comingsoon{
    text-align: center;
    padding: 1em 0 0;
}
.pb100__ranking > dl{
    display: flex;
    font-size: 110%;
    font-weight: bold;
    line-height: 1.2;
    background-color: #fff;
    margin-bottom: 3px;
    align-items: center;
}
.pb100__ranking > dl:nth-child(n+9){
    display: none;
}
.pb100__ranking > dl.top1,
.pb100__ranking > dl.top2,
.pb100__ranking > dl.top3{
    font-size: 130%;
}
.pb100__ranking__rank{
    width: 15%;
    padding: 0.6em 0;
    text-align: center;
    /* background-color: #002c8c;
    color: #fff; */
    border-right: solid 0.3em #002c8c;
    box-sizing: border-box;
}
/* .top1 .pb100__ranking__rank{ background-color: #948427;}
.top2 .pb100__ranking__rank{ background-color: #747474;}
.top3 .pb100__ranking__rank{ background-color: #905139;} */
.top1 .pb100__ranking__rank{ border-right: solid 0.3em #bfac3f;}
.top2 .pb100__ranking__rank{ border-right: solid 0.3em #838383;}
.top3 .pb100__ranking__rank{ border-right: solid 0.3em #a96245;}
.pb100__ranking__rank::after{
    content: "位";
    font-size: 88%;
    margin-left: 0.1em;
}
.pb100__ranking__rank.other::after{ display: none;}
.pb100__ranking__name{
    margin-left: 0.6em;
    width: calc( 85% - 4em);
}
.pb100__ranking__name span{
    font-size: 80%;
}
.pb100__ranking__num{
    font-size: 94%;
}
.pb100__ranking__num::after{
    content: "票";
}
.pb100__ranking_btn{
    background-color: #fff;
    padding: 0.1em 0 1em;
    margin-top: -0.1em;
    position: relative;
    cursor: pointer;
}
.pb100__ranking_btn::before{
    content: "";
    display: block;
    position: absolute;
    top: -3em;
    left: 0;
    width: 100%;
    height: 3em;
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}
.pb100__ranking_btn.on::before{ display: none;}
.pb100__ranking_btn p{
    background-color: #ea5504;
    display: block;
    width: 80%;
    margin: 0.4em auto 0;
    text-align: center;
    color: #fff;
    font-weight: bold;
    line-height: 3em;
    border-radius: 5em;
    position: relative;
}
.pb100__ranking_btn p::after{
    content: "";
	display: block;
	position: absolute;
    top: 50%; right: 5%;
	margin: -0.35em 0 0 0;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0.7em 0.45em 0 0.45em;
	border-color: #fff transparent transparent transparent;
    transition: all 200ms;
}
.pb100__ranking_btn.on p::after{
    transform: rotate(180deg);
}
.cx_displaydevice .pb100__ranking_btn:hover p{ background-color: #ff6410;}

@media screen and (max-width: 768px){
    .pb100__main{ padding: 1.6em 1em;}
    .pb100__ranking{ width: 100%;}
    .pb100__ranking > dl{ font-size: 104%;}
    .pb100__ranking > dl.top1, .pb100__ranking > dl.top2, .pb100__ranking > dl.top3{ font-size: 120%;}
    .pb100__ranking__rank{ width: 13%;}
    .pb100__ranking__name{ margin-left: 0.3em; width: calc( 87% - 3em);}
}
/* ------------グッズ------------ */
.pb100__goods{
    margin-top: 2.5em;
    padding-top: 1.5em;
    border-top: dashed 0.1em #ff6410;
}
.pb100__goods__ttl{
    text-align: center;
    color: #002c8c;
    font-weight: bold;
    font-size: 140%;
}
.pb100__goods__intro{
    text-align: center;
    line-height: 1.4;
    margin-top: 0.3em;
}
.pb100__goods__intro span{
    font-weight: bold;
    color: #867619;
    position: relative;
    display: inline-block;
}
.pb100__goods__intro span::after{
    content: "";
    display: block;
    position: absolute;
    bottom: -0.1em; left: 0;
    width: 100%;
    height: 0.2em;
    background-color: #9e8e2f;
}
.pb100__goods__intro.strong{
    background-color: #9e8e2f; color: #fff; font-weight: bold;
    padding: 0.2em;
}
.pb100__goods__attention{
    text-align: center;
    font-size: 80%;
    line-height: 1.4;
    margin-top: 0.3em;
}
.pb100__goods__list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 1em;
}
.pb100__goods__list > li{
    width: 24.5%;
    background-color: rgba(255,255,255,0.5);
    box-shadow: 1px 1px 1em rgba(0,0,0,0.16);
    margin-bottom: 1em;
}
.pb100__goods__list__item{
    padding: 0.4em 0.6em;
    line-height: 1.4;
    font-weight: bold;
}
.pb100__goods__btn a{
    background-color: #ea5504;
    display: block;
    width: 60%;
    margin: 0.6em auto 0;
    text-align: center;
    color: #fff;
    font-weight: bold;
    line-height: 3em;
    border-radius: 5em;
    position: relative;
}
.pb100__goods__btn a::after{
    content: "";
	display: block;
	position: absolute;
    top: 50%; right: 5%;
	margin: -0.35em 0 0 0;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0.45em 0 0.45em 0.7em;
	border-color: transparent transparent transparent #fff;
    transition: all 200ms;
}
.cx_displaydevice .pb100__goods__btn a:hover{ background-color: #ff6410;}

.pb100__goods__btn.comingsoon a{
    background-color: #ea550461;
    color: #ffffff85;
}
.pb100__goods__btn.comingsoon a::after{border-color: transparent transparent transparent #ffffff9e;}
.pb100__goods__btn.comingsoon a::before{
    content: "11月8日(日)番組終了後、受注スタート！";
    position: absolute;
    color: #002c8c;
    line-height: 1;
    top: 50%; left: 0; right: 0;
    margin: -0.5em auto 0;
}
.cx_displaydevice .pb100__goods__btn.comingsoon a:hover{ background-color: #ea55047c;}
@media screen and (max-width: 768px){
    .pb100__goods__list > li{ width: 49%;}
    .pb100__goods__btn a{ width: 90%;}
    .pb100__goods__list__item{ font-size: 91%;}
}