#ranking2023{font-family:"ヒラギノ角ゴ ProN W3",Hiragino Kaku Gothic ProN,-apple-system,BlinkMacSystemFont,"Yu Gothic",YuGothic,Arial,"メイリオ",Meiryo,sans-serif;font-size:16px;padding-bottom:60px;background-image:url(../img/ranking2023/background.png);background-attachment:fixed;background-size:cover;background-position:center;background-repeat:no-repeat;position:relative;}

#ranking2023 div#keyvisual{padding:0;text-align:center;margin:0 auto;}
#ranking2023 div#keyvisual img{padding:50px 0;}

#ranking2023 .description{width:640px;margin:30px auto;padding-bottom:50px;text-align:left;}
#ranking2023 .description p{font-size:20px;color:#fff;font-weight:600;}

#ranking2023 ul#menu{max-width:1000px;width:100%;margin:30px auto 50px;}
#ranking2023 ul#menu li{display:inline-block;width:30%;text-align:center;}
#ranking2023 ul#menu li:nth-child(2){margin:0 5%;}

#ranking2023 .ranking{text-align:center;max-width:1270px;width:100%;margin:30px auto;}
#ranking2023 .ranking ul{margin:50px auto;text-align:left;}
#ranking2023 .ranking ul li{width:440px;display:inline-block;vertical-align:top;background-color:#fff;padding:15px 25px 25px;margin-bottom:40px;font-size:20px;text-align:left;}
#ranking2023 .ranking ul li:first-child{display:block;margin:0 auto 30px;}
#ranking2023 .ranking ul li:nth-child(2),
#ranking2023 .ranking ul li:nth-child(4),
#ranking2023 .ranking ul li:nth-child(6),
#ranking2023 .ranking ul li:nth-child(8),
#ranking2023 .ranking ul li:nth-child(10){margin-left:calc((100% - 880px) / 5 * 2);}
#ranking2023 .ranking ul li:nth-child(3),
#ranking2023 .ranking ul li:nth-child(5),
#ranking2023 .ranking ul li:nth-child(7),
#ranking2023 .ranking ul li:nth-child(9){margin-left:calc((100% - 880px) / 5);}

#ranking2023 .ranking ul li .rank{display:flex;height:72px;}
#ranking2023 .ranking ul li .rank img{width:76px;height:100%;padding-right:10px;}
#ranking2023 .ranking ul li .rank h4{display:-webkit-box;font-size:16px;line-height:160%;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;-webkit-box-orient: vertical;max-height:72px;font-weight:600;}
#ranking2023 .ranking ul li .post-data{margin:10px 0 0;padding:10px 0;border-top:1px solid #bb8e37;}
#ranking2023 .ranking ul li .post-data .post-author a{color:#bb8e37;}
#ranking2023 .ranking ul li .post-data .post-date{padding-left:60px;font-size:15px;}
#ranking2023 .ranking ul li .post-thumbnail img{width:100%;height:auto;object-fit:contain;object-position:center;}

