@charset "utf-8";


body {
 /*↓これを100%に！*/
width: 100%;
 margin:0  auto;
 text-align: center;  

}


#wrapper,
#wrapper img{    
 width: 100%;
}

.ranking_midashi {
    margin: 0 auto;   
    padding: 1% 2%;
    border:#237168 solid 5px;
    /*width:100%;*/
}

.ranking_midashi p {
    font-size:32px;
    font-weight: bold;

}

.marker-yellow {
    background: linear-gradient(transparent 60%, #fef49b 60%);
}

.ranking-title {
    background:#2b857c;
     
     display: flex;
     margin:3% auto 0;
     position: relative;

}

.ranking-title h2{
    color:#fff;
    line-height: 1;
    text-align: center;
    width: 70%;
    font-size: 18px;
    margin: 0;
    padding: 2% 0 !important;
    background:#2b857c;

 
}

.ranking-title span{
    font-size: 12px;
    width: 30%;
    position: absolute;
    top:20%;
    right:2%;
     background:#dff5f3;
     border-radius: 30px;
}


.ranking-box {
    border: 3px solid #29847a;
    margin: 5% 0 0 0;
    padding: 0;
}

.ranking-box dl{
   
    background: #29847a;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
}


.ranking-box dt{
width:23%;
   padding: 1% 0 0 5%;
   background: #29847a;
   margin: 0 auto;
   vertical-align: middle;
   }


.ranking-box dd{
   width:76%;
    background: #29847a;
    color:#fff;
     margin: 0;
}

.ranking-box dd h2 span{
    font-size:14px;
font-weight: bold;
}

.ranking-box dd h2{
    font-size:23px;
}

.ranking-01 h3{
    text-align: left;
    margin-left:2% !important;
    padding-left:2%;
}

.tokutyo {
border-left: 8px solid #29847a;
color:#29847a;
font-size:30px;
}




/*特徴表*/

.ranking-box table {
    width: 100%;
    line-height: 1;
    
    margin: 10px 0 20px;
    border-top: 1px solid #dedede;
    font-size:16px;
    line-height: 1.5;
    }

.ranking-box th {
    background: #f2f4f7;
    font-weight: 700;
    text-align: left;
    width: 44%;
    padding: 12px 10px;
    border-bottom: 1px solid #dedede;
}


.ranking-box td {
    text-align: left;
    padding: 12px 10px;
    border-bottom: 1px solid #dedede;
    }



.company-cach {
    font-size: 28px;
    background: #bbd6d3;
    padding:1%;
    width: 94%;

}

 .aligncenter {
    text-align: center;
    margin: 0 auto;
 }


 .ranking-spec .ranking-score {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    text-align: center;
    border: 5px solid #fcad69;
    border-radius: 4px;
    width: 94%;
    margin: 3% auto;
}

.ranking-score>div:nth-of-type(1) {
    background: #fcad69;
    width: 46%;
    font-weight: 700;
    font-size:40px;
    }


 .ranking-score>div:nth-of-type(2) {
    background: #fff;
    width: 54%;
    color: #b22222;
    font-weight: 700;
    font-size: 36px;
    line-height: 1.7;
}

.chart {
    margin: 5% auto 2%;
    width: 90%;
}

.ranking-score-star dl {
  background: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0 auto;
    width: 93%;
    border-bottom: 1px solid #dedede;
    line-height: 1.6;

}

.ranking-score-star dl:nth-of-type(1) {
    border-top: 1px solid #dedede;
    }

.ranking-score-star dd,
.ranking-score-star dt{
  background: #fff;
  color:#333; 
   text-align: left;
   font-size: 16px;
}

.ranking-score-star dt{
 padding: 4% 2%;
  width: 30%;
 
  font-weight: bold;
 
}

.ranking-score-star dd{
 width: 70%;
 padding: 1% 0 1% 3%;

}

.campaign {
    width:90%;
    margin:5% auto;
}

.campaign p {
    width:90%;
    margin:0 auto;
    font-size:18px;
    font-weight: bold;
}

.campaign p span{
    color:#b22222;
    font-weight: bold;
}





/*ランキングテーブルCSS*/

div.fixed-box-tate {
  width:99.6%;
  height:100%;
  background: #fff;
  border:1px solid #dcdcdc;
  overflow:auto;
  white-space:nowrap;
}
table.tate {
  width: 1000px;
  border-collapse: collapse;
  border: 1px solid #ccc;
}
table.tate th,
table.tate td {
  /*width: 200px;
  height: 70px;*/
  vertical-align: middle;
  padding: 0 2px;
  border: 1px solid #ccc;
}



table.tate td.detail,
table.tate td.off{
   
    vertical-align: middle;
    padding: 2px;
}


table.tate img.detail{
width: 12vw !important;
vertical-align: middle;
}

table.tate img.off{
width: 29vw !important;
vertical-align: middle;
}


table.tate td.rank {
    vertical-align: middle;
    padding: 2px;
}

table.tate img.rank 
{
    width: 10vw !important;
    vertical-align: middle;
}

table.tate th {
    font-size:16px;
}

table.tate td.txt 
{
    font-size:18px;
    vertical-align: middle;
}

table.tate img.logo
{
    width: 24vw !important;
/*    width: 0vw !important;*/
    vertical-align: middle;
}

table.tate td.score span
{
 font-size:22px;
 font-weight: bold;
 color:#de581d;
}

table.tate th {
    background-color: #efefef !important;
    border: 1px solid #ccc;
}
table.tate .fixed01 {
    background-color: #fff;
  position: sticky;
  left: 0;
 font-weight: bold;
  text-align: center;
padding:0.5%;
  
}
table.tate .fixed01:before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
}

