/*----------------------------------------------------
resultTitle
----------------------------------------------------*/
#resultTitle {
padding: 16px 0 0;
}
#resultTitle.final h1 img {
width: 90.4%;
max-width: 324px;
}
#resultTitle.chukan h1 img {
width: 83.7%;
max-width: 314px;
}
@media screen and (min-width: 751px) {
#resultTitle {
padding: 0;
}
#resultTitle.final h1 img {
width: 68.66%;
max-width: 618px;
}
#resultTitle.chukan h1 img {
width: 72%;
max-width: 648px;
}
}
/*----------------------------------------------------
resultHead
----------------------------------------------------*/
#resultHead .detail a {
display: inline-block;
background: #E60012;
color: #ffffff;
font-size: 15px;
line-height: 1.1;
font-weight: bold;
text-decoration: none;
padding: 0.5em 2.5em;
border: solid 1px #ffffff;
box-shadow: 2px 3px 3px rgba(0,0,0,0.1);
}
#resultHead .note .red {
color: #E60012;
}
@media screen and (max-width: 750px) {
#resultHead {
margin-top: 30px;
}
#resultHead .wrap {
filter: drop-shadow(0px 0px 2px rgba(230,0,18,1));
}
#resultHead .spMgnTop,
#resultHead .spMgnBottom {
position: relative;
display: block;
height: 15px;
margin: 0 15px;
background: #ffffff;
}
#resultHead .spMgnTop::before,
#resultHead .spMgnTop::after,
#resultHead .spMgnBottom::before,
#resultHead .spMgnBottom::after {
position: absolute;
width: 0;
height: 0;
content: '';
display: block;
border-style: solid;
z-index: 2;
}
#resultHead .spMgnTop::before {
top: 0;
left: 0;
margin-left: -15px;
border-width: 0 0 16px 16px;
border-color: transparent transparent #ffffff transparent;
}
#resultHead .spMgnTop::after {
top: 0;
right: 0;
margin-right: -15px;
border-width: 16px 0 0 16px;
border-color: transparent transparent transparent #ffffff;
}
#resultHead .spMgnBottom::before {
bottom: 0;
left: 0;
margin: 0 0 0 -15px;
border-width: 16px 16px 0 0;
border-color: transparent #ffffff transparent transparent;
transform: rotate(-90deg);
}
#resultHead .spMgnBottom::after {
bottom: 0;
right: 0;
margin: 0 -15px 0 0;
border-width: 0 16px 16px 0;
border-color: transparent transparent #ffffff transparent;
transform: rotate(90deg);
}
#resultHead .spWrap {
position: relative;
background: #ffffff;
padding: 0 15px;
}
#resultHead .note {
display: none;
}
#resultHead .count {
color: #ffffff;
font-size: 22px;
font-weight: bold;
text-shadow: 1px 1px 0 #E60012,
-1px 1px 0 #E60012,
1px -1px 0 #E60012,
-1px -1px 0 #E60012;
filter: drop-shadow(0px 0px 1px rgba(230,0,18,1));
}
#resultHead .period {
font-size: 15px;
line-height: 1.3;
font-weight: bold;
}
#resultHead .detail {
padding: 10px 0 3px;
}
}
@media screen and (max-width: 370px) {
#resultHead .period span {
display: block;
}
}
@media screen and (min-width: 751px) {
#resultHead {
background: rgba(255,255,255,0.9);
margin-top: 40px;
}
#resultHead .wrap {
padding: 25px 0 20px;
}
#resultHead .note,
#resultHead .period {
display: block;
font-size: 18px;
line-height: 1.5;
font-weight: bold;
margin-bottom: 5px;
}
#resultHead .exArea {
overflow: hidden;
padding-top: 8px;
}
#resultHead .count {
display: inline-block;
font-size: 25px;
line-height: 1.2;
font-weight: bold;
margin-right: 15px;
}
#resultHead .count.forSP {
display: none;
}
#resultHead .detail {
display: inline-block;
}
#resultHead .detail {
vertical-align: top;
}
#resultHead .detail a {
font-size: 18px;
padding: 0.2em 1em;
transition: all 0.2s;
}
#resultHead .detail a:hover {
color: #E60012;
background: #ffffff;
border-color: #E60012;
}
}
/*----------------------------------------------------
resultTab
----------------------------------------------------*/
.resultTab {
margin-top: 45px;
}
.resultTab ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.resultTab li {
opacity: 0.8;
width: 24%;
margin-right: 1.3333%;
box-shadow: 3px 3px 6px rgba(0,0,0,.2);
}
.resultTab li:last-child {
margin-right: 0;
}
.resultTab li.active {
opacity: 1;
}
.resultTab.chuukannkekka li {
width: 50%;
margin-right: 0;
opacity: 1;
}
@media screen and (max-width: 750px) {
.resultTab {
margin-top: 40px;
}
.resultTab li {
width: 33.3333%;
margin-right: 0;
opacity: 1;
}
.resultTab li.active {
display: none;
}
.resultTab.chuukannkekka li.active {
display: block;
}
}
@media screen and (min-width: 751px) {
.resultTab li {
cursor: pointer;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.resultTab li.active {
cursor: default;
}
.resultTab li.active,
.resultTab li:hover {
opacity: 1;
}
}
/* resulttab_img */
.resulttab_img {
margin-top: 12px;
box-shadow: 3px 3px 6px rgba(0,0,0,.2);
}
.resulttab_img p {
display: none;
}
.resulttab_img p.active {
display: block;
}
@media screen and (min-width: 751px) {
.resulttab_img {
margin-top: 20px;
}
}
/*----------------------------------------------------
resultBody
----------------------------------------------------*/
.resultBody {
padding-bottom: 60px;
}
.resultBody .block {
display: none;
padding-top: 20px;
}
.resultBody .block.active {
display: block;
}
@media screen and (min-width: 751px) {
.resultBody {
padding-bottom: 120px;
}
.resultBody .block {
padding-top: 32px;
border-top-width: 5px;
}
.resultBody .block.skyblue a {
transition: 0.3s all;
}
.resultBody .block.skyblue a:hover .title {
color:#2C5DFF;
}
.resultBody .block.red a:hover .title {
color:#2C5DFF;
}
.resultBody .block.green a:hover .title {
color:#2C5DFF;
}
.resultBody .block.blue a:hover .title {
color:#2C5DFF;
}
}
/* head */
.resultBody .tab .head {
margin: 0 3.33333%;
}
.resultBody .tab .head li {
font-size: 14px;
padding: 1.2em 0;
}
.resultBody .tab .head li span {
position: relative;
display: inline-block;
padding: 0 1.4em;
}
.resultBody .tab .head li span::before,
.resultBody .tab .head li span::after {
position: absolute;
top: 3px;
content: '';
display: block;
width: 15px;
height: 10px;
background-image: url(../img/crown_white.png);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 100% 100%;
}
.resultBody .tab .head li span::before {
left: 0;
}
.resultBody .tab .head li span::after {
right: 0;
}
.resultBody .tab .head li.active span::before,
.resultBody .tab .head li.active span::after,
.resultBody .tab .head li:hover span::before,
.resultBody .tab .head li:hover span::after {
background-image: url(../img/crown_white.png)!important;
}
.resultBody .tab .head li.purple span::before,
.resultBody .tab .head li.purple span::after {
background-image: url(../img/crown_purple.png);
}
.resultBody .tab .head li.pink span::before,
.resultBody .tab .head li.pink span::after {
background-image: url(../img/crown_pink.png);
}
.resultBody .tab .head li.green span::before,
.resultBody .tab .head li.green span::after {
background-image: url(../img/crown_green.png);
}
.resultBody .tab .head li.yellow span::before,
.resultBody .tab .head li.yellow span::after {
background-image: url(../img/crown_yellow.png);
}
.resultBody .tab .head li.blue span::before,
.resultBody .tab .head li.blue span::after {
background-image: url(../img/crown_blue.png);
}
@media screen and (min-width: 751px) {
.resultBody .tab .head {
margin: 0;
}
.resultBody .tab .head li {
font-size: 16px;
padding: 0.8em 0;
}
.resultBody .tab .head li span {
padding: 0 2.8em;
}
.resultBody .tab .head li span::before,
.resultBody .tab .head li span::after {
top: -2px;
height: 20px;
}
}
#pageRanking .block .legend {
display: block;
}
/* body */
.resultBody .tab .body .contain {
background: transparent;
}
.resultBody .contain .note {
font-size: 13px;
line-height: 1.5;
margin-top: 10px;
}
.resultBody .contain .note .red {
color: #E60012;
}
.resultBody .contain li a {
display: block;
text-decoration: none;
}
.resultBody .contain .media {
font-size: 10px;
line-height: 16px;
width: 100%;
}
.resultBody .contain .year {
display: block;
margin-right: 10px;
font-size: 11px;
line-height: 1.2;
}
@media screen and (max-width: 750px) {
.resultBody .contain .year {
color: #737373;
}
}
@media screen and (min-width: 751px) {
.resultBody .contain .note {
font-size: 16px;
margin-top: 0;
}
.resultBody .contain .category {
display: flex;
align-items: center;
width: 180px;
}
.resultBody .contain .media {
font-size: 16px;
line-height: 26px;
}
.resultBody .contain .year {
font-size: 14px;
line-height: 1.4;
}
}
@media screen and (max-width: 750px) {
.resultBody .rankList li .detail {
text-align: left;
}
.resultBody .contain .category {
width: 75px;
}
.resultBody .contain .category img {
position: absolute;
right: 10px;
width: 55px;
top: 50%;
margin-top: -10px;
}
}
/* rankList */
.rankList {
padding-top: 10px;
}
.rankList img.m_icon {
width: 160px;
}
.rankList li {
position: relative;
margin-top: 40px;
padding: 10px 0 0 20px;
}
.rankList li .rank {
position: absolute;
top: 0;
left: 0;
width: 45px;
height: 66px;
box-sizing: border-box;
color: #ffffff;
font-size: 12px;
line-height: 1.1em;
font-weight: bold;
text-align: center;
background: url(../img/rank_chara_sp.png) no-repeat 0 0;
background-size: 100% 100%!important;
padding: 22px 2px 0 0;
z-index: 2;
}
.rankList li .rank em {
font-size: 16px;
}
.rankList li .wrap {
background: #ffffff;
box-shadow: 3px 3px 3px rgba(0,0,0,.2);
padding: 25px 10px 25px 35px;
text-align: left;
}
.rankList li .wrap .text {
font-size: 16px;
line-height: 1.5;
font-family:
'リュウミン EH-KL',
'游明朝',
'Yu Mincho',
YuMincho,
'Hiragino Mincho ProN',
'Hiragino Mincho Pro',
'HGS明朝E',
'メイリオ',
Meiryo,
serif;
font-weight: bold;
}
#charaBody .rankList li .rank {
background-image: url(../img/rank_chara_sp.png);
}
#wordsBody .rankList li .rank {
background-image: url(../img/rank_words_sp.png);
}
#evaBody .rankList li .rank {
background-image: url(../img/rank_eva_sp.png);
}
#angelBody .rankList li .rank {
background-image: url(../img/rank_angel_sp.png);
}
#charaBody .rankList li.top1 .rank,
#charaBody .rankList li.top2 .rank,
#charaBody .rankList li.top3 .rank {
background-image: url(../img/rank_chara_p_sp.png);
}
#wordsBody .rankList li.top1 .rank,
#wordsBody .rankList li.top2 .rank,
#wordsBody .rankList li.top3 .rank {
background-image: url(../img/rank_words_p_sp.png);
}
#evaBody .rankList li.top1 .rank,
#evaBody .rankList li.top2 .rank,
#evaBody .rankList li.top3 .rank {
background-image: url(../img/rank_eva_p_sp.png);
}
#angelBody .rankList li.top1 .rank,
#angelBody .rankList li.top2 .rank,
#angelBody .rankList li.top3 .rank {
background-image: url(../img/rank_angel_p_sp.png);
}
@media screen and (min-width: 751px) {
.rankList {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.rankList li {
width: 100%;
padding: 10px 0 0 0;
}
.rankList li .rank {
left: -2px;
font-size: 9px;
width: 50px;
height: 60px;
background: url(../img/rank_chara_pc.png) no-repeat 0 0;
padding: 16px 3px 0 0;
}
.rankList li .rank em {
font-size: 15px;
}
.rankList li .wrap {
padding: 25px 10px 25px 70px;
}
.rankList li .wrap .text {
font-size: 20px;
}
.rankList li a .wrap,
.rankList li a .wrap .text {
transition: all 0.3s;
}
.rankList li a:hover .wrap {
background: rgba(255,255,255,0.9);
}
.rankList li a:hover .wrap .text {
color: #00A2FF;
}
#charaBody .rankList li a:hover .wrap .text {
color: #00A2FF;
}
#wordsBody .rankList li a:hover .wrap .text {
color: #0067AE;
}
#evaBody .rankList li a:hover .wrap .text {
color: #AF57D7;
}
#angelBody .rankList li a:hover .wrap .text {
color: #076780;
}
#charaBody .rankList li .rank {
background-image: url(../img/rank_chara_pc.png);
}
#wordsBody .rankList li .rank {
background-image: url(../img/rank_words_pc.png);
}
#evaBody .rankList li .rank {
background-image: url(../img/rank_eva_pc.png);
}
#angelBody .rankList li .rank {
background-image: url(../img/rank_angel_pc.png);
}
.rankList li.top1 .rank,
.rankList li.top2 .rank {
font-size: 14px;
width: 60px;
height: 70px;
padding-top: 26px;
}
.rankList li.top1 .rank em,
.rankList li.top2 .rank em {
font-size: 22px;
}
.rankList li.top3 .rank,
.rankList li.top4 .rank,
.rankList li.top5 .rank {
padding-top: 20px;
}
#charaBody .rankList li.top1 .rank,
#charaBody .rankList li.top2 .rank,
#charaBody .rankList li.top3 .rank {
background-image: url(../img/rank_chara_p_pc.png);
}
#wordsBody .rankList li.top1 .rank,
#wordsBody .rankList li.top2 .rank,
#wordsBody .rankList li.top3 .rank {
background-image: url(../img/rank_words_p_pc.png);
}
#evaBody .rankList li.top1 .rank,
#evaBody .rankList li.top2 .rank,
#evaBody .rankList li.top3 .rank {
background-image: url(../img/rank_eva_p_pc.png);
}
#angelBody .rankList li.top1 .rank,
#angelBody .rankList li.top2 .rank,
#angelBody .rankList li.top3 .rank {
background-image: url(../img/rank_angel_p_pc.png);
}
.rankList li.award .modal .wrap {
background: #ffffff;
}
.rankList li.award .modal .wrap img {
transition: all 0.3s;
}
.rankList li.award .modal:hover .wrap img {
opacity: 0.75;
}
}
#wordsBody .wrap .min {
width: 100%;
margin-top: 1.5em;
color: #45779A;
font-size: 14px;
line-height: 1.3;
font-weight: bold;
}
/* watch */
#charaBody .watch {
position: relative;
}
#charaBody .watch .modal {
padding-bottom: 50px;
}
#charaBody .watch .m_icon {
position: absolute;
bottom: 0;
right: -7px;
}
@media screen and (min-width: 751px) {
#charaBody .watch .wrap {
position: relative;
padding-right: 180px;
}
#charaBody .watch .modal {
padding-bottom: 0;
}
#charaBody .watch .m_icon {
bottom: 50%;
right: 10px;
margin-bottom: -25px;
}
}
/* withIcon */
.watch.withIcon {
position: relative;
}
.watch.withIcon .modal {
padding-bottom: 50px;
}
.watch.withIcon .m_icon {
position: absolute;
bottom: 0;
right: -7px;
}
@media screen and (min-width: 751px) {
.watch.withIcon .wrap {
position: relative;
padding-right: 180px;
}
.watch.withIcon .modal {
padding-bottom: 0;
}
.watch.withIcon .m_icon {
bottom: 50%;
right: 10px;
margin-bottom: -25px;
}
}
.rankList li.award .modal {
padding-bottom: 50px;
}
.rankList li.award .wrap {
padding: 0;
height: 100%;
}
.rankList li.award .m_icon {
position: absolute;
bottom: 0;
right: -7px;
}
.rankList li.award .name {
background: #000000;
color: #ffffff;
font-size: 20px;
line-height: 1.3;
text-align: center;
padding: 25px;
font-family:
'リュウミン EH-KL',
'游明朝',
'Yu Mincho',
YuMincho,
'Hiragino Mincho ProN',
'Hiragino Mincho Pro',
'HGS明朝E',
'メイリオ',
Meiryo,
serif;
font-weight: bold;
}
@media screen and (min-width: 751px) {
.rankList li.top1,
.rankList li.top2 {
width: 44.4444%;
}
.rankList li.top3,
.rankList li.top4,
.rankList li.top5 {
width: 29.4444%;
}
.rankList li.award .name {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
text-align: center;
}
.rankList li.award span {
display: inline-block;
margin: 0 auto;
}
.rankList li.top1 .name,
.rankList li.top2 .name {
font-size: 25px;
padding: 10px;
}
.rankList li.top3 .name,
.rankList li.top4 .name,
.rankList li.top5 .name {
font-size: 20px;
padding: 12px 10px;
}
}
/* wordsBody */
#wordsBody .rankList .exp {
padding: 25px 20px 20px;
}
#wordsBody .rankList .exp .text {
font-size: 20px;
}
@media screen and (min-width: 751px) {
#wordsBody .rankList li.top1,
#wordsBody .rankList li.top2,
#wordsBody .rankList li.top3,
#wordsBody .rankList li.top4,
#wordsBody .rankList li.top5 {
width: 100%;
}
#wordsBody .rankList .wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#wordsBody .rankList .img {
width: 50%;
}
#wordsBody .rankList .img img {
display: block;
}
#wordsBody .rankList .exp {
width: 50%;
padding: 25px 25px 20px;
box-sizing: border-box;
}
#wordsBody .rankList .exp .text {
font-size: 24px;
}
}
@media screen and (min-width: 1001px) {
#wordsBody .rankList .exp .text {
font-size: 30px;
}
}
/*----------------------------------------------------
modal
----------------------------------------------------*/
.rankList.mod li {
padding: 0;
}
.rankList.mod .rank {
top: -2px;
left: 10px;
}
.rankList.mod .wrap {
padding: 15px 10px 15px 70px;
font-size: 20px;
line-height: 1.3;
font-family:
'リュウミン EH-KL',
'游明朝',
'Yu Mincho',
YuMincho,
'Hiragino Mincho ProN',
'Hiragino Mincho Pro',
'HGS明朝E',
'メイリオ',
Meiryo,
serif;
font-weight: bold;
}
@media screen and (min-width: 751px) {
.rankList.mod .wrap {
position: relative;
padding: 20px 10px 20px 70px;
color: #ffffff;
font-size: 35px;
text-align: center;
border: solid 2px #E60012;
background: #000000 url(../img/modal_arrow.png) no-repeat right 10px bottom 5px;
background-size: 80px auto;
}
}
.mfp-content .block {
display: block;
border-top: none;
border-top: 0;
padding-top: 0;
}
.mfp-content .rankList {
padding-top: 0;
}
.mfp-content .rankList li {
margin-top: 0;
}
.mfp-content .rankList li .text {
color: #555555;
}
.mfp-content .rankList li .body {
text-align: center;
}
.mfp-content .rankList li .body .title {
font-size: 50px;
}
.mfp-content .rankList li .body .title_year {
font-size: 14px;
color: #555555;
}
@media screen and (max-width: 750px) {
.mfp-content .rankList li .body .title {
font-size: 20px;
}
}
/* allTitle */
.allTitle {
color: #cf0000;
background: #ffffff;
font-size: 20px;
line-height: 40px;
font-weight: bold;
text-align: center;
border-radius: 20px;
}
@media screen and (min-width: 751px) {
.allTitle {
font-size: 51px;
line-height: 90px;
border-radius: 45px;
}
}
/* mGraph */
.mGraph {
margin-top: 10px;
padding: 15px 5px 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
color: #ffffff;
/* background: #000000; */
background-repeat: no-repeat;
background-position: center center;
background-size: cover!important;
}
.mGraph .ratio,
.mGraph .age {
width: 46%;
}
@media screen and (min-width: 751px) {
.mGraph {
margin-top: 20px;
padding: 40px 12px;
}
}
/* mTitle */
.mTitle {
position: relative;
background: #ff8800;
font-weight: bold;
text-align: center;
font-size: 18px;
line-height: 26px;
border-radius: 13px;
border: solid 2px #ffffff;
box-sizing: border-box;
margin-bottom: 25px;
}
.ratio .mTitle {
background: #fb9392;
background: -moz-linear-gradient(-45deg, #60b8ff 0%, #60b8ff 40%, #fc9493 60%, #fc9493 100%);
background: -webkit-linear-gradient(-45deg, #60b8ff 0%,#60b8ff 40%,#fc9493 60%,#fc9493 100%);
background: linear-gradient(135deg, #60b8ff 0%,#60b8ff 40%,#fc9493 60%,#fc9493 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#60b8ff', endColorstr='#fc9493',GradientType=1 );
}
.mTitle::after {
position: absolute;
bottom: -16px;
left: 50%;
display: block;
content: '';
box-sizing: border-box;
margin-left: -8px;
width: 8px;
height: 8px;
border: 8px solid transparent;
border-top: 8px solid #ffffff;
}
@media screen and (min-width: 751px) {
.mTitle {
font-size: 32px;
line-height: 46px;
border-radius: 22px;
margin-bottom: 60px;
}
.mTitle::after {
bottom: -24px;
margin-left: -12px;
width: 12px;
height: 12px;
border: 12px solid transparent;
border-top: 12px solid #ffffff;
}
}
/* barGraph */
.barGraph li .dec {
font-size: 15px;
line-height: 1.2;
text-align: left;
font-weight: bold;
}
.barGraph li .dec .per {
display: inline-block;
font-size: 13px;
padding-left: 0.5em;
}
.barGraph li .data {
height: 20px;
margin: 4px 0 12px;
}
.barGraph li .data span {
display: block;
height: 20px;
font-size: 13px;
line-height: 20px;
background: #ff9f00;
-moz-animation: anime1 1s 1 ease;
-webkit-animation: anime1 1s 1 ease;
animation: anime 1s 1 ease;
}
@-webkit-keyframes anime {
0% {
width: 0px;
}
}
@keyframes anime {
0% {
width: 0px;
}
}
@media screen and (min-width: 751px) {
.barGraph li .dec {
font-size: 20px;
line-height: 1;
}
.barGraph li .dec .per {
display: block;
font-size: 18px;
line-height: 1;
padding: 3px 0 0 0;
}
.barGraph li {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.barGraph li .dec {
width: 5em;
font-size: 28px;
line-height: 40px;
text-align: right;
border-right: solid 3px #ffffff;
padding: 0 4px 15px 0;
}
.barGraph li .data {
flex: 1;
}
.barGraph li .data span {
height: 50px;
margin: 5px 0 15px;
}
}
.tab .head li:hover.purple {
background: #C267FF;
}
.tab .head li.active.purple {
background: #C267FF;
}