#ranking2023 .ranking h4.special{width:calc(920px + ((100% - 880px) / 5));margin:0 auto 30px;}
#ranking2023 .ranking h4.special img{max-width:100%;}
#ranking2023 .ranking .prize{border:2px solid #fff;text-align:left;padding:20px;border-radius:10px;margin:0 auto 60px;width:calc(920px + ((100% - 880px) / 5));}
#ranking2023 .ranking .prize .article{width:440px;display:inline-block;vertical-align:top;background-color:#fff;padding:15px 25px 25px;font-size:20px;text-align:left;}
#ranking2023 .ranking .prize .article .rank{display:flex;height:72px;}
#ranking2023 .ranking .prize .article .rank img{width:61px;height:47px;padding-top:10px;padding-right:10px;}
#ranking2023 .ranking .prize .article .rank h4{display:-webkit-box;font-size:16px;line-height:160%;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;-webkit-box-orient: vertical;max-height:72px;font-weight:600;}
#ranking2023 .ranking .prize .article .post-data{margin:10px 0 0;padding:10px 0;border-top:1px solid #bb8e37;}
#ranking2023 .ranking .prize .article .post-data .post-author a{color:#bb8e37;}
#ranking2023 .ranking .prize .article .post-data .post-date{padding-left:60px;font-size:15px;}
#ranking2023 .ranking .prize .article .post-thumbnail img{width:100%;height:auto;object-fit:contain;object-position:center;}
#ranking2023 .ranking .prize .comment{display:inline-block;width:440px;vertical-align:top;margin-left:calc(100% - 880px);color:#fff;}
#ranking2023 .ranking .prize .comment .media{font-size:24px;font-weight:600;}
#ranking2023 .ranking .prize .comment .media img{padding-right:30px;}
#ranking2023 .ranking .prize .comment p{padding:30px 0 0;line-height:150%;}

#ranking2023 #gototop{position:fixed;bottom:10px;right:10px;z-index:10;display:none;}

@media only screen and (max-width:1270px){
  #ranking2023 ul#menu li:nth-child(1){margin-left:2.5%;}
  #ranking2023 ul#menu li:nth-child(2){margin:0 2.5%;}
  #ranking2023 ul#menu li:nth-child(3){margin-right:2.5%;}
}
/*
@media only screen and (max-width:980px){
  #ranking2023 .ranking .prize{border:2px solid #fff;text-align:left;padding:20px;border-radius:10px;margin:0 auto 40px;width:calc(920px + ((100% - 880px) / 5));}
}
*/
@media only screen and (max-width:980px){
/* @media only screen and (max-width:768px){ */
  #ranking2023{background-image:url(../img/ranking2023/background_mb.png);}
  #ranking2023 div#keyvisual img{padding:20px 0;}
  #ranking2023 .description{max-width:640px;width:98%;margin:20px auto;padding-bottom:10px;}
  
  #ranking2023 ul#menu{max-width:98vw;width:100%;margin:0px auto 50px;}
  #ranking2023 ul#menu li{display:block;width:100%;text-align:center;}
  #ranking2023 ul#menu li:nth-child(1){margin:0 auto 20px;}
  #ranking2023 ul#menu li:nth-child(2){margin:0 auto 20px;}
  #ranking2023 ul#menu li:nth-child(3){margin:0 auto;}

  #ranking2023 .ranking ul li{max-width:440px;width:98%;display:block;margin:0 auto 40px;}
  #ranking2023 .ranking ul li:nth-child(2),
  #ranking2023 .ranking ul li:nth-child(4),
  #ranking2023 .ranking ul li:nth-child(6),
  #ranking2023 .ranking ul li:nth-child(8),
  #ranking2023 .ranking ul li:nth-child(10){margin:0 auto 40px;}
  #ranking2023 .ranking ul li:nth-child(3),
  #ranking2023 .ranking ul li:nth-child(5),
  #ranking2023 .ranking ul li:nth-child(7),
  #ranking2023 .ranking ul li:nth-child(9){margin:0 auto 40px;}
  
  #ranking2023 .ranking ul li .post-data .post-date{display:block;padding-left:0;}
  
  #ranking2023 .ranking h4.special{width:calc(99% - 10px);margin:0 auto 20px;}
  #ranking2023 .ranking .prize{padding:5px;width:calc(99% - 10px);}
  #ranking2023 .ranking .prize .article{max-width:440px;width:98%;display:block;padding:15px 25px 25px;margin:20px auto 30px;}
  #ranking2023 .ranking .prize .article .post-data .post-date{display:block;padding-left:0;}
  #ranking2023 .ranking .prize .comment{max-width:440px;width:98%;display:block;margin:0 auto 20px;}
  #ranking2023 .ranking .prize .comment .media img{max-width:25%;padding-right:0.5em;}

}