@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
.no-js{ width:100% !important; overflow-x:hidden; }
DIV#contents p,
DIV#contents ol,
DIV#contents ul,
DIV#contents table{ margin-bottom:0; }
#fh_ranking{
font-family:YuGothic, 'Yu Gothic', "貂ｸ繧ｴ繧ｷ繝�け菴�", "YuGothic", 'Noto Sans JP', "繝｡繧､繝ｪ繧ｪ", Meiryo, Osaka,"�ｭ�ｳ �ｰ繧ｴ繧ｷ繝�け", "MS PGothic", sans-serif;
color:#333333;
}
#fh_ranking *{ padding:0; margin:0; box-sizing:border-box; }
#fh_ranking a:hover{ opacity:0.6; }
#fh_ranking img{ width:100%; vertical-align:bottom; }
#fh_ranking .meta{
background:#F9FAFB url("./img/pc/meta_bg_3.png") no-repeat right top;
padding:58px 25px 43px; margin:0 0 30px;
position:relative;
}
#fh_ranking .meta .pr{
background:#CCCCCC; width:52px;
font-size:13px; line-height:17px; text-align:center;
position:absolute; left:10px; top:10px;
}
#fh_ranking .meta .ttl{
width:535px; height:324px;
font-size:0; line-height:0; text-indent:-9999px;
margin-bottom:22px; padding:0; border:none;
}
#fh_ranking .meta .read>*{ font-size:16px; line-height:2.07; }
#fh_ranking .pickup_box .ttl{
background:#62DBD8; margin:0; padding:0; border:none;
font-size: 26px; line-height:60px; color:#333333; font-weight:700; text-align:center;
}
#fh_ranking .pickup_box .ttl span{
display:inline-block; height:60px; width:0; position:relative;
font-size:0; line-height:0; text-indent:-9999px; vertical-align:bottom;
}
#fh_ranking .pickup_box .ttl span::after{
display:block; content:""; width:172px; height:105px;
background:url("./img/pickup.svg") no-repeat center/172px 105px;
position:absolute; right:25px; bottom:-17px;
}
#fh_ranking .pickup_box ul{
display:flex; flex-wrap:wrap;
border:3px solid #62DBD8; border-top:none;
padding:25px; margin-bottom:50px;
}
#fh_ranking .pickup_box ul li{ width:calc(100% * 280 / 904); position:relative; z-index:1; }
#fh_ranking .pickup_box ul li:not(:nth-child(3n+1)){ margin-left:calc(100% * (904 - 280 * 3) / 2 / 904); }
#fh_ranking .pickup_box ul li:not(:nth-last-child(1)):not(:nth-last-child(2)):not(:nth-last-child(3)){ padding-bottom:calc(100% * 40 / 904); }
#fh_ranking .brand_box>div{ display:flex; flex-wrap:wrap; justify-content:center; }
#fh_ranking .brand_box>div + div{ margin-top:50px; }
#fh_ranking .brand_box .ttl{
width:100%; margin-bottom:65px; text-align:center;
position:relative;
}
#fh_ranking .brand_box .ttl::before{
display:block; content:""; width:100%; height:14px;
border-top:2px solid #62DBD8; border-bottom:2px solid #62DBD8;
position:absolute; top:calc(50% - 12px); left:0; z-index:0;
}
#fh_ranking .brand_box .ttl::after{
display:block; content:""; width:100%; height:2px;
background:#62DBD8;
position:absolute; top:calc(50% - 4px); left:0; z-index:0;
}
#fh_ranking .brand_box .ttl span{
display:inline-block;
font-size:34px; line-height:1.32; font-weight:700; color:#136496;
background:#FFFFFF; padding:0 0.8em;
position:relative; z-index:1;
}
#fh_ranking .brand_box .ranks{ width:calc(100% * 360 / 960); }
#fh_ranking .brand_box .r-1{ width:100%; display:flex; flex-wrap:wrap; padding:0 13px 60px; }
#fh_ranking .brand_box .r-1 .thum{ width:360px; margin-right:25px; }
#fh_ranking .brand_box .r-1 .flex{ width:calc(100% - 360px - 25px); }
#fh_ranking .brand_box .flex{ display:flex; flex-flow:column; justify-content:space-between; }
#fh_ranking .brand_box .flex-wrap{}
#fh_ranking .brand_box .r-2,
#fh_ranking .brand_box .r-3{
display:flex; flex-flow:column; justify-content:space-between;
}
#fh_ranking .brand_box .r-3{ margin-left:calc(100% * 128 / 960); }
#fh_ranking .brand_box .name{
font-size:20px; line-height:1.27; color:inherit; font-weight:400;
padding:0 0 0 76px; margin:0 0 25px; border:none;
position:relative;
}
#fh_ranking .brand_box .name::before{
display:inline-block; content:""; width:61px; height:61px;
position:absolute; left:0; top:calc(50% - 42px);
}
#fh_ranking .brand_box .r-1 .name{ font-size:26px; margin:0 0 10px; padding:0 0 0 85px; }
#fh_ranking .brand_box .r-1 .name::before{
background:url("./img/rank-1.svg") no-repeat center top/72px 72px;
width:72px; height:72px;
bottom:0; top:auto;
}
#fh_ranking .brand_box .r-2 .name::before{ background:url("./img/rank-2.svg") no-repeat center top/61px 61px; }
#fh_ranking .brand_box .r-3 .name::before{ background:url("./img/rank-3.svg") no-repeat center top/61px 61px; }
#fh_ranking .brand_box .r-2 .thum,
#fh_ranking .brand_box .r-3 .thum{ height:313px; margin-bottom:90px; }
#fh_ranking .brand_box .copy{ font-size:16px; line-height:2.07; }
#fh_ranking .brand_box .point{ border:1px solid #62DBD8; margin-top:10px; }
#fh_ranking .brand_box .point .sub{
background:#62DBD8;
font-size:16px; line-height:44px; text-align:center; font-weight:500;
position:relative; z-index:1;
margin:0; padding:0;
}
#fh_ranking .brand_box .point .sub::after{
display:inline-block; content:""; width:107px; height:65px;
background:url("./img/point.svg") no-repeat center/107px 65px;
position:absolute; top:-10px; right:19px;
}
#fh_ranking .brand_box .point ul{ list-style:none; position:relative; z-index:1; padding:15px 25px; }
#fh_ranking .brand_box .point ul li{ font-size:16px; line-height:2.07; }
#fh_ranking .brand_box .btns{ display:flex; justify-content:center; width:100%; }
#fh_ranking .brand_box .btns a{
display:block; width:calc(100% * 465 / 960);
padding:25px; position:relative; z-index:1;
background:
url("./img/btn_bg.svg") no-repeat left -8px top -8px/32px 32px,
url("./img/btn_bg.svg") no-repeat right -8px bottom -8px/32px 32px,
#62DBD8;
font-size:16px; line-height:1.0; text-align:center; color:inherit; text-decoration:none;
}
#fh_ranking .brand_box .btns a + a{ margin-left:calc(100% * 30 / 960); }
#fh_ranking .brand_box .btns a::before{
display:inline-block; content:""; width:10px; height:10px;
border-right:1px solid #333333; border-bottom:1px solid #333333;
transform:scale(1.0,0.9) rotate(-45deg); margin-right:5px;
}
/* end */