@charset "utf-8";
/* reset */
abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;box-sizing:border-box;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{text-decoration:none}ins,mark{background-color:#ff9;color:#000}mark{font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}
/* default */
*{
  box-sizing:border-box;
}
html{
  font-size:1.7vw;
}
@media screen and (min-width: 1000px) {
  html{
    font-size:16px;
  }
}
body {
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Verdana, Meiryo, "M+ 1p", sans-serif;
  color: #222;
  font-size: 100%;
  line-height: 1.5;
  position: relative;
  overflow-x:hidden;
}

.mincho {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "-apple-system", "Helvetica Neue", Roboto, "Droid Sans", Arial, "Yu Gothic", YuGothic, Meiryo, sans-serif;
  font-weight: bold;
}
strong{
  font-weight:700;
  color:inherit;
}
a {
  color: #0d7ccc;
}
a:hover {
  color: #259cf1;
  text-decoration: underline;
}
xmp{
  background-color:#eee;
  border:1px solid #ddd;
  max-width:100%;
  overflow-x:scroll;
  padding:1rem;
  font-size:.875rem;
}

.btn.small{
  padding:.25rem 1.5rem;
  min-width:auto;
}
.btn.large{
  padding:1rem 3rem;
  min-width: 300px;
  font-size:1.25rem;
}

.button{
  display: inline-block;
  position: relative;
  overflow:hidden;
  color: #fff;
  background-color: #3d70bb;
  border: solid 1px #3d70bb;
  box-shadow: 0 4px #174d8b;
  border-radius: 4px;
  padding: 0.8rem 1rem .6rem;
  line-height: 1;
  text-align: center;
  transition:.2s;
  text-decoration:none;
}
button.btn{
  padding: 0.8rem 1rem;
}
.button:hover{
  color:#fff;
  text-decoration:none;
  box-shadow: none!important;
  transform: translateY(4px);
}
.button::after,
.btn_flat::after,
a.arrow::after{
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  margin-top: -10px;
  border-radius: 50%;
  transition: transform .7s;
  background-color: transparent;
  content: '';
}
.button:hover::after,
.btn_flat:hover::after,
a.arrow:hover::after{
  z-index: 0;
  background-color: rgba(255,255,255,0.2);
  -ms-transform: scale(100);
  transform: scale(100);
}
.button i{
  color:#fff;
  margin-right:.2em;
}
.button.pink{
  background-color: #fa3f5b;
  border: solid 1px #fa3f5b;
  box-shadow: 0 4px #cf364d;
}
.button.green{
  background-color: #419438;
  border: solid 1px #419438;
  box-shadow: 0 4px #327c39;
}
.button.orange{
  background-color: #fb9004;
  border: solid 1px #fb9004;
  box-shadow: 0 4px #b77d2d;
}
.button.disabled{
  background-color: #8b8b8b;
  border: solid 1px #8b8b8b;
  box-shadow: 0 4px #6b6b6b;
  pointer-events:none;
}
.btn_flat{
  padding: .7rem 1rem;
  font-size: .88rem;
  line-height: 1.33333;
  border-radius: 3px  ;
  min-width: none;
  display: inline-block;
  font-weight: bold;
  text-align: center;
  touch-action: manipulation;
  border: 1px solid transparent;
  -webkit-box-shadow: inset 0 0 2px #fff;
  box-shadow: inset 0 0 2px #fff;
  text-decoration: none;
  letter-spacing: .05em;
  color: #fff;
  background-color: #3d70bb;
  border: solid 1px #174d8b;
  position: relative;
  overflow:hidden;
}
.button.large_btn,
.btn_flat.large_btn{
  font-size:1.15rem;
  padding: .7rem 2rem;
}
@media screen and (max-width: 640px) {
  .btn_flat{
    min-width: none;
  }
}
.btn_flat.pink{
  background-color: #fa3f5b;
  border: solid 1px #cf364d;
}
.btn_flat.green{
  background-color: #419438;
  border-color: #327c39;
}
.btn_flat.orange{
  background-color: #fb9004;
  border: solid 1px #b77d2d;
}
.btn_flat.white{
  background-color: #ffffff;
  border: solid 1px #afafaf;
  color:inherit;
}
.btn_flat.white:hover{
  color:inherit;
}
.btn_flat.white i{
  color:#fa3f5b;
}
.btn_flat.disabled{
  background-color: #8b8b8b;
  border: solid 1px #8b8b8b;
  pointer-events:none;
}
.btn_flat:hover{
  color:#fff;
  text-decoration:none;
}
.btn_flat i{
  color:#fff;
}
::selection {
  color: #fff;
  background: #038ce2;
}
.btn_cv{
  display: block;
  background-color: #c0392b;
  width: auto;
  padding: 2rem 7rem 2rem 2rem;
  margin: 2rem auto;
  color: #fff;
  cursor: pointer;
  border-radius: 5px;
  transition: .4s;
  font-size:1.2rem;
  font-weight:bold;
  box-shadow: 0 4px #922a1f;
  position:relative;
  overflow:hidden;
}
.btn_cv:hover{
  box-shadow: none!important;
  transform: translateY(4px);
}
.btn_cv::before{
  color: #ffffff;
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "\f0a9";
  font-weight: 700;
  font-size:1.5rem;
  right: 0;
  top:10%;
  width:5rem;
  height:80%;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content:         center;
  border-left: 2px groove #f14533;
}
.btn_cv::after{
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  margin-top: -10px;
  border-radius: 50%;
  transition: transform .7s;
  background-color: transparent;
  content: '';
}
.btn_cv:hover::after{
  z-index: 0;
  background-color: rgba(255,255,255,0.2);
  -ms-transform: scale(100);
  transform: scale(100);
}
.btn_cv.pink{
  background-color: #fa3f5b;
  box-shadow: 0 4px  #cf364d;
}
.btn_cv.pink::before{
  border-color: #ff566f;
}
.btn_cv.blue{
  background-color: #3d70bb;
  box-shadow: 0 4px  #174d8b;
}
.btn_cv.blue::before{
  border-color: #4f8be4;
}
.btn_cv.orange{
  background-color: #fb9004;
  box-shadow: 0 4px  #b77d2d;
}
.btn_cv.orange::before{
  border-color: #f9b65a;
}
.btn_cv.green{
  background-color: #419438;
  box-shadow: 0 4px  #327c39;
}
.btn_cv.green::before{
  border-color: #50b346;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.require {
  color: red;
}
ul li {
  list-style-type: none;
  margin: 0 0 .5em;
}
ul li:focus {
  outline-color: transparent;
}
main ul{
  background: none;
  border-radius: 0;
  box-shadow: none;
  padding-left:.5rem;
}
main ul li {
    list-style-type: none; /*点を非表示*/
    position: relative; /*基準位置*/
    padding-left: 0.6em;
}

.list li{
  padding-left:1.5rem;
  position:relative;
}

.list li::before{
    border-radius: 50%;
    width: 5px;
    height: 5px;
    display: block;
    position: absolute;
    left: 0;
    top: 0.65rem;
    content: "";
    background: #228ad8;
}
ol {
  padding: 1rem 0 1rem 1.5rem;
}
ol li {
  padding: 0 0 1em;
}
ul.inline li {
  display: inline-block;
  margin-right: 2.5em;
}
figcaption {
  margin-top: .5rem;
  font-size: .9rem;
  line-height: 1.5;
}
.lead {
  font-size: 1.8rem;
  line-height: 1.8;
}
i {
  color: #228ad8;
  padding-right:0.2rem;
}
i.white {
  color: #FFF;
}
.text_center{
  text-align:center;
}
.pc_text_center{
  text-align:center;
}
.text_right{
  text-align:right;
}
.pc_text_right{
  text-align:right;
}
@media screen and (max-width: 640px) {
  .pc_text_center{
    text-align:left;
  }
  .pc_text_right{
    text-align:left;
  }
}
.well{
  background-color:#f9f1f3;
  padding:1rem;
  margin:1rem 0;
}
.well.danger{
  background-color:#ffe6e6;
  color:#bf0000;
}
.well *:last-child{
  margin-bottom:0;
}
.well.border{
  background-color:transparent;
  border:1px solid #228ad8;
}

section.highlight{
  padding:4rem 0;
}
.container {
  max-width: 800px;
  width: 100%;
  padding: 0 10px;
  margin:0 auto;
}

h1{
  font-size:2em;
}

.ranking-table_cont {
	overflow: scroll;
}

section {
  width: 100%;
  padding: 4em 0;
  box-sizing: content-box;
}
section:first-child {
  padding-top: 0;
}
.bg {
  background: #CB1E2A;
}
.container {
  display: block;
  padding: 0 1em;
  box-sizing: border-box;
  margin-top: 1em;
}
.text-right {
  text-align: right;
}
.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
  gap: 1em;
}
.flex .left,
.flex .right,
.flex .img,
.flex .text {
  width: calc(50% - 1em/2);
}
.table-defult tbody tr th {
  color: #3B3B3B;
  background: #AEC4E5;
  padding: 1em;
  border:1px solid #ddd;
  vertical-align: middle;
}
.table-defult tbody tr td {
  color: #3B3B3B;
  font-weight: bold;
  padding: 1em;
  border:1px solid #ddd;
}

