@charset "utf-8";
/* 2022/12/12 update */

/*** Common ***/
#wrap {z-index: 0; }
header {position: relative; background-color: #fff;}
header.logined {background-color: #D61518;}
footer {position: relative;}
main {width: 100%; position: relative; /*overflow: hidden;*/}
section{width: 100%; padding: 10.0rem 0; position: relative; overflow: hidden;}
section .content_box{max-width: 970px; margin: 0 auto;}
.sp_display{display:none;}
.pc_display{display:block;}
.animated {animation-duration: 1s; animation-fill-mode: both; visibility: visible;}
.go_top {z-index: 100; width: 100%; min-width: 970px; max-width: 1100px;}
.go_top a {background: #0d417a none repeat scroll 0 0; border: 3px solid #fff; border-radius: 20px; color: #ffffff; display: block; font-size: 16px; height: 40px; padding: 10px; text-align: center; width: 40px;}
.go_top span.glyphicon {top: -2px; left: -1px;}

/* h */
section h3{color: #fff; font-size: 6.8rem; font-weight: 700; letter-spacing: 2px; text-align: center;}
section h3 span{display: block; font-size: 3.5rem; letter-spacing: 0; margin: 1.5rem 0 0;}

/* Color */

/* Loader */
.loader{background: #000; width: 100%; height: 100%; position: fixed; display: flex; align-items: center; justify-content: center; left: 0; top: 0; z-index: 200;}

/* Loader - Animation */
.loader-animation {position: relative;}
.loader-animation div:nth-child(2), .loader-animation div:last-child{opacity: 0; position: absolute; z-index: -1;}
.loader-animation div:first-child{animation: bounceIn .6s; position: relative; width: 550px; z-index: 0;}
.loader-animation div:nth-child(2){animation: blood .2s .7s forwards; left: -125px; top: 25px; width: 290px;}
.loader-animation div:last-child{animation: blood .2s .8s forwards; left: 380px; top: -105px; width: 235px;}

/* 1st View */
div.logo_box{width: 100%; position: relative;}
div.logo_box .rf_logo{position: absolute; top: 50%; left: 50%; margin: 100px 0 0 -235px; z-index: 10;}
div.logo_box .vsx_logo{position: absolute; top: 50%; left: 50%; margin: 575px 0 0 -195px; z-index: 10;}
div.logo_box .vsxMax_logo{position: absolute; top: 50%; left: 50%; margin: 575px 0 0 5px; z-index: 10;}

div.rf__content{ /*background-image: url(/img/rf/rf_content_bg.jpg); */ background-color: #f1f4f7; background-repeat: no-repeat; background-size: cover; padding: 2rem 0;}
div.rf__content .logo_box{z-index: 5;}
div.rf__content .logo_box .rf_logo{position: relative; top: auto; left: auto; margin: 0;}
div.rf__content .overlay {width: 100%; height: 20vh; min-height: 200px; position: absolute; top: 0; left: 0; z-index: 0;
background-color: rgba(255,255,255,0.35);
background-image: linear-gradient(45deg, rgba(255,255,255,.0) 65%, rgba(255,255,255,.5) 50%);
background-size: 2px 2px;;
}

/* Top Video */
div.video_box{min-height: 760px; overflow: hidden;}
div.video_box .video-background {position: fixed; top: 0; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translateX(-50%); object-fit: cover;}
@media screen and (max-width: 1024px) {div.video_box .video-background {top: 0;}}
div.video_box .overlay {width: 100%; height: calc(100vh - 200px); min-height: 800px; position: absolute; top: 0; left: 0; z-index: 0;
background-image: linear-gradient(45deg, rgba(255,255,255,.0) 65%, rgba(255,255,255,.5) 50%);
background-size: 2px 2px;
}

/* Navi */
#ev__modal{display: none;}
nav{position: sticky; top: 0; left: 0; width: 100%; background: #0a2037; font-size: 2.0rem; font-weight: 600; letter-spacing: 2px; /* margin-top: calc(100vh - 200px); */ padding: 2.6rem 0; z-index: 10;}
nav a:link,
nav a:visited{color: #fff; position: relative; display: inline-block; text-decoration: none;}
nav a::after {content: ''; position: absolute; bottom: -4px; left: 0;  width: 100%; height: 3px; background: #2ba8fc; transform: scale(0, 1); transform-origin: left top; transition: transform .3s;}
nav a:hover::after {transform: scale(1, 1);}
nav ul{width: 970px; display: flex; justify-content: space-between; align-content: center; margin: 0 auto;}
nav a.none:hover::after{display: none;}
nav .modal__btn{display: none;}

/* Contents rf__sec01 - about*/
section.rf__sec01{background-image: url(/img/rf/rf_sec01_bg.jpg); background-repeat: no-repeat; background-size: cover; background-position-y: calc(55vh - 900px); background-color: rgba(255,255,255,1); z-index: 0;}
section.rf__sec01 h2{color: #0d417a; font-size: 5.5rem; font-weight: 600; letter-spacing: 2px; text-align: center; line-height: 1.33em; margin: 5rem 0 0; padding: 0;}
section.rf__sec01 ul{display: flex; justify-content: center; align-items: center; width: 50%; max-width: 970px; margin: 0 auto;}
section.rf__sec01 ul > li:first-child{margin-left: -20px;}
section.rf__sec01 .overlay {width: 100%; height: 200vh; position: absolute; top: 0; left: 0; z-index: -10;
background-color: rgba(255,255,255,0.25);
background-image: linear-gradient(45deg, rgba(255,255,255,.0) 65%, rgba(255,255,255,.5) 50%);
background-size: 2px 2px;
}

/* Contents rf__sec02 - Howtoplay*/
section.rf__sec02{background-color: #f1f4f7; padding: 10rem 0;}
section.rf__sec02 h3{color: #0d417a;}
section.rf__sec02 ul.slick-slider {margin-top: 5rem; margin-left: -25rem; margin-right: -25rem; padding: 0;}
section.rf__sec02 ul.slick-slider li{margin: 0 25px;}
section.rf__sec02 ul.slick-slider .slick-dots {position: absolute; bottom: -5rem; z-index: 2; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center;}
section.rf__sec02 ul.slick-slider .slick-dots li {position: relative; display: inline-block; width: 1rem; height: 1rem; margin: 0 12px; padding: 0; cursor: pointer;}
section.rf__sec02 ul.slick-slider .slick-dots li button {font-size: 0; line-height: 0; display: block; width: 1rem; height: 1rem; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent;}
section.rf__sec02 ul.slick-slider .slick-dots li button:before {font-size: 5rem; line-height: 9px; position: absolute; top: 0; left: 0; width: 1rem; height: 1rem; content: "•"; text-align: center; color: #ccc;}
section.rf__sec02 ul.slick-slider .slick-dots li.slick-active button:before {color: #0d417a;}
section.rf__sec02 .flow{background: #fff; min-height: 400px; padding: 30px;}
section.rf__sec02 .flow dl{display: flex; justify-content: flex-start; align-items: center;}
section.rf__sec02 .flow dt{width: 35%; margin-right: 5%;}
section.rf__sec02 .flow dd{width: 60%;}
section.rf__sec02 .flow dd h4{width: 125px; font-size: 1.8rem; font-weight: 600; background: #0d417a; color: #fff; text-align: center; margin: 0 0 15px; padding: 8px 5px 5px;}
section.rf__sec02 .flow dd h5{color: #0d417a; font-size: 2.5rem; font-weight: 600; line-height: 1.33em;}
section.rf__sec02 .flow dd p{font-size: 1.25rem; margin: 0; padding: 0;}
section.rf__sec02 .flow dd a{transition: .2s all linear;}
section.rf__sec02 .rf__guide{width: 85%; margin: 10rem auto 0; text-align: center;}
section.rf__sec02 .rf__guide p{color: #0d417a; font-size: 2.5rem; font-weight: 600; letter-spacing: 2px; line-height: 1.6em; margin: 0; padding: 0;}
section.rf__sec02 .rf__guide a {transition: .2s all linear;}
section.rf__sec02 .rf__guide a:link,
section.rf__sec02 .rf__guide a:visited{display: block; background: #0990e6; border: 2px solid #0990e6; font-size: 2.6rem; color: #fff; text-align: center; padding: 15px; margin: 1.5rem auto; width: 500px;}
section.rf__sec02 .rf__guide a:hover{background: #fff; color: #0990e6;}

/* Contents rf__sec03 - Ranking */
section.rf__sec03{background: none !important; padding: 10rem 0 !important;}
section.rf__sec03 h3{color: #0d417a;}
section.rf__sec03 a.rank_btn {overflow: hidden; position: relative; box-shadow: none;
transition: all 1000ms cubic-bezier(.08,.77,.84,.29);
-webkit-transition: all 1000ms cubic-bezier(.08,.77,.84,.29);
transform: rotate(35deg);
-webkit-transform: rotate(35deg);
}
section.rf__sec03 a.rank_btn:after {background: #fff; content: ""; width: 120px; height: 800px; left: -400px; top: -120px; opacity: .4; position: absolute; z-index: 10;
transition: all 0ms cubic-bezier(1.0,1.0,1.0,1.0);
-webkit-transition: all 0ms cubic-bezier(1.0,1.0,1.0,1.0);
transform: rotate(35deg);
-webkit-transform: rotate(35deg);
}
section.rf__sec03 a.rank_btn:hover:after {left: 600px;
transition: all 1000ms cubic-bezier(.08,.77,.84,.29);
-webkit-transition: all 1000ms cubic-bezier(.08,.77,.84,.29);
transform: rotate(35deg);
-webkit-transform: rotate(35deg);
}
section.rf__sec03 ul{display: flex; justify-content: space-around; align-items: flex-start; width: 85%; margin: 5rem auto 0;}
section.rf__sec03 ul > li{overflow: hidden;}
section.rf__sec03 dl{background: -webkit-linear-gradient(top, #988f4e, #928743); background: linear-gradient(to bottom, #988f4e, #928743); padding: 10px;}
section.rf__sec03 dd{font-size: 2.0rem; font-weight: 600; color: #fff; text-align: center; letter-spacing: 1px; padding: 15px 10px 5px;}
section.rf__sec03 .overlay {width: 100%; height: 200vh; min-height: 900px; position: absolute; bottom: 0; left: 0; z-index: -50;
background-color: rgba(255,255,255,0.55);
background-image: linear-gradient(45deg, rgba(255,255,255,.0) 65%, rgba(255,255,255,.5) 50%);
background-size: 2px 2px;
}

/* Contents rf__sec04 - Picture Book */
section.rf__sec04{padding: 10rem 0; z-index: 0;
background-image: url(/img/rf/rf_sec04_bg.jpg) !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-position-y: 0;
background-color: rgba(255,255,255,1) !important;
}
section.rf__sec04 h3 {color: #0d417a;}
section.rf__sec04 .pictbookArea {margin: 2.5rem 0 0;}
section.rf__sec04 .pictbookArea dl{display: flex; justify-content: flex-start; align-items: center;}
section.rf__sec04 .pictbookArea dt{width: 45%; margin-right: 5%;}
section.rf__sec04 .pictbookArea dd{width: 50%;}
section.rf__sec04 .pictbookArea dd h4{color: #0d417a; font-size: 5.5rem; font-weight: 600; letter-spacing: 2px; line-height: 1.33em; margin: 0 0 2.5rem; padding: 0;}
section.rf__sec04 .pictbookArea dd p{color: #0d417a; font-size: 2.0rem; font-weight: 600; letter-spacing: 2px; line-height: 1.6em; margin: 0 0 2.5rem; padding: 0;}
section.rf__sec04 .pictbookArea a{transition: .2s all linear;}
section.rf__sec04 .pictbookArea a:link,
section.rf__sec04 .pictbookArea a:visited{display: block; background: #0990e6; border: 2px solid #0990e6; font-size: 2.5rem; color: #fff; text-align: center; padding: 15px 10px;}
section.rf__sec04 .pictbookArea a:hover{background: #fff; color: #0990e6;}
section.rf__sec04 .overlay {width: 100%; height: 200vh; position: absolute; top: 0; left: 0; z-index: -10;
background-color: rgba(255,255,255,0.60);
background-image: linear-gradient(45deg, rgba(255,255,255,.0) 65%, rgba(255,255,255,.5) 50%);
background-size: 2px 2px;
}

/* Contents rf__sec05 - Campaign */
section.rf__sec05{background-color: #0d417a; padding: 10rem 0 5rem;}
section.rf__sec05 .campaignArea{margin: 5rem 0 2.5rem;}
section.rf__sec05 .campaignArea dl{margin-bottom: 5rem;}
section.rf__sec05 .campaignArea dl:last-of-type{margin-bottom: 0;}
section.rf__sec05 .campaignArea dt{margin-bottom: 1.8rem;}
section.rf__sec05 .campaignArea dd{font-size: 2.0rem; font-weight: 600; letter-spacing: 2px; line-height: 1.6em;}
section.rf__sec05 .campaignArea dl a{transition: .2s all linear;}
section.rf__sec05 .campaignArea dl a:link,
section.rf__sec05 .campaignArea dl a:visited{color: #fff;}
section.rf__sec05 .campaignArea dl a:link img,
section.rf__sec05 .campaignArea dl a:visited img{transition: .2s all linear; opacity: 1.0;}
section.rf__sec05 .campaignArea dl a:hover img{transition: .2s all linear; opacity: 0.75;}

/* Contents rf__sec06 - login */
section.rf__sec06{background-color: #0d417a; padding: 0 0 10rem;}
section.rf__sec06::before{content: ''; display: block; background-color: #fff; width: 100%; max-width: 970px; height: 3px; margin: 0 auto 5rem;}
section.rf__sec06 ul{display: flex; justify-content: space-between; align-items: center;}
section.rf__sec06 ul > li{width: 48%;}
section.rf__sec06 ul > li a{transition: .2s all linear;}
section.rf__sec06 ul > li a:link,
section.rf__sec06 ul > li a:visited{display: block; background: #0990e6; border: 2px solid #0990e6; font-size: 2.5rem; color: #fff; text-align: center; padding: 15px 10px;}
section.rf__sec06 ul > li a:hover{background: #fff; color: #0990e6;}


/*responsive ==============================================================================*/
@media (max-width: 767px) {/*smart phone*/

    /*** Common ***/
    section{padding: 5rem 0;}
    section .content_box{width: 80%;}
    section#ranking .content_box,
    section#pictbook .content_box{width: 98%;}
    .sp_display{display:block;}
    .pc_display{display:none;}
    .go_top {display: none;}

    /* h */
    section h3{font-size: 3.8rem;}
    section h3 span{font-size: 1.8rem; margin: 1rem 0 0;}

    /* 1st View */
    div.logo_box .rf_logo{width: 380px; margin: 140px 0 0 -185px;}
    div.logo_box .vsx_logo{width: 152px; margin: 490px 0 0 -165px;}
    div.logo_box .vsxMax_logo{width: 185px; margin: 490px 0 0 -5px;}
    div.rf__content{padding: 0.5rem 0;}
    div.rf__content .logo_box .rf_logo{width: 100%;}

    /* Top Video */
    div.video_box{min-height: 700px;}
    /*** div.video_box .overlay {height: calc(50vh - 80px); min-height: 400px;} ***/

/* Navi */
    nav{position: fixed; top: -100px;}
    nav ul{width: auto; display: none;}
    nav .navi__area {padding: 20px 0; position: relative;}
    nav #slideMenu {height: 100%; position: fixed; justify-items: legacy; width: 100%; margin-top: -35px; transform: translateY(-150%); transition: transform 450ms ease-in-out; background: rgba(0,0,0,0.85); z-index: 5;}
    nav.fixed{position: fixed; padding: 5px 0;}
    .menu{display: block; width: 30px; height: 30px; position: absolute; top: 50%; right: 0; margin: -10px 15px 0 0; padding: 0; border: none; z-index: 1;}
    .menu span:before {bottom: -10px;}
    .menu span:after {bottom: -20px;}
    .menu span,
    .menu span::before,
    .menu span::after {content: ''; display: block; width: 30px; height: 4px; border-radius: 0; background: #fff; transition: 0.5s; position: absolute;}

/* Contents rf__sec01 - about*/
    section.rf__sec01{background-position-y: calc(35vh - 450px);}
    section.rf__sec01 h2{font-size: 2.2rem; margin: 3rem 0 0;}
    section.rf__sec01 ul{width: 75%; max-width: 970px; margin: 0 auto 2.5rem;}

    /* Contents rf__sec02 - Howtoplay*/
    section.rf__sec02{padding: 5rem 0;}
    section.rf__sec02 ul.slick-slider {max-width: 500px; margin: 2.5rem auto;}
    section.rf__sec02 ul.slick-slider li{margin: 0 5px;}
    section.rf__sec02 ul.slick-slider .slick-dots {bottom: -4.5rem;}
    section.rf__sec02 ul.slick-slider .slick-dots li {margin: 0 10px;}
    section.rf__sec02 ul.slick-slider .slick-dots li button:before {font-size: 4.5rem; line-height: 5px;}
    section.rf__sec02 ul .slick-list {padding: 0 20px !important;}

    section.rf__sec02 .flow{min-height: 730px; padding: 30px 15px;}
    section.rf__sec02 .flow dl{display: block;}
    section.rf__sec02 .flow dt{width: 100%; max-width: 240px; margin: 0 auto;}
    section.rf__sec02 .flow dd{width: 100%; margin: 0 auto;}
    section.rf__sec02 .flow dd h4{width: 100px; font-size: 1.4rem; margin: 15px 0;}
    section.rf__sec02 .flow dd h5{font-size: 1.6rem; margin: 10px 0;}
    section.rf__sec02 .flow dd p{font-size: 1.15rem;}

    section.rf__sec02 .rf__guide{width: 80%; margin: 7.5rem auto 0;}
    section.rf__sec02 .rf__guide p{font-size: 1.4rem; letter-spacing: 1px; line-height: 1.33em;}
    section.rf__sec02 .rf__guide a:link,
    section.rf__sec02 .rf__guide a:visited{font-size: 1.8rem; padding: 8px; margin: 1rem auto; width: 90%; max-width: 500px;}

    /* Contents rf__sec03 - Ranking */
    section.rf__sec03{padding: 5rem 0 2.5rem !important;}
    section.rf__sec03 a.rank_btn:after {content: ""; width: 100px; height: 800px; left: -400px; top: -120px;}
    section.rf__sec03 ul{display: block; width: 100%; max-width: 280px; margin: 2.5rem auto 0;}
    section.rf__sec03 ul > li{margin-bottom: 2.5rem;}
    section.rf__sec03 dl{padding: 5px;}
    section.rf__sec03 dd{font-size: 1.2rem; padding: 10px 5px 5px;}
    /*section.rf__sec03 .overlay {height: calc(100vh + 250px);}*/

    /* Contents rf__sec04 - Picture Book */
    section.rf__sec04{padding: 5rem 0; background-position-y: 0 !important;}
    section.rf__sec04 .pictbookArea {max-width: 500px; margin: 2.5rem auto 0;}
    section.rf__sec04 .pictbookArea dl{flex-direction: column-reverse;}
    section.rf__sec04 .pictbookArea dt{width: 65%; max-width: 320px; margin: 0 auto;}
    section.rf__sec04 .pictbookArea dd{width: 100%; margin-bottom: 2.5rem;}
    section.rf__sec04 .pictbookArea dd h4{font-size: 1.8rem; text-align: center; margin: 0 0 1.5rem;}
    section.rf__sec04 .pictbookArea dd p{font-size: 1.4rem; margin: 0 0 1.5rem; line-height: 1.33em;}
    section.rf__sec04 .pictbookArea a:link,
    section.rf__sec04 .pictbookArea a:visited{width: 100%; max-width: 320px; font-size: 1.4rem; padding: 10px; margin: 0 auto;}

    /* Contents rf__sec05 - Campaign */
    section.rf__sec05{padding: 5rem 0 2.5rem;}
    section.rf__sec05 .campaignArea{margin: 2.5rem 0;}
    section.rf__sec05 .campaignArea dl{margin-bottom: 2.5rem;}
    section.rf__sec05 .campaignArea dt{margin-bottom: 1.0rem;}
    section.rf__sec05 .campaignArea dd{font-size: 1.25rem; line-height: 1.8em;}

    /* Contents rf__sec06 - login */
    section.rf__sec06{padding: 0 0 5rem;}
    section.rf__sec06::before{content: ''; height: 2px; margin: 0 auto 5rem;}
    section.rf__sec06 ul > li a:link{font-size: 1.4rem; padding: 10px;}
    section.rf__sec06 ul > li a:link, section.rf__sec06 ul > li a:visited{background: #0990e6; border: 2px solid #0990e6; color: #fff;}

}
@media (max-width: 460px) {
    /* h */
    section h3{font-size: 2.4rem;}
    section h3 span{font-size: 1.4rem; margin: 0.8rem 0 0;}

    /* 1st View */
    div.logo_box .rf_logo{width: 280px; margin: 185px 0 0 -135px;}
    div.logo_box .vsx_logo{width: 100px; margin: 460px 0 0 -105px;}
    div.logo_box .vsxMax_logo{width: 120px; margin: 460px 0 0 5px;}

    /* Contents rf__sec01 - about*/
    section.rf__sec01 h2{font-size: 1.4rem; margin: 0.8rem 0 0;}
    section.rf__sec01 ul{width: 70%; max-width: 970px; margin: 0 auto 2.5rem;}

    /* Contents rf__sec02 - Howtoplay*/
    section.rf__sec02 .flow dt{width: 70%; max-width: 240px; margin: 0 auto;}
    section.rf__sec02 .flow{min-height: 700px; padding: 30px 15px;}
}
@media (min-width: 768px) and (max-width: 991px) {/*tablet*/
    /* Contents rf__sec01 - about*/
    section.rf__sec01 {background-position-y: calc(55vh - 780px);}
    section.rf__sec01 h2{font-size: 4.0rem; margin: 4rem 0 0;}
    section.rf__sec01 ul{width: 70%; max-width: 970px; margin: 0 auto 2.5rem;}

    /* Contents rf__sec02 - Howtoplay*/
    section.rf__sec02 ul.slick-slider {max-width: 800px; margin: 4rem auto;}
    section.rf__sec02 ul.slick-slider li{margin: 0 15px;}
    section.rf__sec02 ul.slick-slider .slick-dots {bottom: -7rem;}
    section.rf__sec02 ul.slick-slider .slick-dots li {margin: 0 12.5px;}
    section.rf__sec02 ul .slick-list {padding: 0 50px !important;}
    section.rf__sec02 .flow dl{display: block;}
    section.rf__sec02 .flow{min-height: 860px; padding: 30px 15px;}
    section.rf__sec02 .flow dt{width: 100%; max-width: 280px; margin: 0 auto;}
    section.rf__sec02 .flow dd{width: 85%; margin: 0 auto;}
    section.rf__sec02 .flow dd h4{width: 200px; font-size: 2.4rem; margin: 20px 0; padding: 10px 5px 8px;}
    section.rf__sec02 .flow dd h5{font-size: 2.8rem; margin: 10px 0;}
    section.rf__sec02 .flow dd p{font-size: 1.4rem; line-height: 1.6em;}

}
@media (min-width:990px) and (max-width:1299px) {/*Mid-PC*/
    section.rf__sec02 .flow {min-height: auto;}
    section.rf__sec02 .flow dt{width: 45%; margin-right: 5%;}
    section.rf__sec02 .flow dd{width: 50%;}
    section.rf__sec02 .flow dd h4{width: 90px; font-size: 1.4rem; padding: 8px 5px;}
    section.rf__sec02 .flow dd h5{font-size: 1.6rem;}
    section.rf__sec02 .flow dd p{font-size: 1.0rem;}
}
@media (min-width: 768px) {/*sm~lg*/}
@media (orientation: landscape){
	article#main__area{background-image: none; height: auto;}
	article#main__area .main__image{display: block;}
}


/*Campaign ==============================================================================*/
div#campaign_202209 {position: relative; background: #002f62 url(/img/rf/campaign/cp202209_bg.png) repeat-x; background-attachment: fixed; background-position: 50%; padding-bottom: 100px;}
div#campaign_202209 h2{color: #fff; text-align: center; font-size: 6.0rem; font-weight: 600; line-height: 1.25em; letter-spacing: 0.5px; margin: 0 0 5rem;}

div#campaign_202209 .btnArea{width: 700px; padding: 0; margin: 5rem auto 0; text-align: center;}
div#campaign_202209 .btnArea a{transition: .2s all linear;}
div#campaign_202209 .btnArea a:link,
div#campaign_202209 .btnArea a:visited{display: block; background: #0990e6; border: 2px solid #0990e6; font-size: 2.5rem; color: #fff; text-align: center; padding: 15px 10px;}
div#campaign_202209 .btnArea a:hover{background: #fff; color: #0990e6;}

div#campaign_202209 span.color_yellow{color: #f3f600;}
div#campaign_202209 span.color_red{color: #ed0808;}

div#campaign_202209 .rf_cp__sec01{background-image: url(/img/rf/campaign/cp202209_hero_bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; z-index: 0;}
div#campaign_202209 .rf_cp__sec01 .overlay {width: 100%; height: 200vh; position: absolute; top: 0; left: 0; z-index: -10;
background-color: rgba(255,255,255,0.15);
background-image: linear-gradient(45deg, rgba(255,255,255,.0) 65%, rgba(255,255,255,.65) 50%);
background-size: 3px 3px;}

div#campaign_202209 .rf_cp__sec02{}
div#campaign_202209 .rf_cp__sec02 h2{font-size: 7.0rem; margin: 0;}

div#campaign_202209 .rf_cp__sec03{background: #fff; padding: 6rem;}
div#campaign_202209 .rf_cp__sec03 .event_date{border-radius: 32px; outline: 6px solid #002f62; outline-offset: -6px; overflow: hidden;}
div#campaign_202209 .rf_cp__sec03 .event_date h3{background: #002f62; font-size: 4.0rem; padding: 20px;}
div#campaign_202209 .rf_cp__sec03 .event_date div{color: #002f62; font-size: 3.8rem; font-weight: 600; text-align: center; padding: 35px 20px;}

div#campaign_202209 .rf_cp__sec04{}
div#campaign_202209 .rf_cp__sec04 .detail__box{margin-bottom: 5rem;}
div#campaign_202209 .rf_cp__sec04 .detail__box:nth-of-type(2)::after{content: ""; display: block; border-bottom: 2px dotted #fff; margin: 5rem 0;}
div#campaign_202209 .rf_cp__sec04 .detail__box h3{background: #fff; color: #002f62; font-size: 4.5rem; line-height: 1; letter-spacing: 1px; border-radius: 10px; padding: 20px 15px 15px; margin-bottom: 5rem;}
div#campaign_202209 .rf_cp__sec04 .detail__box h3 span{display: inline; font-size: 3.4rem;}
div#campaign_202209 .rf_cp__sec04 .detail__box ul{color: #fff; display: flex; justify-content: space-between; align-items: center;}
div#campaign_202209 .rf_cp__sec04 .detail__box ul > li h4{font-size: 5rem; font-weight: 600; line-height: 1.25; margin: 0 0 2.5rem;}
div#campaign_202209 .rf_cp__sec04 .detail__box ul > li h4 span{font-size: 2.0rem; display: block; margin: 1rem 0 0;}
div#campaign_202209 .rf_cp__sec04 .detail__box ul > li p{margin: 0 0 1.0rem; padding: 0;}

div#campaign_202209 .rf_cp__sec05{background-image: url(/img/rf/campaign/cp202209_hero_bg.jpg); background-repeat: no-repeat;
background-position: center; background-size: cover; z-index: 0;}
div#campaign_202209 .rf_cp__sec05 .overlay {width: 100%; height: 200vh; position: absolute; top: 0; left: 0; z-index: -10;
background-color: rgba(255,255,255,0.15);
background-image: linear-gradient(45deg, rgba(255,255,255,.0) 65%, rgba(255,255,255,.65) 50%);
background-size: 3px 3px;}
div#campaign_202209 .rf_cp__sec05 h2{color: #002f62; text-shadow: #fff 0 0 2.5px, #fff 0 0 5px, #fff 0 0 2.5px; margin: 0;}
div#campaign_202209 .rf_cp__sec05 h2 span{display: block; font-size: 4.2rem;}
div#campaign_202209 .rf_cp__sec05 .slide__box{margin: 7.5rem 0;}
div#campaign_202209 .rf_cp__sec05 .slide__box ul.slick-slider li {margin: 0 35px;}
div#campaign_202209 .rf_cp__sec05 .detail__box{max-width: 970px; margin: 0 auto; position: relative;}
div#campaign_202209 .rf_cp__sec05 .detail__box .circle{position: absolute; top: -15px; left: 90px; font-size: 2.55rem; font-weight: 700; letter-spacing: -1px; width: 90px; height: 90px; line-height: 95px; border-radius: 50%; background: #fff; color: #002f62; text-align: center;  transform: rotate(-15deg); z-index: 1;}
div#campaign_202209 .rf_cp__sec05 .detail__box .inner{background: rgba(255,255,255,0.75); border-radius: 20px; outline: 6px solid #002f62; outline-offset: -6px; overflow: hidden;}
div#campaign_202209 .rf_cp__sec05 .detail__box .inner h3{background: #002f62; font-size: 4.0rem; padding: 20px; position: relative;}
div#campaign_202209 .rf_cp__sec05 .detail__box ul{display: flex; justify-content: space-between; align-items: center; width: 90%; margin: 0 auto; padding: 2.5rem;}
div#campaign_202209 .rf_cp__sec05 .detail__box ul > li h4{color: #002f62; font-size: 3.8rem; line-height: 1.35; font-weight: 600;}
div#campaign_202209 .rf_cp__sec05 .detail__box ul > li span{font-size: 1.4rem;}

div#campaign_202209 .rf_cp__sec06{}
div#campaign_202209 .rf_cp__sec06 .detail__box{border: 5px solid #fff; background: rgba(0,24,49,0.75); border-radius: 10px; color: #fff;}
div#campaign_202209 .rf_cp__sec06 .detail__box h3{font-size: 3.6rem; line-height: 1.4; padding: 5rem 0 1rem;}
div#campaign_202209 .rf_cp__sec06 .detail__box h3 span{font-size: 3.6rem; display: inline; color: #f3f600; letter-spacing: inherit;}
div#campaign_202209 .rf_cp__sec06 .detail__box ul{display: flex; justify-content: space-between; align-items: center; width: 780px; margin: 0 auto;}
div#campaign_202209 .rf_cp__sec06 .detail__box ul > li:nth-child(1){width: 70%;}
div#campaign_202209 .rf_cp__sec06 .detail__box ul > li:nth-child(2){width: 55%;}
div#campaign_202209 .rf_cp__sec06 .detail__box ul > li h4{font-size: 4.2rem; font-weight: 600; line-height: 1.4; margin: 0 0 10px;}
div#campaign_202209 .rf_cp__sec06 .detail__box ul > li p{font-size: 2.0rem; line-height: 1.6;}

div#campaign_202209 .rf_cp__sec07{background: rgba(255,255,255,0.2); margin: 0 0 -10rem;}
div#campaign_202209 .rf_cp__sec07 .notice{}
div#campaign_202209 .rf_cp__sec07 .notice h3{color: #fff; font-size: 5.4rem; font-weight: 600; margin-bottom: 30px;}
div#campaign_202209 .rf_cp__sec07 .notice h4{font-size: 2.4rem; font-weight: 600; line-height: 1; margin: 0 0 1.5rem;}
div#campaign_202209 .rf_cp__sec07 .notice .notice__box{padding: 4rem 3rem; border: 3px solid #fff; background: rgba(0,47,98,0.8); color: #fff;}
div#campaign_202209 .rf_cp__sec07 .notice .notice__box .notice__detail{height: 400px; overflow: auto; font-size: 1.6rem;}
div#campaign_202209 .rf_cp__sec07 .notice .notice__box .notice__detail a:link,
div#campaign_202209 .rf_cp__sec07 .notice .notice__box .notice__detail a:visited{color: #fff; text-decoration: underline;}
div#campaign_202209 .rf_cp__sec07 .notice .notice__box .notice__detail a.selected{color: #fff;}
div#campaign_202209 .rf_cp__sec07 .notice .notice__box .notice__detail ul{margin-bottom: 3rem;}
div#campaign_202209 .rf_cp__sec07 .notice .notice__box .notice__detail ul:last-of-type{margin-bottom: 0;}
div#campaign_202209 .rf_cp__sec07 .notice .notice__box .notice__detail ul > li{font-size: 1.25rem; list-style: disc; margin: 10px 0 10px 20px; padding: 0; line-height: 1.75;}
div#campaign_202209 .rf_cp__sec07 .notice .notice__box .notice__detail .jspVerticalBar{width: 5px;}
div#campaign_202209 .rf_cp__sec07 .notice .notice__box .notice__detail .jspTrack{background: none;}
div#campaign_202209 .rf_cp__sec07 .notice .notice__box .notice__detail .jspDrag{background: #fff; left: 0px;}


@media (min-width:768px) and (max-width:1359px) {/*Mid-PC*/
}

@media (max-width: 767px) {/*smart phone*/
    div#campaign_202209 h2{font-size: 2.1rem; margin: 0 0 2.5rem;}
    div#campaign_202209 .btnArea{width: 80%; margin: 0 auto;}
    div#campaign_202209 .btnArea a:link,
    div#campaign_202209 .btnArea a:visited{font-size: 1.6rem; padding: 12px 10px;}

    div#campaign_202209 .rf_cp__sec01{padding: 0;}
    div#campaign_202209 .rf_cp__sec01 .hero{border-top: 10px solid #002f62;}
    div#campaign_202209 .rf_cp__sec02 h2{font-size: 2.4rem;}
    div#campaign_202209 .rf_cp__sec03{padding: 3rem 0;}
    div#campaign_202209 .rf_cp__sec03 .event_date{outline: 5px solid #002f62; outline-offset: -5px;}
    div#campaign_202209 .rf_cp__sec03 .event_date h3{font-size: 2.0rem; padding: 15px;}
    div#campaign_202209 .rf_cp__sec03 .event_date div{font-size: 1.8rem; padding: 15px;}
    div#campaign_202209 .rf_cp__sec04 .detail__box{max-width: 480px; margin: 0 auto 2.5rem;}
    div#campaign_202209 .rf_cp__sec04 .detail__box:nth-of-type(2)::after{margin: 2rem 0;}
    div#campaign_202209 .rf_cp__sec04 .detail__box h3{font-size: 2.0rem; padding: 15px 0 10px; margin-bottom: 2.5rem;}
    div#campaign_202209 .rf_cp__sec04 .detail__box h3 span{font-size: 1.6rem;}
    div#campaign_202209 .rf_cp__sec04 .detail__box ul{flex-wrap: wrap-reverse;}
    div#campaign_202209 .rf_cp__sec04 .detail__box ul > li h4{font-size: 2.5rem; margin: 1.5rem 0;}
    div#campaign_202209 .rf_cp__sec04 .detail__box ul > li h4 span{font-size: 1.4rem; margin: 0.5rem 0 0;}
    div#campaign_202209 .rf_cp__sec05 h2 span{font-size: 1.8rem; margin-top: 0.5rem;}
    div#campaign_202209 .rf_cp__sec05 .slide__box{margin: 3rem 0;}
    div#campaign_202209 .rf_cp__sec05 .slide__box ul.slick-slider li {margin: 0 20px;}
    div#campaign_202209 .rf_cp__sec05 .detail__box{width: 80%; margin-bottom: 2.5rem;}
    div#campaign_202209 .rf_cp__sec05 .detail__box .circle{top: -10px; left: 30px; font-size: 1.5rem; width: 55px; height: 55px; line-height: 60px;}
    div#campaign_202209 .rf_cp__sec05 .detail__box .inner{width: 90%; outline: 5px solid #002f62; outline-offset: -5px; margin: 0 auto;}
    div#campaign_202209 .rf_cp__sec05 .detail__box .inner h3{font-size: 1.6rem; padding: 20px 0 15px; text-indent: 55px; letter-spacing: 1px;}
    div#campaign_202209 .rf_cp__sec05 .detail__box ul{width: 100%; max-width: 480px; flex-wrap: wrap-reverse;}
    div#campaign_202209 .rf_cp__sec05 .detail__box ul > li{width: 100%;}
    div#campaign_202209 .rf_cp__sec05 .detail__box ul > li h4{font-size: 1.8rem; line-height: 1.33; padding: 0; text-align: center;}
    div#campaign_202209 .rf_cp__sec05 .detail__box ul > li span{display: inline-block; width: 100%; font-size: 1.15rem; text-align: center;}
    div#campaign_202209 .rf_cp__sec05 .detail__box ul > li div{width: 60%; margin: 0 auto;}
    div#campaign_202209 .rf_cp__sec06 .detail__box{border: 3px solid #fff; padding: 2.5rem 2.5rem 0; margin: 0 auto 3rem; max-width: 480px;}
    div#campaign_202209 .rf_cp__sec06 .detail__box h3{font-size: 1.6rem; line-height: 1.5; padding: 0 0 1.5rem;}
    div#campaign_202209 .rf_cp__sec06 .detail__box h3 span{font-size: 1.6rem;}
    div#campaign_202209 .rf_cp__sec06 .detail__box ul{width: 100%; flex-wrap: wrap;}
    div#campaign_202209 .rf_cp__sec06 .detail__box ul > li:nth-child(1),
    div#campaign_202209 .rf_cp__sec06 .detail__box ul > li:nth-child(2){width: 100%;}
    div#campaign_202209 .rf_cp__sec06 .detail__box ul > li:nth-child(2) div{width: 65%; margin: 0 auto;}
    div#campaign_202209 .rf_cp__sec06 .detail__box ul > li h4{font-size: 2.2rem; font-weight: normal; line-height: 1.4; margin: 0 0 5px; text-align: center;}
    div#campaign_202209 .rf_cp__sec06 .detail__box ul > li p{font-size: 1.2rem; text-align: center;}
    div#campaign_202209 .rf_cp__sec07{margin: 0 0 -10rem;}
    div#campaign_202209 .rf_cp__sec07 .notice h3{font-size: 2.4rem; margin-bottom: 2rem;}
    div#campaign_202209 .rf_cp__sec07 .notice h4{font-size: 1.6rem;}
    div#campaign_202209 .rf_cp__sec07 .notice .notice__box{padding: 2rem; border: 2px solid #fff;}
    div#campaign_202209 .rf_cp__sec07 .notice .notice__box .notice__detail{height: 260px;}
    div#campaign_202209 .rf_cp__sec07 .notice .notice__box .notice__detail ul{margin-bottom: 2.5rem;}
}

@media (max-width: 460px) {/*smart phone*/
    div#campaign_202209 .btnArea a:link,
    div#campaign_202209 .btnArea a:visited{font-size: 1.4rem; padding: 12px 10px;}
    div#campaign_202209 .rf_cp__sec02{padding: 3rem 0;}
    div#campaign_202209 .rf_cp__sec02 h2{font-size: 2.2rem;}
    div#campaign_202209 .rf_cp__sec04 .detail__box h3{font-size: 1.6rem; padding: 14px 0 12px; margin-bottom: 2.5rem;}
    div#campaign_202209 .rf_cp__sec05 .detail__box .circle{top: -5px; left: -10px; font-size: 1.25rem; width: 45px; height: 45px; line-height: 48px;}
    div#campaign_202209 .rf_cp__sec05 .detail__box .inner{width: 100%;}
    div#campaign_202209 .rf_cp__sec05 .detail__box .inner h3{font-size: 1.4rem; padding: 18px 0 14px; text-indent: 35px; letter-spacing: 0.75px;}
    div#campaign_202209 .rf_cp__sec06 .detail__box h3{font-size: 1.55rem; line-height: 1.5; padding: 0 0 1.2rem;}
    div#campaign_202209 .rf_cp__sec06 .detail__box ul > li:nth-child(2) div{width: 80%; margin: 0 auto;}
}


/*Ranking ==============================================================================*/
section#ranking{background: #f1f4f7; padding: 5rem 0;}
section#ranking h2{margin: 0 0 2.5rem; color: #0d417a; font-size: 6.8rem; font-weight: 700; letter-spacing: 2px; text-align: center;}
section#ranking h2 span{display: block; font-size: 3.5rem; letter-spacing: 0; margin: 1.5rem 0 0;}
section#ranking hr{margin: 3rem 0;}
section#ranking + .rf__sec06{padding: 10rem 0;}
section#ranking + .rf__sec06::before{content: ''; display: none;}
section#ranking .rf__ranking,
section#ranking .rf__rank_Notice{background: #f2f2f2; border: 2px solid #0d417a;}
section#ranking .my__ranking h3{background: #0d417a; color: #fff; width: 20%; font-size: 1.5rem; font-weight: 600; letter-spacing: 1px; line-height: 1; text-align: center; margin: -30px 0 20px 0; padding: 10px;}

/*Category*/
section#ranking .rf__rank_Category{margin-bottom: 2.5rem;}
section#ranking #ranking_tab{background: #f2f2f2; border: 1px solid #cecece;}
section#ranking #ranking_tab .ranking_tab_btn ul{display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; width: 100%; padding: 1.5rem;}
section#ranking #ranking_tab .ranking_tab_btn ul > li{width: 50%; font-size: 1.8rem; text-align: center;    margin: 6px;}
section#ranking #ranking_tab .ranking_tab_btn ul > li.t3{width: 32.333%; font-size: 1.8rem; text-align: center;margin: 0.25% 0.5%;}
section#ranking #ranking_tab .ranking_tab_btn ul > li a{display: block; margin: 0; padding: 10px; transition: all 0.5s ease;}
section#ranking #ranking_tab .ranking_tab_btn ul > li a:link,
section#ranking #ranking_tab .ranking_tab_btn ul > li a:visited{background-color: #fff; color: #333;}
section#ranking #ranking_tab .ranking_tab_btn ul > li a:hover{background-color: #b0a97a; color: #fff;}
section#ranking #ranking_tab .ranking_tab_btn ul > li a.selected{background-color: #b0a97a; color: #fff;}
section#ranking #ranking_tab .ranking_tab_btn ul > li a::before{ content: ""; display: inline-block; width: 120px; height: 44px; vertical-align: middle; background-position: 50%; background-repeat: no-repeat; background-size: cover; margin-right: 10px;}
section#ranking #ranking_tab .ranking_tab_btn ul > li:nth-child(1) a::before{ background-image: url(/img/event/cpn_vsb/s_logo/s_logo_01.png); }
section#ranking #ranking_tab .ranking_tab_btn ul > li:nth-child(2) a::before{ background-image: url(/img/event/cpn_vsb/s_logo/s_logo_02.png); }
section#ranking #ranking_tab .ranking_tab_btn ul > li:nth-child(3) a::before{ background-image: url(/img/event/cpn_vsb/s_logo/s_logo_03.png); }
section#ranking #ranking_tab .ranking_tab_btn ul > li:nth-child(4) a::before{ background-image: url(/img/event/cpn_vsb/s_logo/s_logo_04.png); }
section#ranking #ranking_tab .ranking_tab_btn ul > li:nth-child(5) a::before{ background-image: url(/img/event/cpn_vsb/s_logo/s_logo_05.png); }
section#ranking #ranking_tab .ranking_tab_btn ul > li:nth-child(6) a::before{ background-image: url(/img/event/cpn_vsb/s_logo/s_logo_06.png); }
section#ranking #ranking_tab .ranking_tab_btn ul > li:nth-child(7) a::before{ background-image: url(/img/event/cpn_vsb/s_logo/s_logo_07.png); }
section#ranking #ranking_tab .ranking_tab_btn ul > li:nth-child(8) a::before{ background-image: url(/img/event/cpn_vsb/s_logo/s_logo_08.png); }
section#ranking #ranking_tab .ranking_tab_btn ul > li:nth-child(9) a::before{ background-image: url(/img/event/cpn_vsb/s_logo/s_logo_09.png); }
section#ranking #ranking_tab .ranking_tab_btn ul > li:nth-child(10) a::before{ background-image: url(/img/event/cpn_vsb/s_logo/s_logo_10.png?v=1); }
section#ranking #ranking_tab .ranking_tab_btn ul > li:nth-child(11) a::before{ background-image: url(/img/event/cpn_vsb/s_logo/s_logo_99.png); }

section#ranking #ranking_tab #shop_status{width: 93%; margin: 20px auto 0;}
section#ranking #ranking_tab #shop_status dl{display: flex; justify-content: space-between; align-items: center; background: #fff; color: #b0a97a; font-size: 1.8rem; border: 1px solid #b0a97a; padding: 10px; border-radius: 5px;}
section#ranking #ranking_tab #shop_status dt{color: #333;}
section#ranking #ranking_tab #shop_status dt span{color: #ddd;}
section#ranking #ranking_tab #shop_status dd{width: 15%; text-align: center; border-left: 1px solid;}
section#ranking #ranking_tab #shop_status dd span{width: 100%; display: block; cursor: pointer;}

section#ranking #ranking_tab .ranking_tab_content .loginArea{margin: 2.5rem 0;}
section#ranking #ranking_tab .ranking_tab_content .loginArea a{transition: .2s all linear;}
section#ranking #ranking_tab .ranking_tab_content .loginArea a:link,
section#ranking #ranking_tab .ranking_tab_content .loginArea a:visited{display: block; width: 580px; background: #0990e6; border: 2px solid #0990e6; font-size: 2.5rem; color: #fff; text-align: center; padding: 15px 10px; margin: 0 auto;}
section#ranking #ranking_tab .ranking_tab_content .loginArea a:hover{background: #fff; color: #0990e6;}
section#ranking #ranking_tab .ranking_tab_content .loginArea p{text-align: center; font-size: 1.25rem; margin: 15px 0 0; padding: 0;}
section#ranking #ranking_tab .ranking_tab_content ul{background: #f2f2f2; display: flex; justify-content: center; align-items: center;}
section#ranking #ranking_tab .ranking_tab_content ul > li{width: 45%; margin: 14px 1.5%;}
section#ranking #ranking_tab .ranking_tab_content ul > li a{transition: .2s all linear;}
section#ranking #ranking_tab .ranking_tab_content ul > li a:link,
section#ranking #ranking_tab .ranking_tab_content ul > li a:visited{display: block; background: #b0a97a; border: 1px solid #f9f8e4; font-size: 1.8rem; color: #fff; text-align: center; padding: 10px;}
section#ranking #ranking_tab .ranking_tab_content ul > li a:hover{background: #fff; color: #b0a97a; border: 1px solid #b0a97a;}
section#ranking #ranking_tab .ranking_tab_content ul > li a.selected{background: #fff; color: #b0a97a; border: 1px solid #b0a97a;}

/*myRanking*/
section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata{}
section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul{width: 100%; display: flex; justify-content: space-between;}
section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li:nth-child(1){width: 10%; margin-right: 0.5%;}
section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li:nth-child(2){width: 40%; margin-right: 0.5%;}
section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li:nth-child(3){width: 45%;}
section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata::after {content: ''; display: block; width: 107%; height: 2px; background: #0d417a; margin: 20px -3.5%;}
section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li .rf__mydata__ranking{}
section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li .rf__mydata__ranking div{width: 63px; font-size: 3.2rem; font-weight: 600; line-height: 1; text-align: center; padding: 20px 0;}
section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li .rf__mydata__ranking div.top_1{background-image: url(/img/rf/ranking/rf_rank_rank_icon1st.png); background-position: 50% 50%; background-repeat: no-repeat; color: #fff;}
section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li .rf__mydata__ranking div.top_2{background-image: url(/img/rf/ranking/rf_rank_rank_icon2nd.png); background-position: 50% 50%; background-repeat: no-repeat; color: #fff;}
section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li .rf__mydata__ranking div.top_3{background-image: url(/img/rf/ranking/rf_rank_rank_icon3rd.png); background-position: 50% 50%; background-repeat: no-repeat; color: #fff;}
section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li .rf__mydata__ranking div.rankin{color: #948c53;}
section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li .rf__mydata__ranking span{display: block; width: 80px; font-size: 1.0rem; text-align: center; padding: 5px 0 4px; border-radius: 3px;}
section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li .rf__mydata__name{}
section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li .rf__mydata__name .rf__c_name{font-size: 2.2rem; margin: 5px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li .rf__mydata__name .rf__c_shop{font-size: 1.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li .rf__mydata__log{}
section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li .rf__mydata__log ul{display: flex; justify-content: space-between; align-items: center;}
section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li .rf__mydata__log ul > li:nth-child(1){width: 10%; margin-right: 10%;}
section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li .rf__mydata__log ul > li:nth-child(2){width: 85%;}
section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li .rf__mydata__log ul > li span{display: block; line-height: 1;}
section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li .rf__mydata__log ul > li span.rf__cap_name{font-size: 1.8rem; margin-bottom: 5px; text-align: right;}
section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li .rf__mydata__log ul > li span.rf__cap_name2{font-size: 1.4rem; margin-bottom: 5px;}
section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li .rf__mydata__log ul > li span.rf__cap_size{font-size: 3.0rem; text-align: right;}

/*Ranking*/
/*
section#ranking .rf__ranking .rf__rank_title{background: #0d417a; font-size: 2.4rem; font-weight: 600; letter-spacing: 1px; line-height: 1; text-align: left; padding: 20px;}
section#ranking .rf__ranking .rf__rank_title ul{display: flex; justify-content: flex-start; align-items: center;}
section#ranking .rf__ranking .rf__rank_title ul > li .rf__s_image{width: 90px; height: 65px; border-radius: 5px; margin-right: 20px; overflow: hidden;}
section#ranking .rf__ranking .rf__rank_title ul > li .rf__s_name{color: #fff; font-size: 1.33rem; font-weight: normal; letter-spacing: 0;}
section#ranking .rf__ranking .rf__rank_title ul > li .rf__s_name span{font-size: 1.33rem; display: block; margin: 0 0 10px;}
section#ranking .rf__ranking .rf__rank_title ul > li .rf__s_name h3{font-size: 2.6rem; font-weight: 600; letter-spacing: 1px; text-align: left;}
section#ranking .rf__ranking .rf__rank_title ul > li .rf__s_name h3 span{display: inline-block; font-size: 2.6rem; margin: 0; text-overflow: unset; white-space: normal;}
*/

section#ranking .rf__ranking .rf__rank_Area{padding: 30px;}

section#ranking .rf__ranking .rf__rank_Area .rank_detail::after{content: ''; display: block; width: 105%; height: 1px; background: #d5d5d5; margin: 20px -2.5%;}
section#ranking .rf__ranking .rf__rank_Area .rank_detail:last-of-type::after{display: none;}
section#ranking .rf__ranking .rf__rank_Area .rank_detail.lower{}
section#ranking .rf__ranking .rf__rank_Area .rank_detail.lower .rf__entry_Data__name .rf__c_name{font-size: 1.8rem; margin: 3px 0;}
section#ranking .rf__ranking .rf__rank_Area .rank_detail.lower .rf__entry_Data__name .rf__c_shop{font-size: 1.6rem;}
section#ranking .rf__ranking .rf__rank_Area .rank_detail.lower .rf__entry_Data__log ul > li:nth-child(1){width: 30%; margin: 0 auto 0 6%;}
section#ranking .rf__ranking .rf__rank_Area .rank_detail.lower .rf__entry_Data__log ul > li:nth-child(2){width: 50%; margin: 0;}
section#ranking .rf__ranking .rf__rank_Area .rank_detail.lower .rf__entry_Data__log ul > li span.rf__cap_name{font-size: 1.2rem; margin-bottom: 8px;}
section#ranking .rf__ranking .rf__rank_Area .rank_detail.lower .rf__entry_Data__log ul > li span.rf__cap_size{font-size: 2.4rem;}
section#ranking .rf__ranking .rf__rank_Area .entry_Data ul{display: flex; justify-content: space-between; align-items: center;}
section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li:nth-child(1){width: 7%; margin-right: 2.5%;}
section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li:nth-child(2){width: 43%; margin-right: 2.5%;}
section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li:nth-child(3){width: 45%;}
section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li .rf__entry_Data__ranking{}
section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li .rf__entry_Data__ranking div{width: 63px; font-size: 2.2rem; font-weight: 600; line-height: 1; text-align: center; padding: 20px 0;}
section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li .rf__entry_Data__ranking div.top_1{background-image: url(/img/rf/ranking/rf_rank_rank_icon1st.png); background-position: 50% 50%; background-repeat: no-repeat; color: #fff;}
section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li .rf__entry_Data__ranking div.top_2{background-image: url(/img/rf/ranking/rf_rank_rank_icon2nd.png); background-position: 50% 50%; background-repeat: no-repeat; color: #fff;}
section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li .rf__entry_Data__ranking div.top_3{background-image: url(/img/rf/ranking/rf_rank_rank_icon3rd.png); background-position: 50% 50%; background-repeat: no-repeat; color: #fff;}
section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li .rf__entry_Data__ranking div.rankin{color: #948c53;}
section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li .rf__entry_Data__name{}
section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li .rf__entry_Data__name .rf__c_name{font-size: 2.2rem; margin: 5px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li .rf__entry_Data__name .rf__c_shop{font-size: 1.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
section#ranking .rf__ranking .rf__rank_Area .entry_Data .noplay p{margin: 5rem 0 2.5rem; padding: 0; text-align: center;}
section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li .rf__entry_Data__log{}
section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li .rf__entry_Data__log ul > li:nth-child(1){width: 10%; margin-right: 5%;}
section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li .rf__entry_Data__log ul > li:nth-child(2){width: 85%; margin: 0;}
section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li .rf__entry_Data__log ul > li span{display: block; line-height: 1;}
section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li .rf__entry_Data__log ul > li span.rf__cap_name{font-size: 1.4rem; margin-bottom: 10px; text-align: right;}
section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li .rf__entry_Data__log ul > li span.rf__cap_size{font-size: 3.0rem; text-align: right;}

/*Notice*/
section#ranking .rf__rank_Notice{}
section#ranking .rf__rank_Notice h3{background: #0d417a; font-size: 2.4rem; font-weight: 600; letter-spacing: 1px; line-height: 1; text-align: left; padding: 20px;}
section#ranking .rf__rank_Notice .rf__notice{padding: 30px;}
section#ranking .rf__rank_Notice .rf__notice .notice__detail{height: 200px; overflow: auto; padding: 10px 5px;}
section#ranking .rf__rank_Notice .rf__notice .notice__detail ul > li{list-style: disc; margin: 5px 0 5px 30px; padding: 0; font-size: 1.5rem;}
section#ranking .rf__rank_Notice .rf__notice .notice__detail .jspVerticalBar {width: 10px;}
section#ranking .rf__rank_Notice .rf__notice .notice__detail .jspTrack{background: none;}
section#ranking .rf__rank_Notice .rf__notice .notice__detail .jspDrag{background: #333333;left: -10px;}


@media (max-width: 767px) {/*smart phone*/
    section#ranking {}
    section#ranking h2{font-size: 3.8rem;}
    section#ranking h2 span{font-size: 1.8rem; margin: 1rem 0 0;}
    section#ranking hr{margin: 2rem 0;}
    section#ranking + .rf__sec05{padding: 5rem 0;}
    /*Category*/
    section#ranking #ranking_tab .ranking_tab_btn ul > li{font-size: 1.0rem;}
    section#ranking #ranking_tab .ranking_tab_btn ul > li.t3{width: 32.333%; font-size: 0.9rem; text-align: center;margin: 0.25% 0.5%;}
    section#ranking #ranking_tab .ranking_tab_btn ul > li a{display: block; margin: 0; padding: 6px 0 6px; transition: all 0.5s ease;}
    section#ranking #ranking_tab .ranking_tab_btn ul > li a::before{width: 74px; height: 32px; margin-right: 5px;}
    section#ranking #ranking_tab #shop_status{width: 87%; margin: 20px auto 0;}
    section#ranking #ranking_tab #shop_status dl{font-size: 1.0rem; padding: 10px 15px;}
    section#ranking #ranking_tab #shop_status dd{width: 20%; margin: 0 -10px 0 0;}
    section#ranking #ranking_tab .ranking_tab_content .loginArea{margin: 20px 0;}
    section#ranking #ranking_tab .ranking_tab_content .loginArea a:link,
    section#ranking #ranking_tab .ranking_tab_content .loginArea a:visited{width: 80%; font-size: 1.4rem; padding: 10px;}
    section#ranking #ranking_tab .ranking_tab_content .loginArea p{font-size: 1.1rem; margin: 10px 0 0;}
    section#ranking #ranking_tab .ranking_tab_content ul > li{width: 33%; margin: 12px 1.5%;}
    section#ranking #ranking_tab .ranking_tab_content ul > li a:link,
    section#ranking #ranking_tab .ranking_tab_content ul > li a:visited{font-size: 1.0rem; padding: 8px 8px 7px;}
    
    

    /*myRanking*/
    section#ranking .my__ranking h3{font-size: 1.2rem; letter-spacing: 0; padding: 10px; width: 45%; max-width: 180px; margin: -15px 0 10px 0;}
    section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul{flex-wrap: wrap; justify-content: flex-start;}
    section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata::after {content: ''; width: 100%; margin: 15px auto;}
    section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li:nth-child(1){width: 10%; max-width: 70px; margin-right: 0;}
    section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li:nth-child(2){width: 40%; margin-right: 0;}
    section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li:nth-child(3){width: 50%; margin: 10px 0 0;}
    section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li .rf__mydata__ranking div{width: 26px; font-size: 2.0rem; padding: 10px 0;}
    section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li .rf__mydata__ranking div.top_1,
    section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li .rf__mydata__ranking div.top_2,
    section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li .rf__mydata__ranking div.top_3{background-size: cover;}
    section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li .rf__mydata__name .rf__c_name{font-size: 1.4rem; margin: 5px 0;}
    section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li .rf__mydata__name .rf__c_shop{font-size: 1.2rem;}
    section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li .rf__mydata__log ul > li:nth-child(1){width: 14%; max-width: none; margin-right: 2%;}
    section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li .rf__mydata__log ul > li:nth-child(2){width: 84%; margin: 0;}
    section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li .rf__mydata__log ul > li span.rf__cap_name{font-size: 1.0rem; margin-bottom: 7px;}
    section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li .rf__mydata__log ul > li span.rf__cap_size{font-size: 2.25rem;}
    section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li .rf__mydata__log ul > li span.rf__cap_name2{font-size: 1.0rem; margin-bottom: 7px;text-align: center;}
    section#ranking .rf__ranking .rf__rank_Area .my__ranking .rf__mydata ul > li .rf__mydata__log ul > li span.rf__cap_name2 img { height: 18px; }

    /*Ranking*/
    /*
    section#ranking .rf__ranking .rf__rank_title{font-size: 1.5rem; padding: 12px 10px;}
    section#ranking .rf__ranking .rf__rank_title ul > li:nth-child(1){}
    section#ranking .rf__ranking .rf__rank_title ul > li:nth-child(2){width: 75%; margin-left: 15px;}
    section#ranking .rf__ranking .rf__rank_title ul > li .rf__s_image{width: 50px; height: 36px; margin: 0;}
    section#ranking .rf__ranking .rf__rank_title ul > li .rf__s_name span{font-size: 1.1rem; margin: 0 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
    section#ranking .rf__ranking .rf__rank_title ul > li .rf__s_name h3{font-size: 1.5rem; line-height: 1.33em;}
    section#ranking .rf__ranking .rf__rank_title ul > li .rf__s_name h3 span{font-size: 1.5rem; overflow: unset;}
    */
    section#ranking .rf__ranking .rf__rank_Area{padding: 15px;}
    section#ranking .rf__ranking .rf__rank_Area .rank_detail::after{content: ''; width: 100%; margin: 15px auto;}
    section#ranking .rf__ranking .rf__rank_Area .rank_detail.lower .rf__entry_Data__name .rf__c_name{font-size: 1.4rem; margin: 5px 0;}
    section#ranking .rf__ranking .rf__rank_Area .rank_detail.lower .rf__entry_Data__name .rf__c_shop{font-size: 1.1rem;}
    section#ranking .rf__ranking .rf__rank_Area .rank_detail.lower .rf__entry_Data__log ul > li:nth-child(1){width: 25%; margin: 0 auto 0 5%;}
    section#ranking .rf__ranking .rf__rank_Area .rank_detail.lower .rf__entry_Data__log ul > li:nth-child(2){width: 65%;}
    section#ranking .rf__ranking .rf__rank_Area .rank_detail.lower .rf__entry_Data__log ul > li span.rf__cap_name{font-size: 1.1rem; margin-bottom: 5px;}
    section#ranking .rf__ranking .rf__rank_Area .rank_detail.lower .rf__entry_Data__log ul > li span.rf__cap_size{font-size: 1.6rem;}
    section#ranking .rf__ranking .rf__rank_Area .entry_Data ul{flex-wrap: wrap; justify-content: flex-start;}
    section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li:nth-child(1){width: 10%; max-width: 55px; margin-right: 0;}
    section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li:nth-child(2){width: 40%; margin-right: 0;}
    section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li:nth-child(3){width: 50%; margin: 10px 0 0;}
    section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li .rf__entry_Data__ranking div{width: 28px; font-size: 2.0rem; padding: 10px 0;}
    section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li .rf__entry_Data__ranking div.top_1,
    section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li .rf__entry_Data__ranking div.top_2,
    section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li .rf__entry_Data__ranking div.top_3{background-size: cover;}
    section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li .rf__entry_Data__name .rf__c_name{font-size: 1.4rem; margin: 5px 0;}
    section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li .rf__entry_Data__name .rf__c_shop{font-size: 1.2rem;}
    section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li .rf__entry_Data__log ul > li:nth-child(1){width: 10%; max-width: none; margin-right: 0%;text-align: center;}
    section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li .rf__entry_Data__log ul > li:nth-child(2){width: 90%; margin: 0;}
    section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li .rf__entry_Data__log ul > li span.rf__cap_name{font-size: 1.0rem; margin-bottom: 7px; text-align: right;}
    section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li .rf__entry_Data__log ul > li span.rf__cap_name img { height: 18px; }
    section#ranking .rf__ranking .rf__rank_Area .entry_Data ul > li .rf__entry_Data__log ul > li span.rf__cap_size{font-size: 2.25rem;margin-left: 0%; text-align: right;}

    /*Notice*/
    section#ranking .rf__rank_Notice h3{font-size: 1.5rem; padding: 12px 10px;}
    section#ranking .rf__rank_Notice .rf__notice{padding: 15px;}
    section#ranking .rf__rank_Notice .rf__notice .notice__detail{height: 160px;}
    section#ranking .rf__rank_Notice .rf__notice .notice__detail ul > li{margin: 5px 0 5px 15px; font-size: 1.25rem;}
    section#ranking .rf__rank_Notice .rf__notice .notice__detail .jspVerticalBar {width: 7px;}
    section#ranking .rf__rank_Notice .rf__notice .notice__detail .jspDrag{left: -5px;}
    
}

@media (min-width: 768px) {/*sm~lg*/}
@media (max-width: 460px) {
    section#ranking h2{font-size: 2.4rem;}
    section#ranking h2 span{font-size: 1.4rem; margin: 0.8rem 0 0;}
    section#ranking .my__ranking .rf__mydata ul > li .rf__mydata__ranking ul > li{margin: 0 5%;}
    section#ranking .my__ranking .rf__mydata ul > li .rf__mydata__ranking ul > li div{width: 46px; font-size: 2.0rem; padding: 10px 0;}
    section#ranking .my__ranking .rf__mydata ul > li .rf__mydata__ranking ul > li span{width: 80px; font-size: 0.8rem; padding: 5px 0 4px;}
}


/*PICTURE BOOK ==============================================================================*/
section#pictbook{background: #f1f4f7;}
section#pictbook h2{margin: 0 0 2.5rem; color: #0d417a; font-size: 6.8rem; font-weight: 700; letter-spacing: 2px; text-align: center;}
section#pictbook h2 span{display: block; font-size: 3.5rem; letter-spacing: 0; margin: 1.5rem 0 0;}
section#pictbook hr{margin: 3rem 0;}

section#pictbook .rf__pb_Sort{}
section#pictbook .rf__pb_Sort dl{display: flex; justify-content: space-between; align-items: center; background: #0d417a; color: #fff; border-radius: 50px; padding: 1.5rem 4rem; margin-bottom: 2.5rem; font-size: 1.8rem;}
section#pictbook .rf__pb_Sort dt{width: 10%; border-right: 2px solid #fff;}
section#pictbook .rf__pb_Sort dd{width: 90%;}
section#pictbook .rf__pb_Sort dd ul{display: flex; justify-content: space-around; align-items: center;}
section#pictbook .rf__pb_Sort dd ul#filters li{transition: .2s all linear; cursor: pointer;}
section#pictbook .rf__pb_Sort dd ul#filters li:hover{color: #3997ff;}

section#pictbook .rf__pb_list{}
section#pictbook .rf__pb_list ul{width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
section#pictbook .rf__pb_list ul li{width: 30%; margin: 1.5rem 1.5%;}
section#pictbook .rf__pb_list .fish-detail{cursor: pointer;}
section#pictbook .rf__pb_list figure{position: relative; border-radius: 5px; overflow: hidden;}
section#pictbook .rf__pb_list figure img{border: 1px solid #b0a97a; border-radius: 5px;}
section#pictbook .rf__pb_list figure .fish_image{}
section#pictbook .rf__pb_list figure .fish_image.get::before{content: 'GET!'; display: block; width: 200px; position: absolute; top: -15px; left: -75px; background: #0d417a; color: #fff; padding: 30px 10px 0; margin: 0;
font-family: "Anton",sans-serif; font-size: 3.2rem; text-align: center;
transform: rotate(-45deg);
}
section#pictbook .rf__pb_list figcaption{display: flex; justify-content: flex-start; align-items: center; margin-top: 1.5rem;}
section#pictbook .rf__pb_list figcaption .book_id{width: 40%; display: inline-block; background: #0d417a; text-align: center; color: #fff; font-weight: 600; padding: 5px 10px; margin-right: 3%; border-radius: 5px;}
section#pictbook .rf__pb_list figcaption .book_id div{display: inline-block;}
section#pictbook .rf__pb_list figcaption .fish_name{width: 60%; font-size: 1.7rem;}
section#pictbook .rf__pb_list ul li.fish-item figcaption .fish_name::before{content: ''; display: inline-block; width: 22px; height: 22px; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; vertical-align: -5px; margin-right: 3px;}
section#pictbook .rf__pb_list ul li.fish-item.rank_s figcaption .fish_name::before{background-image: url(/img/rf/picture/medal_S.png);}
section#pictbook .rf__pb_list ul li.fish-item.rank_a figcaption .fish_name::before{background-image: url(/img/rf/picture/medal_A.png);}
section#pictbook .rf__pb_list ul li.fish-item.rank_b figcaption .fish_name::before{background-image: url(/img/rf/picture/medal_B.png);}
section#pictbook .rf__pb_list ul li.fish-item.rank_c figcaption .fish_name::before{background-image: url(/img/rf/picture/medal_C.png);}
section#pictbook .rf__pb_list ul li.fish-item.rank_d figcaption .fish_name::before{background-image: url(/img/rf/picture/medal_D.png);}

section#pictbook .rf__promoArea{margin: 0 0 3rem; border: 2px solid #0d417a; padding: 15px 10px; background: rgba(255,255,255,0.75);}
section#pictbook .rf__promoArea p{color: #d61518; font-size: 1.5rem; font-weight: 600; text-align: center; line-height: 1.33em; margin: 5px 0 0;}

@media (max-width: 767px) {/*smart phone*/
    section#pictbook h2{font-size: 3.8rem;}
    section#pictbook h2 span{font-size: 1.8rem; margin: 1rem 0 0;}
    section#pictbook hr{margin: 2rem 0;}
    section#pictbook .rf__pb_Sort dl{display: block; padding: 1rem 2rem; margin-bottom: 1.5rem; font-size: 1.2rem;}
    section#pictbook .rf__pb_Sort dt{display: none;}
    section#pictbook .rf__pb_Sort dd{width: 100%;}
    section#pictbook .rf__pb_Sort dd ul{font-size: 1.0rem;}
    section#pictbook .rf__pb_list ul li{width: 46%; margin: 1rem 2%;}
    section#pictbook .rf__pb_list figure .fish_image.get::before{top: -10px; left: -37px; padding: 20px 5px 0; width: 100px; font-size: 1.6rem;}
    section#pictbook .rf__pb_list figcaption{display: block; margin-top: 1.0rem;}
    section#pictbook .rf__pb_list figcaption .book_id{width: auto; padding: 5px 10px; margin: 0 0 0.25rem; font-size: 1.0rem;}
    section#pictbook .rf__pb_list figcaption .fish_name{width: auto; padding: 0; margin: 0.5rem 0 0; font-size: 1.25rem;}
    section#pictbook .rf__pb_list ul li.fish-item figcaption .fish_name::before{width: 20px; height: 20px; vertical-align: -5px; margin-right: 5px;}
    section#pictbook .rf__promoArea{margin: 0 0 2rem; padding: 10px;}
    section#pictbook .rf__promoArea p{font-size: 1.1rem; letter-spacing: 0; line-height: 1.4em;}
}

@media (min-width: 768px) {/*sm~lg*/}

@media (max-width: 460px) {
    section#pictbook h2{font-size: 2.4rem;}
    section#pictbook h2 span{font-size: 1.2rem; margin: 0.8rem 0 0;}
}

/* == Modal ================================================== */
#ev__modal{display: block;}
.js-modal__bg {width: 100%; height: 100%;background-color: rgba(0,0,0,0); position: fixed; top: 0; left: 0; z-index: 10; display: none;}
.js-modal__main {display: none; width: 100%; height: 100vh; padding: 15%; margin: 0; position: fixed; top: 0; left: 0; background-color: rgba(13,65,122,0.95); z-index: 200;}
.js-modal__main .modal__contentsBox{width: 70%; margin: -240px 0 0 -35%; position: absolute; top: 50%; left: 50%;}
.js-modal__main .modal__contentsBox h2.logo{width: 100%; max-width: 180px; text-align: center; margin: 0 auto;}
.js-modal__main .modal__contentsBox .modal__menu ul{list-style: none; margin: 0; padding: 0;}
.js-modal__main .modal__contentsBox .modal__menu ul > li{text-align: center; margin-bottom: 20px;}
.js-modal__main .modal__contentsBox .modal__menu ul > li a{display: block; color: #fff !important; font-size: 2.2rem; line-height: 2.0rem;}
.js-modal__main .modal__contentsBox .modal__menu ul > li a span{display: block; font-size: 1.25rem;}
.js-modal__btn--close--fix {width: 80%; padding: 5px; margin: 15px auto;}
.js-modal__btn--close--fix a:link,
.js-modal__btn--close--fix a:visited{display: block; background: #0990e6; border: 2px solid #0990e6; font-size: 1.6rem; color: #fff; text-align: center; padding: 10px;}
.js-modal__main._slideUp {animation: SlideUp .5s ease-in-out forwards;}
.js-modal__main._slideDown {animation: SlideDown .5s ease-in-out forwards;}


/* == reModal ================================================== */
.remodal-overlay {position: fixed; z-index: 9999; top: -5000px; right: -5000px; bottom: -5000px; left: -5000px; display: none;}
.remodal-overlay {background: rgba(0, 0, 0, 0.7);}
.remodal-wrapper {position: fixed; z-index: 10000; top: 0; right: 0; bottom: 0; left: 0; display: none; overflow: auto; text-align: center; -webkit-overflow-scrolling: touch;}
.remodal {max-width: 970px !important; padding: 0 !important;}
.remodal-close {color: #fff !important; width: 32px !important; height: 32px !important; top: 18px !important; right: 30px !important; left: auto !important;}
.remodal-close:before{content: "" !important; width: 35px !important; height: 34px !important; border-right: 7px solid #fff; transform: rotate(-45deg); top: 9px !important; left: -11px !important;}
.remodal-close:after{content: ""; width: 35px; height: 34px; border-right: 7px solid #fff; transform: rotate(45deg); position: absolute; top: -11px; left: -11px;}
.remodal-is-initialized {display: inline-block;}
.get__board .get__inner h3{background: #0d417a; color: #fff; text-align: left; font-size: 2.5rem; font-weight: 600; padding: 20px 20px 15px;}
.get__board .get__inner h3 span::after{content: ''; display: inline-block; width: 1px; height: 25px; background: #fff; vertical-align: -3px; margin: 0 10px;}
.get__board .get__inner .detail{display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; padding: 50px; border: 2px solid #0d417a;}
.get__board .get__inner .detail .thum{width: 45%; margin-right: 5%; border-radius: 5px; border: 2px solid #c7c3a4;}
.get__board .get__inner .detail .media{width: 50%;}
.get__board .get__inner .detail .media .media-object dl{display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dotted #c7c3a4; padding: 20px 0 18px;}
.get__board .get__inner .detail .media .media-object dt{font-size: 2.4rem; font-weight: 600; line-height: 1; width: 50%; text-align: left;}
.get__board .get__inner .detail .media .media-object dd{width: 50%; font-size: 2.6rem; line-height: 1; text-align: right;}
.get__board .get__inner .detail .media .media-object dd img{width: 50px; display: inline-block;}
.get__board .get__inner .detail .media .media-object dd .num_get,
.get__board .get__inner .detail .media .media-object dd .num_max,
.get__board .get__inner .detail .media .media-object dd .num_min{display: inline-block;}
.get__board .get__inner .detail .media .media-object dd .num_max,
.get__board .get__inner .detail .media .media-object dd .num_min{color: #af9c66;}
.get__board .get__inner .detail .media .media-object dd .num_max::before,
.get__board .get__inner .detail .media .media-object dd .num_min::before{content: ''; display: inline-block; width: 32px; height: 32px; background-image: url(/img/rf/picture/crown_gold.svg); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; vertical-align: -5px; margin-right: 7px;}
.get__board .get__inner .detail .media .media-object dd .theo{color: #c40e0e !important;}
.get__board .get__inner .detail .media .media-object dd .theo::before{background-image: url(/img/rf/picture/crown_red.svg) !important;}

@media (max-width: 767px) {/*smart phone*/
    .remodal {max-width: 400px !important;}
    .remodal-close {width: 22px !important; height: 22px !important; top: 10px !important; right: 10px !important;}
    .remodal-close:before{width: 23px !important; height: 20px !important; border-right: 4px solid #fff; transform: rotate(-45deg); top: 6px !important; left: -9px !important;}
    .remodal-close:after{width: 23px;height: 20px; border-right: 4px solid #fff; top: -8px; left: -9px;}
    .get__board .get__inner h3{font-size: 1.5rem; padding: 10px 10px 8px;}
    .get__board .get__inner h3 span::after{height: 15px; vertical-align: -2px; margin: 0 8px;}
    .get__board .get__inner .detail{padding: 15px;}
    .get__board .get__inner .detail .thum{width: 100%; margin-right: 0;}
    .get__board .get__inner .detail .media{width: 100%;}
    .get__board .get__inner .detail .media .media-object dl{padding: 10px 0 9px;}
    .get__board .get__inner .detail .media .media-object dt{font-size: 1.4rem;}
    .get__board .get__inner .detail .media .media-object dd{font-size: 1.5rem;}
    .get__board .get__inner .detail .media .media-object dd img{width: 28px;}
    .get__board .get__inner .detail .media .media-object dd .num_max::before,
    .get__board .get__inner .detail .media .media-object dd .num_min::before{width: 21px; height: 22px;}
}

@media (max-width: 460px) {}


/* == shopSwitch ================================================== */
.js__switch__bg {width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); position: fixed; top: 0; left: 0; z-index: 100; display: none;}
.js__switch-main{display: none; width: 100%; max-width: 900px; color: #3c4455; height: 65vh; padding: 30px; margin: 0 0 0 -450px; bottom: 0; left: 50%; background: #fff; border-radius: 10px 10px 0 0; position: fixed; z-index: 101; opacity: 0; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .60);}
.js-switch__btn--close--fix {width: 20px; height: 20px; border-radius: 50%; position: absolute; top: 25px; right: 35px; z-index: 101; cursor: pointer; -webkit-tap-highlight-color: rgba(0,0,0,0);}
.js-switch__btn--close--fix:before{content: ""; width: 21px; height: 23px; border-right: 3px solid #d2d2d7; transform: rotate(-45deg); position: absolute; top: 5px; left: -7px;}
.js-switch__btn--close--fix:after{content: ""; width: 20px; height: 22px; border-right: 3px solid #d2d2d7; transform: rotate(45deg); position: absolute; top: -7px; left: -6px;}
.js__switch-main .modal__switchArea{}
.js__switch-main .modal__switchArea h4{font-size: 2.0rem; font-weight: 600; text-align: center; position: relative; margin: 2.5rem 0;}
.js__switch-main .modal__switchArea h4::before{content: ""; width: 50%; max-width: 180px; height: 3px; background: #bbbbbb; position: absolute; top: -25px; left: 50%; margin: 0 0 0 -90px; border-radius: 6px;}
.js__switch-main .modal__switchArea dl{display: flex; font-size: 0.8rem; margin-bottom: 25px;}
.js__switch-main .modal__switchArea dl > dt{margin-right: 10px;}
.js__switch-main .modal__switchArea .shopList ul > li{display: flex; justify-content: flex-start; align-items: center; margin: 20px 0; padding: 0 0 20px; border-bottom: 1px dotted #d2d2d7; position: relative;}
.js__switch-main .modal__switchArea .shopList ul > li a{display: flex; justify-content: flex-start; align-items: center; width: 100%;}
.js__switch-main .modal__switchArea .shopList ul > li a:after{position: absolute; content: ""; border-top: 2px solid #d2d2d7; border-right: 2px solid #d2d2d7; width: 18px; height: 18px; -webkit-transform: rotate(45deg); transform: rotate(45deg); right: 35px; top: 50%; margin: -18px 0 0 0; transition-duration: 0.5s;}
.js__switch-main .modal__switchArea .shopList li .shop__icon{margin-right: 15px;}
.js__switch-main .modal__switchArea .shopList li .shop__icon div img{object-fit: cover; border-radius: 50%; min-width: 60px; min-height: 60px; max-width: 60px; max-height: 60px; font-family: 'object-fit: cover;';}
.js__switch-main .modal__switchArea .shopList li .shop__image{width: 17.5%; border-radius: 5px; overflow: hidden; margin-right: 2.5%;}
.js__switch-main .modal__switchArea .shopList li .shop__name{width: 80%; overflow: hidden;}
.js__switch-main .modal__switchArea .shopList li .shop__name p{font-size: 2.0rem; margin-bottom: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition-duration: 0.5s;}
.js__switch-main .modal__switchArea .shopList ul > li a:hover .shop__name p{color: #2ba8fc;}
.js__switch-main .modal__switchArea .shopList li .shop__name span{font-size: 1.25rem;}
.js__switch-main .modal__switchArea .shopList li .shop__name span div{display: inline-block; margin-left: 5px;}
.js__switch-main .modal__switchArea .shopList .shopList_detail{height: 390px; overflow: auto; padding: 10px 5px;}
.js__switch-main .modal__switchArea .shopList .shopList_detail .jspVerticalBar {width: 10px;}
.js__switch-main .modal__switchArea .shopList .shopList_detail .jspTrack{background: none;}
.js__switch-main .modal__switchArea .shopList .shopList_detail .jspDrag{background: #333333;left: -10px;}
.js__switch-main._slideUp {animation: Shop_SlideUp .5s ease-in-out forwards;}
.js__switch-main._slideDown {animation: Shop_SlideDown .5s ease-in-out forwards;}

@media (max-width: 767px) {/*smart phone*/
    .js__switch-main{display: none; max-width: 440px; height: 55vh; padding: 20px; margin: 0 0 0 -220px;}
    .js-switch__btn--close--fix {top: 15px; right: 15px;}
    .js__switch-main .modal__switchArea h4{font-size: 1.5rem; margin: 1.8rem 0;}
    .js__switch-main .modal__switchArea h4::before{margin: 0 0 0 -70px;}
    .js__switch-main .modal__switchArea .shopList ul > li{margin: 15px 0; padding: 0 0 15px;}
    .js__switch-main .modal__switchArea .shopList ul > li a:after{width: 12px; height: 12px; right: 15px;}
    .js__switch-main .modal__switchArea .shopList li .shop__image{width: 22.5%;}
    .js__switch-main .modal__switchArea .shopList li .shop__name{width: 75%;}
    .js__switch-main .modal__switchArea .shopList li .shop__name p{font-size: 1.4rem;}
    .js__switch-main .modal__switchArea .shopList li .shop__name span{font-size: 1.1rem;}
    .js__switch-main .modal__switchArea .shopList .shopList_detail{height: calc(30vh);}
    .js__switch-main .modal__switchArea .shopList .shopList_detail .jspVerticalBar {width: 7px;}
    .js__switch-main .modal__switchArea .shopList .shopList_detail .jspDrag{left: 0;}
}

@media (max-width: 460px) {
    .js__switch-main{display: none; max-width: 320px; height: 55vh; padding: 20px; margin: 0 0 0 -160px;}
}

/*animated ==============================================================================*/
.animated {animation-duration: 1s; animation-fill-mode: both; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: both;}

@keyframes SlideUp {
  0%   {opacity: 1; transform: translateX(0%);}
  100% {opacity: 0; transform: translateX(100%);}
}
@keyframes SlideDown {
  0%   {opacity: 0; transform: translateX(100%);}
  100% {opacity: 1; transform: translateX(0%);}
}
@keyframes Shop_SlideUp {
	0%   {opacity: 0; transform: translateY(100%);}
	100% {opacity: 1; transform: translateY(0%);}
}
@keyframes Shop_SlideDown {
	0%   {opacity: 1; transform: translateY(0%);}
	100% {opacity: 0; transform: translateY(100%);}
}


/* font */

/* icon font */
@font-face {
 font-family: 'Glyphicons Halflings';
  src: url('/fonts/glyphicons-halflings-regular.eot');
  src: url('/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
  url('/fonts/glyphicons-halflings-regular.woff2') format('woff2'),
  url('/fonts/glyphicons-halflings-regular.woff') format('woff'), 
  url('/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
  url('/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
@font-face {
  font-family: 'FontAwesome';
  src: url('/fonts/fontawesome-webfont.eot?v=4.6.3');
  src: url('/fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('/fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('/fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('/fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('/fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

.glyphicon {
  position: relative;
  top: 0;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.glyphicon-asterisk:before { content: "\2a";}
.glyphicon-plus:before { content: "\2b";}
.glyphicon-euro:before,.glyphicon-eur:before { content: "\20ac";}
.glyphicon-minus:before { content: "\2212";}
.glyphicon-cloud:before { content: "\2601";}
.glyphicon-envelope:before { content: "\2709";}
.glyphicon-pencil:before { content: "\270f";}
.glyphicon-glass:before { content: "\e001";}
.glyphicon-music:before { content: "\e002";}
.glyphicon-search:before { content: "\e003";}
.glyphicon-heart:before { content: "\e005";}
.glyphicon-star:before { content: "\e006";}
.glyphicon-star-empty:before { content: "\e007";}
.glyphicon-user:before { content: "\e008";}
.glyphicon-film:before { content: "\e009";}
.glyphicon-th-large:before { content: "\e010";}
.glyphicon-th:before { content: "\e011";}
.glyphicon-th-list:before { content: "\e012";}
.glyphicon-ok:before { content: "\e013";}
.glyphicon-remove:before { content: "\e014";}
.glyphicon-zoom-in:before { content: "\e015";}
.glyphicon-zoom-out:before { content: "\e016";}
.glyphicon-off:before { content: "\e017";}
.glyphicon-signal:before { content: "\e018";}
.glyphicon-cog:before { /*content: "\e019";*/ font-family: 'FontAwesome'; content: "\f013"; }
.glyphicon-trash:before { content: "\e020";}
.glyphicon-home:before { /*content: "\e021";*/ font-family: 'FontAwesome'; content: "\f015";}
.glyphicon-file:before { content: "\e022";}
.glyphicon-time:before { content: "\e023";}
.glyphicon-road:before { content: "\e024";}
.glyphicon-download-alt:before { content: "\e025";}
.glyphicon-download:before { content: "\e026";}
.glyphicon-upload:before { /*content: "\e027";*/  font-family: 'FontAwesome'; content: "\f093";}
.glyphicon-inbox:before { content: "\e028";}
.glyphicon-play-circle:before { content: "\e029";}
.glyphicon-repeat:before { content: "\e030";}
.glyphicon-refresh:before { content: "\e031";}
.glyphicon-list-alt:before { content: "\e032";}
.glyphicon-lock:before { content: "\e033";}
.glyphicon-flag:before { content: "\e034";}
.glyphicon-headphones:before { content: "\e035";}
.glyphicon-volume-off:before { content: "\e036";}
.glyphicon-volume-down:before { content: "\e037";}
.glyphicon-volume-up:before { content: "\e038";}
.glyphicon-qrcode:before { content: "\e039";}
.glyphicon-barcode:before { content: "\e040";}
.glyphicon-tag:before { content: "\e041";}
.glyphicon-tags:before { content: "\e042";}
.glyphicon-book:before { content: "\e043";}
.glyphicon-bookmark:before { content: "\e044";}
.glyphicon-print:before { content: "\e045";}
.glyphicon-camera:before { content: "\e046";}
.glyphicon-font:before { content: "\e047";}
.glyphicon-bold:before { content: "\e048";}
.glyphicon-italic:before { content: "\e049";}
.glyphicon-text-height:before { content: "\e050";}
.glyphicon-text-width:before { content: "\e051";}
.glyphicon-align-left:before { content: "\e052";}
.glyphicon-align-center:before { content: "\e053";}
.glyphicon-align-right:before { content: "\e054";}
.glyphicon-align-justify:before { content: "\e055";}
.glyphicon-list:before { content: "\e056";}
.glyphicon-indent-left:before { content: "\e057";}
.glyphicon-indent-right:before { content: "\e058";}
.glyphicon-facetime-video:before { content: "\e059";}
.glyphicon-picture:before { content: "\e060";}
.glyphicon-map-marker:before { content: "\e062";}
.glyphicon-adjust:before { content: "\e063";}
.glyphicon-tint:before { content: "\e064";}
.glyphicon-edit:before { content: "\e065";}
.glyphicon-share:before { content: "\e066";}
.glyphicon-check:before { content: "\e067";}
.glyphicon-move:before { content: "\e068";}
.glyphicon-step-backward:before { content: "\e069";}
.glyphicon-fast-backward:before { content: "\e070";}
.glyphicon-backward:before { content: "\e071";}
.glyphicon-play:before { content: "\e072";}
.glyphicon-pause:before { content: "\e073";}
.glyphicon-stop:before { content: "\e074";}
.glyphicon-forward:before { content: "\e075";}
.glyphicon-fast-forward:before { content: "\e076";}
.glyphicon-step-forward:before { content: "\e077";}
.glyphicon-eject:before { content: "\e078";}
.glyphicon-chevron-left:before { content: "\e079";}
.glyphicon-chevron-right:before { content: "\e080";}
.glyphicon-plus-sign:before { content: "\e081";}
.glyphicon-minus-sign:before { content: "\e082";}
.glyphicon-remove-sign:before { content: "\e083";}
.glyphicon-ok-sign:before { content: "\e084";}
.glyphicon-question-sign:before { content: "\e085";}
.glyphicon-info-sign:before { content: "\e086";}
.glyphicon-screenshot:before { content: "\e087";}
.glyphicon-remove-circle:before { content: "\e088";}
.glyphicon-ok-circle:before { content: "\e089";}
.glyphicon-ban-circle:before { content: "\e090";}
.glyphicon-arrow-left:before { content: "\e091";}
.glyphicon-arrow-right:before { content: "\e092";}
.glyphicon-arrow-up:before { content: "\e093";}
.glyphicon-arrow-down:before { content: "\e094";}
.glyphicon-share-alt:before { content: "\e095";}
.glyphicon-resize-full:before { content: "\e096";}
.glyphicon-resize-small:before { content: "\e097";}
.glyphicon-exclamation-sign:before { content: "\e101";}
.glyphicon-gift:before { content: "\e102";}
.glyphicon-leaf:before { content: "\e103";}
.glyphicon-fire:before { content: "\e104";}
.glyphicon-eye-open:before { content: "\e105";}
.glyphicon-eye-close:before { content: "\e106";}
.glyphicon-warning-sign:before { content: "\e107";}
.glyphicon-plane:before { content: "\e108";}
.glyphicon-calendar:before { content: "\e109";}
.glyphicon-random:before { content: "\e110";}
.glyphicon-comment:before { content: "\e111";}
.glyphicon-magnet:before { content: "\e112";}
.glyphicon-chevron-up:before { content: "\e113";}
.glyphicon-chevron-down:before { content: "\e114";}
.glyphicon-retweet:before { content: "\e115";}
.glyphicon-shopping-cart:before { content: "\e116";}
.glyphicon-folder-close:before { content: "\e117";}
.glyphicon-folder-open:before { content: "\e118";}
.glyphicon-resize-vertical:before { content: "\e119";}
.glyphicon-resize-horizontal:before { content: "\e120";}
.glyphicon-hdd:before { content: "\e121";}
.glyphicon-bullhorn:before { content: "\e122";}
.glyphicon-bell:before { content: "\e123";}
.glyphicon-certificate:before { content: "\e124";}
.glyphicon-thumbs-up:before { content: "\e125";}
.glyphicon-thumbs-down:before { content: "\e126";}
.glyphicon-hand-right:before { content: "\e127";}
.glyphicon-hand-left:before { content: "\e128";}
.glyphicon-hand-up:before { content: "\e129";}
.glyphicon-hand-down:before { content: "\e130";}
.glyphicon-circle-arrow-right:before { content: "\e131";}
.glyphicon-circle-arrow-left:before { content: "\e132";}
.glyphicon-circle-arrow-up:before { content: "\e133";}
.glyphicon-circle-arrow-down:before { content: "\e134";}
.glyphicon-globe:before { content: "\e135";}
.glyphicon-wrench:before { content: "\e136";}
.glyphicon-tasks:before { content: "\e137";}
.glyphicon-filter:before { content: "\e138";}
.glyphicon-briefcase:before { content: "\e139";}
.glyphicon-fullscreen:before { content: "\e140";}
.glyphicon-dashboard:before { content: "\e141";}
.glyphicon-paperclip:before { content: "\e142";}
.glyphicon-heart-empty:before { content: "\e143";}
.glyphicon-link:before { content: "\e144";}
.glyphicon-phone:before { content: "\e145";}
.glyphicon-pushpin:before { content: "\e146";}
.glyphicon-usd:before { content: "\e148";}
.glyphicon-gbp:before { content: "\e149";}
.glyphicon-sort:before { content: "\e150";}
.glyphicon-sort-by-alphabet:before { content: "\e151";}
.glyphicon-sort-by-alphabet-alt:before { content: "\e152";}
.glyphicon-sort-by-order:before { content: "\e153";}
.glyphicon-sort-by-order-alt:before { content: "\e154";}
.glyphicon-sort-by-attributes:before { content: "\e155";}
.glyphicon-sort-by-attributes-alt:before { content: "\e156";}
.glyphicon-unchecked:before { content: "\e157";}
.glyphicon-expand:before { content: "\e158";}
.glyphicon-collapse-down:before { content: "\e159";}
.glyphicon-collapse-up:before { content: "\e160";}
.glyphicon-log-in:before { content: "\e161";}
.glyphicon-flash:before { content: "\e162";}
.glyphicon-log-out:before { content: "\e163";}
.glyphicon-new-window:before { content: "\e164";}
.glyphicon-record:before { content: "\e165";}
.glyphicon-save:before { content: "\e166";}
.glyphicon-open:before { content: "\e167";}
.glyphicon-saved:before { content: "\e168";}
.glyphicon-import:before { content: "\e169";}
.glyphicon-export:before { content: "\e170";}
.glyphicon-send:before { content: "\e171";}
.glyphicon-floppy-disk:before { content: "\e172";}
.glyphicon-floppy-saved:before { content: "\e173";}
.glyphicon-floppy-remove:before { content: "\e174";}
.glyphicon-floppy-save:before { content: "\e175";}
.glyphicon-floppy-open:before { content: "\e176";}
.glyphicon-credit-card:before { content: "\e177";}
.glyphicon-transfer:before { content: "\e178";}
.glyphicon-cutlery:before { content: "\e179";}
.glyphicon-header:before { content: "\e180";}
.glyphicon-compressed:before {content: "\e181";}
.glyphicon-earphone:before { content: "\e182";}
.glyphicon-phone-alt:before { content: "\e183";}
.glyphicon-tower:before { content: "\e184";}
.glyphicon-stats:before { content: "\e185";}
.glyphicon-sd-video:before { content: "\e186";}
.glyphicon-hd-video:before { content: "\e187";}
.glyphicon-subtitles:before { content: "\e188";}
.glyphicon-sound-stereo:before { content: "\e189";}
.glyphicon-sound-dolby:before { content: "\e190";}
.glyphicon-sound-5-1:before { content: "\e191";}
.glyphicon-sound-6-1:before { content: "\e192";}
.glyphicon-sound-7-1:before { content: "\e193";}
.glyphicon-copyright-mark:before { content: "\e194";}
.glyphicon-registration-mark:before { content: "\e195";}
.glyphicon-cloud-download:before { content: "\e197";}
.glyphicon-cloud-upload:before { content: "\e198";}
.glyphicon-tree-conifer:before { content: "\e199";}
.glyphicon-tree-deciduous:before { content: "\e200";}
.glyphicon-cd:before { content: "\e201";}
.glyphicon-save-file:before { content: "\e202";}
.glyphicon-open-file:before { content: "\e203";}
.glyphicon-level-up:before { content: "\e204";}
.glyphicon-copy:before { content: "\e205";}
.glyphicon-paste:before { content: "\e206";}
.glyphicon-alert:before { content: "\e209";}
.glyphicon-equalizer:before { content: "\e210";}
.glyphicon-king:before { content: "\e211";}
.glyphicon-queen:before { content: "\e212";}
.glyphicon-pawn:before { content: "\e213";}
.glyphicon-bishop:before { content: "\e214";}
.glyphicon-knight:before { content: "\e215";}
.glyphicon-baby-formula:before { content: "\e216";}
.glyphicon-tent:before { content: "\26fa";}
.glyphicon-blackboard:before { content: "\e218";}
.glyphicon-bed:before { content: "\e219";}
.glyphicon-apple:before { content: "\f8ff";}
.glyphicon-erase:before { content: "\e221";}
.glyphicon-hourglass:before { content: "\231b";}
.glyphicon-lamp:before { content: "\e223";}
.glyphicon-duplicate:before { content: "\e224";}
.glyphicon-piggy-bank:before { content: "\e225";}
.glyphicon-scissors:before { content: "\e226";}
.glyphicon-bitcoin:before { content: "\e227";}
.glyphicon-yen:before { content: "\00a5";}
.glyphicon-ruble:before { content: "\20bd";}
.glyphicon-scale:before { content: "\e230";}
.glyphicon-ice-lolly:before { content: "\e231";}
.glyphicon-ice-lolly-tasted:before { content: "\e232";}
.glyphicon-education:before { content: "\e233";}
.glyphicon-option-horizontal:before { content: "\e234";}
.glyphicon-option-vertical:before { content: "\e235";}
.glyphicon-menu-hamburger:before { /*content: "\e236";*/ font-family: 'FontAwesome';  content: "\f0c9";}
.glyphicon-modal-window:before { content: "\e237";}
.glyphicon-oil:before { content: "\e238";}
.glyphicon-grain:before { content: "\e239";}
.glyphicon-sunglasses:before { content: "\e240";}
.glyphicon-text-size:before { content: "\e241";}
.glyphicon-text-color:before { content: "\e242";}
.glyphicon-text-background:before { content: "\e243";}
.glyphicon-object-align-top:before { content: "\e244";}
.glyphicon-object-align-bottom:before { content: "\e245";}
.glyphicon-object-align-horizontal:before { content: "\e246";}
.glyphicon-object-align-left:before { content: "\e247";}
.glyphicon-object-align-vertical:before { content: "\e248";}
.glyphicon-object-align-right:before { content: "\e249";}
.glyphicon-triangle-right:before { content: "\e250";}
.glyphicon-triangle-left:before { content: "\e251";}
.glyphicon-triangle-bottom:before { content: "\e252";}
.glyphicon-triangle-top:before { content: "\e253";}
.glyphicon-console:before { content: "\e254";}
.glyphicon-superscript:before { content: "\e255";}
.glyphicon-subscript:before { content: "\e256";}
.glyphicon-menu-left:before { content: "\e257";}
.glyphicon-menu-right:before { content: "\e258";}
.glyphicon-menu-down:before { content: "\e259";}
.glyphicon-menu-up:before { content: "\e260";}
.clearfix:before,.clearfix:after,.container:before,.container:after { display: table;  content: " "; }
.clearfix:after,.container:after  {  clear: both; }

section#ranking{background: #f1f4f7;padding: 1rem 0;}
/*Notice*/
section#ranking .rf__rank_Notice{}
section#ranking .rf__rank_Notice h3{background: #0d417a; font-size: 2.4rem; font-weight: 600; letter-spacing: 1px; line-height: 1; text-align: left; padding: 20px;}
section#ranking .rf__rank_Notice .rf__notice{padding: 30px;}
section#ranking .rf__rank_Notice .rf__notice .notice__detail{height: 200px; overflow: auto; padding: 10px 5px;}
section#ranking .rf__rank_Notice .rf__notice .notice__detail ul > li{list-style: disc; margin: 5px 0 5px 30px; padding: 0; font-size: 1.5rem;}
section#ranking .rf__rank_Notice .rf__notice .notice__detail .jspVerticalBar {width: 10px;}
section#ranking .rf__rank_Notice .rf__notice .notice__detail .jspTrack{background: none;}
section#ranking .rf__rank_Notice .rf__notice .notice__detail .jspDrag{background: #333333;left: -10px;}


@media (max-width: 767px) {
    /*Notice*/
    section#ranking .rf__rank_Notice h3{font-size: 1.0rem; padding: 12px 10px;}
    section#ranking .rf__rank_Notice .rf__notice{padding: 15px;}
    section#ranking .rf__rank_Notice .rf__notice .notice__detail{height: 160px;}
    section#ranking .rf__rank_Notice .rf__notice .notice__detail ul > li{margin: 5px 0 5px 15px; font-size: 1.15rem;}
    section#ranking .rf__rank_Notice .rf__notice .notice__detail .jspVerticalBar {width: 7px;}
    section#ranking .rf__rank_Notice .rf__notice .notice__detail .jspDrag{left: -5px;}
}