table.tate td.nijyumaru{
      vertical-align: middle;
      font-size:40px;
      color:#b22222;
      font-weight: bold;

}
table.tate td.maru{
      vertical-align: middle;
      font-size:40px;
      color:#bc5a03;
      font-weight: bold;

}
table.tate td.sankaku{
      vertical-align: middle;
      font-size:40px;
      color:#0370bc;
      font-weight: bold;

}

/*ランキングテーブルCSS ここまで*/




/*ツールチップ*/
.tooltip td span.tooltip_txt {
display: none;
}
.tooltip td:hover span.tooltip_txt {
display: block;
position: absolute;
padding: 10px;
    font-size: 12px;

    line-height: 1.6em;
    color: #fff;
    border-radius: 5px;
    background: #000;
    width: 200%;
}
/*ツールチップ*/

.button1 {
    width: 90% !important;
    margin: 0 auto 2%;
}



h4.osusume{
    margin: 5% auto;
    font-size:30px;
    color:#fff;
    width: 95%;
   
}

.osusume-box {
    border: 3px #bbd6d3 solid;
    width: 95%;
    margin: 0 auto;
}

.osusume-box h5 {
 margin: 3% 0 0 2%;
}

.osusume-box h5.pt1 {
  background-image: url(https://free-nico.xyz/wp-content/uploads/2021/12/pt0101.png);
     background-repeat: no-repeat; 
 }
 .osusume-box h5.pt2 {
  background-image: url(https://free-nico.xyz/wp-content/uploads/2021/12/pt0201.png);
     background-repeat: no-repeat; 
     line-height: 1.5 !important;
 }
 .osusume-box h5.pt3 {
  background-image: url(https://free-nico.xyz/wp-content/uploads/2021/12/pt0301-1.png);
     background-repeat: no-repeat; 
    line-height: 1.55 !important;
 }


 .osusume-box h5.cap {
    padding-left:17.5%;
    padding-right:1%;
    font-size: 20px;
    line-height: 1.55;

 }

 .osusume-box p {
    width:95%;
    font-size: 16px;
    margin: 1% auto 2%;
    border-bottom:#333 solid 1px;
    padding-bottom:1%;
 }

  .osusume-box p:last-child {
    width:95%;
    font-size: 16px;
    margin: 2% auto;
    border-bottom:none;
 }


.uservoice {
    border: none;
    margin: 5% auto 0;
    padding: 0;
    width: 95%;


}

.uservoice dl{
   
    background: #f3f4f7 !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
}


.uservoice dt{
   
   margin: 2% 0;
   background: none !important;
   text-align: center;
   vertical-align: center;
   }


.uservoice dd{
   width:72%;
    background: none !important;
    color:#333;
     margin: 0;
}

.uservoice dd h2 span{
    font-size:26px;
}

.uservoice dd h2{
    font-size:40px;
}

.uservoice table {
    width: 100%;
    line-height: 1;
    margin: 10px 0 20px;
    border-top: none !important;
    font-size: 22px;
    line-height: 1.5;
}


.uservoice td {
    text-align: left;
    padding: 12px 10px;
    border-bottom: none;
    font-weight: bold;
    font-size: 16px;

}

.uservoice p {
        background: #f3f4f7;
        margin:0;
        text-align:left;
         padding:0 3% 2%;
         font-size: 16px;
         margin:0;

}

.sp {
    display: block;
    }




@media screen and (min-width:0px) and ( max-width:480px) {
#wrapper{
 max-width: 100%;
    margin:0  auto;
    text-align: center;
    
}

div.ribbon:before {
    border-color: #237168 #237168 #237168 transparent;
    border-width: 19px;
    left: -25px;
    top: 28px;
}

div.ribbon:after {
    border-color: #237168 transparent #237168 #237168;
    border-width: 19px;
    right: -25px;
    top: 28px;
}

div.diamond, div.ribbon, div.right-arrow, div.left-arrow {
    display: inline-block;
    color: #FFFFFF;
    font-size: 33px;
    line-height: 57px;
    margin: 25px 0 0;
    position: relative;
    width: 85%;
    text-align: center;
}
}

@media screen and (max-width:480px) { 
.movie30s video {
    position: absolute;
    top: 61%;
    left: 50%;
    width: 70%;
     transform: translate(-50%,-50%);
}
}

.article_editcontents h2 {
    border-left: none;
}

.article_editcontents h2 {
    background: none;
    border-left: none;
margin: 0;
padding:0 25px 10px 15px;
}

.article_editcontents h3 {
    border-bottom:none;
margin:0 auto;
}

a, a:visited, a:hover, a:focus, a:active{
text-decoration:underline;
}

@media screen and (min-width:481px){
.osusume-box h5.cap {
    padding-left: 17.5%;
    padding-right: 1%;
    font-size: 20px;
    line-height: 3;
}

.osusume-box h5.pt2 {
    background-image: url(https://free-nico.xyz/wp-content/uploads/2021/12/pt0201.png);
    background-repeat: no-repeat;
    line-height: 3 !important;
}
.ranking-title span {
    font-size: 14px;
    width: 30%;
    position: absolute;
    top: 29%;
    right: 2%;
    background: #dff5f3;
    border-radius: 30px;}

.ranking-box dt {
    width: 18%;
    padding: 1% 0 0 1%;
    margin: 0 auto;
    vertical-align: middle;
}
.ranking-box dd h2 span {
    font-size: 25px;
    font-weight: bold;
}
.ranking-box dd h2 {
    font-size: 40px;
}
.campaign p {
    font-size: 30px;
}

.ranking-title h2 {
font-size: 32px;
}

table.tate td.score span {
    font-size: 36px;
}
table.tate img.rank  {
    padding: 5%;
}


}

/*リボンCSS*/
/* ここでまとめて横長の長方形を作ります */
div.diamond, div.ribbon, div.right-arrow, div.left-arrow {
 display: inline-block;
 color: #FFFFFF;
     font-size: 33px;
    line-height: 57px;
 margin: 25px 0 0;
 position: relative;
 width: 85%;
 text-align: center;
}

/* それぞれの長方形のbefore（前）とafter（後ろ）に大きさゼロの要素を作ります */
div.diamond:before, div.diamond:after,
div.ribbon:before, div.ribbon:after,
div.right-arrow:before, div.right-arrow:after,
div.left-arrow:before, div.left-arrow:after {
 content: "";
 border-style: solid;
 border-width: 0;
 position: absolute;
 width: 0;
 height: 0;
}

/* ひし形 */
div.diamond {
 background-color: #2f978c;
}
div.diamond:after, div.diamond:before {
 border-color: transparent #2f978c;
}
div.diamond:before {
 left: -19px;
 border-width: 19px 19px 19px 0;
}
div.diamond:after {
 right: -19px;
 border-width: 19px 0 19px 19px;
}

/* リボン */
div.ribbon {
 background-color: #2f978c;
}
div.ribbon:before, div.ribbon:after {
 top: 6px;
 z-index: -15;
}
div.ribbon:before {
 border-color: #237168 #237168 #237168 transparent;
 border-width: 19px;
 left: -25px;
 top: 28px;
}
div.ribbon:after {
 border-color: #237168 transparent #237168 #237168;
 border-width: 19px;
 top: 28px;
 right: -25px;
}

/* 右側矢印 */
div.right-arrow {
 background-color: #2f978c;
}
div.right-arrow:after, div.right-arrow:before {
 border-width: 19px 0 19px 19px;
}
div.right-arrow:before {
 border-color: #2f978c transparent;
 left: -19px;
}
div.right-arrow:after {
 border-color: transparent #2f978c;
 right: -19px;
}

/* 左側矢印 */
div.left-arrow {
 background-color: #2f978c;
}
div.left-arrow:after, div.left-arrow:before {
 border-width: 19px 19px 19px 0;
}
div.left-arrow:before {
 border-color: transparent #2f978c;
 left: -19px;
}
div.left-arrow:after {
 border-color: #2f978c transparent;
 right: -19px;
}


/* footer */
footer {
  background-color: #2f978c;
  margin:7% 0 0 0;
}


footer ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

footer ul li {
  border-top: 1px solid #fff;
  padding:2%;
}


footer ul li:first-child {
   border-top: none;
}


footer a{
color: #000 !important; 
text-decoration:underline;
}

footer a {
    color: black !important;
}

a.foot-a {
    color: black !important;
}

a.foot-b {
    color: black !important;
}