header h1 {
 /* display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1000px;
  color: #3B3B3B;
  font-weight: 900;*/
  padding: 1em 0 0;
  margin: 0 auto 1em;
}
/*header h1 span {
  font-size: 3em;
  font-weight: bold;
  color: #DCC94E;
  margin-left: 0.25em;
}*/

.mv {
  margin:0 -1em 2em;
}
.mv img {
  margin-bottom: 1em;
}
.mv p {
  font-size: 1.5em;
}

.ranking-table_cont .ranking-table_area {
  margin-bottom: 2em;
}
.ranking-table_cont {

}
/*.ranking-table_cont table {
  min-width: 768px;
}*/
.ranking-table_cont table tbody tr th {
    font-size: 1.5em;
    color: #3B3B3B;
    background: #ffd8d6;
    padding: 1.5%;
    border: 1px solid #b0aeae;
  }

.ranking-table_cont table tbody tr th span {
  font-size: 1.4em;
  color: #D94F4F;
}
.ranking-table_cont table tbody tr td {
    font-size: 1.2em;
    text-align: center;
    color: #3B3B3B;
    font-weight: bold;
    padding: 0.5em 0.25em;
    border: 1px solid #ddd;
}

.ranking-table_cont table tbody tr:nth-child(8) td {
    font-size: 1.2em;
}
.ranking-table_cont table tbody tr:nth-child(8) td span {
  font-size: 1em;
}

.ranking-table_cont table tbody tr:nth-child(4) td span,
.ranking-table_cont table tbody tr:nth-child(5) td span,
.ranking-table_cont table tbody tr:nth-child(7) td span {
  font-size: 1.3em;
  color: #D94F4F;
}
.ranking-table_cont table tbody tr:nth-child(6) td p {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.75;
}
.ranking-table_cont table tbody tr:nth-child(8) td span {
  color: #D94F4F;
}
.ranking-table_cont table tbody tr:nth-child(9) td {
  padding: 1em;
}
.star5 {
  line-height: 1;
  /*display: inline-block;
  background: url("../img/icon_star.svg");
  width: unset;
  height: auto;*/
}
.star {
  display: inline-block;
  background: url("../img/icon_star.svg");
  background-size: contain;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.1em;
}
.ranking-table_cont {
  position: relative;
}
.ranking-table_cont ul {
  gap: unset;
}
.ranking-table_cont ul li {
  width: 33.33%;
  padding: 0;
  margin: 0;
  position: unset;
  display: flex;
  justify-content: center;
}
.ranking-table_cont ul li .btn {
  min-width:  unset;
  max-width: 19%;
  width: 100%;
  background: unset;
  padding: 0;
  box-shadow: 0 0 0;
  margin: 0 auto;
  transition: 0.2s;
  position: absolute;
  bottom: 0.75%;
  left: unset;
}
/*.ranking-table_cont .btn {
  min-width:  unset;
  max-width: 10em;
  width: 100%;
  background: #EB8686;
  box-shadow: 0 3px 0 #DB6F6F;
  border-radius: 0.25em;
  margin: 0;
  transition: 0.2s;
}*/
.ranking-table_cont .btn:hover {
  box-shadow: 0 0 0;
  opacity: 0.7;
}

.ranking-vendor_cont h2 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.4em;
  font-weight: 900;
  line-height: 1.25;
  margin: 0 0 1em 0;
}
.ranking-vendor_cont h2 img {
  /*width: 4em;
  margin: 0 1em 0 0;*/
}
.ranking-vendor_cont h2 > span {
  display: block;
}
.ranking-vendor_cont h2 span span {
  display: block;
  font-size: 1.8em;
  color: #4072B3;
}
.ranking-vendor_area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /*background: #fff;
  padding: 2em;
  border-top: solid 0.5em #4072B3;
  border-radius: 0.5em;
  box-shadow: 0 0 5px #888;*/
  margin-bottom: 3em;
  position: relative;
}
.ranking-vendor_area .flex .img {
  width: calc(43% - 1em/2);
}
.ranking-vendor_area .flex .text {
  width: calc(57% - 1em/2);
}
.ranking-vendor_area h3 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 3.2em;
  font-weight: 900;
  margin-bottom: 0.5em;
}
.ranking-vendor_area h3 img {
  width: 2.4em;
  margin: 0 0.5em 0 0;
}
.ranking-vendor_area img {
  max-width: 100%;
  margin: 0;
}
.ranking-vendor_area .table-defult {
  width: 100%;
  box-sizing: border-box;
}
.ranking-vendor_area .table-defult tbody tr th {
  font-size: 1.5em;
  padding: 0.5em 0.25em;
}
.ranking-vendor_area .table-defult tbody tr td {
  font-size: 1.5em;
  text-align: center;
  padding: 0.4em 0.25em;
}
.ranking-vendor_area .table-defult tbody tr td span {
  font-size: 1.4em;
  color: #D94F4F;
}
.ranking-vendor_area .table-defult tbody tr td .star {
  width: 0.8em;
  height: 0.8em;
}
.ranking-vendor_area .table-defult tbody tr:nth-child(5) td{
  font-size:1.25em;
}
.ranking-vendor_area > .flex {
  margin-bottom: 2em;
}
.ranking-point_list {
  border: solid #4072B3 2px;
  padding: 0;
  border-radius: 1em;
  margin-bottom: 2em;
  overflow: hidden;
}
.ranking-point_list h4 {
  font-size: 2em;
  text-align: center;
    color: #fff;
  background: #4072B3;
  padding: 0.25em;
}
.ranking-point_list ul {
  padding: 2em 1em 1em;

}
.ranking-point_list ul li {
  font-size: 1.8em;
  font-weight: bold;
  margin-bottom:0;
  padding:0 0 1em 1.75em;
  background:url("../img/icon_flag.svg") no-repeat left top / 1.2em auto;
}
.ranking-benefits_list {
  border: solid 1px #DCC94E;
  border-radius: 1em;
  overflow: hidden;
  margin-bottom: 1em;
}
.ranking-benefits_list .flex{
  gap:0;
}
.ranking-benefits_list .flex .left {
  width: 22%;
  font-size: 2.7em;
  font-weight: bold;
  text-align: center;
  color: #fff;
  background: #DCC94E;
  padding: 0.5em;
  margin-bottom: 0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ranking-benefits_list .flex .right {
  display: flex;
  align-items: center;
  font-size: 1.9em;
  font-weight: bold;
  width: 78%;
  text-align: left;
  padding: 1em 0.5em;
}
.ranking-benefits_list .flex .right span {
  color: #D94F4F;
}
.ranking-vendor_cv {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    margin: 2em 0;
}

.ranking-vendor_cv .btn {
  width: 100%;
  max-width: 20em;
  font-size: 2em;
  font-weight: bold;
  text-shadow: 0px 0px 0px;
  background: unset;
  box-shadow: 0 0 0 ;
  border-radius: 0;
  transition: 0.2s;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.ranking-vendor_cv .btn:hover {
  box-shadow: 0 0 0 #DB6F6F;
  /*margin-top: calc(.5rem + 3px);
  margin-bottom: calc(.5rem - 3px);*/
  opacity: 0.7;
}

.ranking-vendor_cv .btn {
    display: inline-block;
    background-color: #5dc128;
    color: #fff;
    font-weight: bold;
    font-size: 2em;
    padding: 25px 30px;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s ease;
  }
  
  .ranking-vendor_cv .btn:hover {
    background-color: #4caf1c; /* hover時にやや濃い緑に */
  }

footer {
  font-weight: bold;
  font-size:1.5em;
  text-align: center;
  padding: 1em 0 200px;
}
@media screen and (max-width: 800px) {
	footer{
		padding: 1em 0 23vw;
	}
}
.sec_point{
  background-color:#FFF0EF;
}
.sec_point .point{
  margin:2rem 0;
}
.sec_about .about{
  margin: 1rem 0;
}
.sec_flow{
  background-color:#FFF7E7;
}
.sec_flow .flow{
  margin:2rem 0;
  position:relative;
}
.sec_flow .flow + .flow{
  margin:4rem 0 2rem;
}
.sec_flow .flow + .flow:before{
  content:'';
  position:absolute;
  left:50%;
  top:-2rem;
  background-color: #f8bf3a;
  width: 60px;
  height: 24px;
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
}
.sec_faq{
  background-color:#FFF0EF;
  font-size:14px;
}
.faq_list{
  margin:4em auto;
  max-width:1000px;
}
.faq_list .answer{
  display:none;
}
.faq_list ul{
  margin:0;
  padding:0;
}
.faq_list li{
  padding:0;
  background-color:#fff;
  margin:0 0 2em;
  position:relative;
  border-radius:8px;
}
.faq_list li::before,
.faq_list li::after {
	position: absolute;
	background-color: #CB1E2A;
	content: '';
}

.faq_list li::before {
	top: 2.9em;
	right: 22px;
	width: 18px;
	height: 2px;
	-webkit-transition: all .3s;
	        transition: all .3s;
}
.faq_list li::after {
	top: 2.4em;
	right: 30px;
	width: 2px;
	height: 18px;
	-webkit-transition: all .3s;
	        transition: all .3s;
}
.faq_list li.open::after {
	-webkit-transform: rotate(-90deg);
	    -ms-transform: rotate(-90deg);
	        transform: rotate(-90deg);
}
.faq_list li h3.question{
  font-weight:700;
  font-size:1.3em;
  padding-left:2.2em;
  position:relative;
  padding:2em 3.5em 2em 4em;
  z-index:10;
  cursor:pointer;
  transition:.2s;
}
.faq_list li.open h3.question{
  border-bottom:1px solid #ddd;
}
.faq_list li h3.question:hover{
  color:#CB1E2A;
}
.faq_list li h3.question::before{
  content:"Q";
  font-size:2em;
  position:absolute;
  font-weight:700;
  top:0.5em;
  left:0.5em;
  color:#CB1E2A;
}
.faq_list li .answer{
  font-size:1.15em;
  padding-left:2.2em;
  position:relative;
  padding:2em 2em 2em 4em;
}
.faq_list li .answer::before{
  content:"A";
  font-size:2em;
  font-weight:700;
  position:absolute;
  top:0.5em;
  left:0.5em;
  color:#fb9004;
}
.faq .more{
  text-align:center;
}
@media screen and (max-width: 1280px) {
  .faq .tit h2{
    font-size:3em;
  }
  .faq_list li::before {
      top: 2.9em;
  }
  .faq_list li::after {
      top: 2.35em;
  }
}
@media screen and (max-width: 960px) {
  .faq .tit h2{
    font-size:2.4em;
  }
  .faq .tit::after{
    border-top: 26px solid #f8f1fa;
    border-right: 26px solid transparent;
    border-bottom: 26px solid transparent;
    border-left: 26px solid transparent;
    bottom:-52px;
    margin-left:-26px;
  }
  .faq_list li::before {
      top: 2.9em;
  }
  .faq_list li::after {
      top: 2.35em;
  }
}
@media screen and (max-width: 640px) {
  .faq .tit h2{
    font-size:6vw;
  }
  .faq_list li::before {
      top: 1.9em;
      right: 10px;
  }
  .faq_list li::after {
      top: 1.3em;
      right:18px;
  }
  .faq_list li h3.question{
    font-weight:700;
    font-size:1.2em;
    padding:1em 3.5em 1em 2.5em;
    z-index:10;
    cursor:pointer;
    transition:.2s;
    color:#1e225e;
  }
  .faq_list li h3.question::before{
    content:"Q";
    font-size:1.5em;
    position:absolute;
    top:0.5em;
    left:0.5em;
  }
  .faq_list li .answer{
    font-size:1.15em;
    padding-left:2.2em;
    position:relative;
    padding:1em 2em 1em 2.5em;
  }
  .faq_list li .answer::before{
    content:"A";
    font-size:1.5em;
    position:absolute;
    top:0.5em;
    left:0.5em;
    color:#fb9004;
  }
}
.fix{
  background-color:rgba(0,0,0,0.5);
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  z-index:9999;
  padding:2rem 0;
}
.fix .container{
  position:relative;
}
.fix .container a .arrow{
	position:absolute;
	left:-1%;
	top:50%;
	transform:translateY(-50%);
	animation: poyon 1.2s infinite;
}
.fix .container a .arrow_anim {
    animation: pururun 1.2s linear 0.2s 1;
}

@keyframes pururun {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  10%  { transform: scale(1.0, 1.0) translate(10%, 0%) skew(-10deg, 0deg); }
  60%  { transform: scale(1.0, 1.0) translate(20%, 0%) skew(-20deg, 0deg); }
  70%  { transform: scale(1.0, 1.0) translate(-15%, 0%) skew(15deg, 0deg); }
  80%  { transform: scale(1.0, 1.0) translate(15%, 0%) skew(-15deg, 0deg); }
  80%  { transform: scale(1.0, 1.0) translate(5%, 0%) skew(-5deg, 0deg); }
  90%  { transform: scale(1.0, 1.0) translate(-5%, 0%) skew(5deg, 0deg); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

@media screen and (max-width: 800px) {
	.fix .container a .arrow{
		width:17%;
	}
}

.ranking-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    font-family: sans-serif;
  }
  .ranking-table th, .ranking-table td {
    border: 1px solid #ccc;
    padding: 10px;
  }
  .ranking-header {
    background-color: #fcdde1;
    font-size: 18px;
    font-weight: bold;
  }

  .highlight-red { color: red; font-weight: bold; }
  .stars { color: gold; }
  .hours { color: red; font-weight: bold; }

  .rank-box {
    max-width: 900px;
    margin: 30px auto;
    font-family: sans-serif;
    border: 1px solid #ccc;
    padding: 20px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
    background: white;
    border-radius: 15px;
  }

  .rank-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .rank-header img {
    width: 190px;
    height: 170px;
  }

  .rank-content {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .rank-left {
    flex: 1;
    min-width: 250px;
  }

  .rank-left img {
    max-width: 100%;
    height: auto;
  }

  .rank-right {
    flex: 1;
    min-width: 250px;
  }

  .info-table {
    width: 100%;
    border-collapse: collapse;
  }

  .info-table td {
    padding: 8px 10px;
    border: 1px solid #ccc;
    text-align: center;
    vertical-align: middle;
    font-size: 1em;
    font-weight: bold;
  }

  .info-table td:first-child {
    background-color: #ffd8d6;
    font-weight: bold;
    width: 40%;
  }

  .highlight {
    color: #cb1f2b;
    font-weight: bold;
    font-size: 1.8em;
  }
  .right .highlight {
    color: #cb1f2b;
    font-weight: bold;
    font-size: 1.4em;
  }
  .stars {
    color: gold;
    font-size: 30px !important;
  }

  .section-title {
    background-color: #cb1f2b;
    color: #fff;
    padding: 10px;
    font-weight: bold;
    margin-top: 25px;
    text-align: center;
    font-size: 18px;
    border-radius: 10px 10px 0 0;
  }

  .points {
    border: 2px solid #cb1f2b;
    padding: 10px 15px;
    line-height: 1.7;
    border-radius: 0 0 10px 10px;
  }

  .points li::before {
    content: "🚩";
    margin-right: 5px;
  }

  .special {
    margin-top: 20px;
    border: 2px solid #cb1f2b;
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 16px;
    border-radius: 10px;
  }

  .special .left {
    background-color: #cb1f2b;
    color: #fff;
    padding: 30px 20px;
    flex-shrink: 0;
    border-radius: 5px 0 0 5px;
    font-size: 2em;
  }

  .special .right {
    padding: 10px 20px;
    font-size: 1.4em;
  }

  .special .highlight {
    color: #cb1f2b;
    font-weight: bold;
  }