/*=============================================
 * CUSTOM
 *=============================================*/
/* -- -- */
.cl-red {
   color: #ff0000;
}

.cl-pink {
   color: #ef8fa3;
}

.cl-green {
   color: #00a8b8;
}

/* -- -- */
.h2 {
   color: #2E3C4F;
   font-weight: 700;
   font-size: 30px;
   letter-spacing: 0.1em;
   line-height: 30px;
   text-align: center;
}

.h2 small {
   display: block;
   font-family: 'Cabin', sans-serif;
   font-size: 10px;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: #438295;
}

/* -- -- */
@media screen and (max-width: 767px) {
   .button a {
      width: 80%;
      max-width: 100%;
   }
}

/* -- -- */
.txt-c {
   text-align: center;
}

.fw-b {
   font-weight: 700;
}

/* -- -- */
/*=============================================
* HOME
*=============================================*/
/* -- -- */
#mv {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 670px;
   background-color: #dfdddc;
   position: relative;
}

#mv .bg {
   background: url("../img/index/kv-bg.jpg") no-repeat center/auto 100%;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
}

#mv .box {
   text-align: center;
   color: #231815;
   position: relative;
   z-index: 1;
}

#mv .sub {
   display: inline-block;
   width: 470px;
}

#mv h2 {
   width: 680px;
   margin: 0 auto;
   padding-top: 20px;
}

#mv .txt {
   padding-top: 20px;
}

@media screen and (max-width: 767px) {
   #mv {
      height: 82vw;
   }

   #mv .bg {
      background-image: url("../img/index/sp_kv-bg.jpg");
      background-size: cover;
   }

   #mv .box {
      width: 80%;
      padding-top: 2vw;
   }

   #mv .sub {
      width: 60%;
   }

   #mv h2 {
      width: 100%;
      padding-top: 4vw;
   }

   #mv .txt {
      font-size: 2.2vw;
      line-height: 1.5;
      padding-top: 4vw;
   }
}

/* -- -- */
#section__rank {
   background-color: #d4af6d;
   margin-top: 160px;
   padding: 0 0 90px;
   position: relative;
}

#section__rank .tab-link {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 10px;
   background-color: #fff;
}

#section__rank .tab-link li {
   width: 380px;
   color: #fff;
   text-align: center;
   font-weight: bold;
   font-size: 29px;
   line-height: 50px;
   letter-spacing: 0.2em;
   border-radius: 20px 20px 0 0;
   padding: 5px 0;
   transition: all 0.3s;
}

#section__rank .tab-link li:nth-child(1) {
   background-color: #bb9b61;
}

#section__rank .tab-link li:nth-child(2) {
   background-color: #a38754;
}

#section__rank .tab-link li:nth-child(3) {
   background-color: #8a7246;
}

#section__rank .tab-link li:hover,
#section__rank .tab-link li.active {
   transform: translateY(10px);
}

#section__rank .tab-content {
   background-color: #d4af6d;
   padding-top: 60px;
   position: relative;
   z-index: 1;
}

#section__rank .tab-content .wrap {
   background-color: #fff;
   border-radius: 10px;
   padding: 50px 50px;
}

#section__rank .tab-content #rank-change .wrap {
   padding: 50px 35px;
}

#section__rank .tab-content h2 {
   width: 100%;
   max-width: 792px;
   background-color: #d4af6d;
   border-radius: 10px;
   text-align: center;
   font-family: "MOBO", sans-serif;
   font-weight: bold;
   font-size: 36px;
   line-height: 60px;
   letter-spacing: 0.2em;
   margin: 0 auto;
}

#section__rank .tab-content .desc {
   font-size: 24px;
   line-height: 42px;
   letter-spacing: 0.1em;
   text-align: center;
   padding-top: 30px;
}

#section__rank .note {
   padding: 50px 20px 0;
}

#section__rank .note p {
   text-indent: -18px;
   padding-left: 18px;
}

#section__rank .banner {
   display: flex;
   flex-wrap: wrap;
   gap: 56px;
   padding-top: 60px;
}

#section__rank .banner .item {
   width: 552px;
   border-radius: 10px;
   background-color: #fff;
   text-align: center;
   box-sizing: border-box;
   padding: 16px 0 22px;
   position: relative;
   transition: all 0.3s;
}

#section__rank .banner .item>a {
   display: block;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
}

#section__rank .banner .item:hover {
   transform: scale(1.02);
}

#section__rank .banner h3 {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   height: 85px;
   font-weight: bold;
   font-size: 24px;
   line-height: 42px;
   letter-spacing: 0.05em;
}

#section__rank .banner h3 small {
   font-size: 21px;
}

#section__rank .banner .img {
   padding: 15px 0 20px;
}

#section__rank .banner .img img {
   width: auto;
   height: 87px;
}

#section__rank .banner .bnr-link {
   background: url("../img/index/banner-arrow.png") no-repeat center bottom/auto 8px;
   color: #4c4948;
   font-weight: 500;
   font-size: 14px;
   line-height: 25px;
   letter-spacing: 0.2em;
   text-align: center;
   padding-bottom: 5px;
}

#rank-system .txt-last {
   width: 100%;
   max-width: 905px;
   background-color: #d4af6d;
   border-radius: 100px;
   text-align: center;
   font-size: 21px;
   line-height: 36px;
   letter-spacing: 0.1em;
   margin: 25px auto 0;
   padding: 29px 0;
}

#rank-system .rank-conditions {
   text-align: center;
   padding-top: 40px;
}

#rank-system .rank-conditions dt {
   font-size: 26px;
}

#rank-system .rank-conditions dd {
   font-size: 20px;
   line-height: 30px;
   padding-top: 15px;
}

#rank-system .rank-conditions dd span {
   display: inline-block;
   width: 128px;
   background-color: #c1e4e5;
   padding: 5px 0;
}

#rank-system .rank-conditions dd img {
   width: 26px;
   margin: 0 10px;
}

#rank-system .photo {
   width: 779px;
   margin-left: auto;
   margin-bottom: -70px;
   padding-right: 50px;
   position: relative;
   z-index: 1;
}

#rank-system .table {
   overflow: auto;
}

#rank-system table {
   width: 100%;
   table-layout: fixed;
}

#rank-system table th,
#rank-system table td {
   border: 5px solid #fff;
   vertical-align: middle;
   text-align: center;
}

#rank-system table th {
   background-color: #9bd2d3;
   font-size: 18px;
   line-height: 32px;
   letter-spacing: 0.075em;
}

#rank-system table td {
   background-color: rgba(58, 179, 170, 0.5);
   font-size: 16px;
   line-height: 20px;
   letter-spacing: 0.05em;
}

#rank-system table thead th,
#rank-system table thead td {
   background-color: transparent;
   vertical-align: bottom;
   color: #fff;
   font-size: 18px;
   line-height: 32px;
   letter-spacing: 0.075em;
}

#rank-system table thead th span,
#rank-system table thead td span {
   display: block;
}

#rank-system table thead td:nth-child(2) span {
   background-color: #359f97;
   padding: 10px 0;
}

#rank-system table thead td:nth-child(3) span {
   background-color: #8f8989;
   padding: 22px 0;
}

#rank-system table thead td:nth-child(4) span {
   background-color: #8c7519;
   padding: 33px 0;
}

#rank-system table thead td:nth-child(5) span {
   background-color: #48677b;
   padding: 43px 0;
}

#rank-system table thead td:nth-child(6) span {
   background-color: #44403f;
   padding: 54px 0;
}

#rank-system table tbody tr:nth-child(1) td:nth-child(2),
#rank-system table tbody tr:nth-child(2) td:nth-child(2) {
   font-size: 18px;
   line-height: 32px;
   letter-spacing: 0.075em;
}

#rank-system table tbody tr:nth-child(1) td:nth-child(3),
#rank-system table tbody tr:nth-child(2) td:nth-child(3) {
   background-color: rgba(189, 181, 180, 0.9);
}

#rank-system table tbody tr:nth-child(1) td:nth-child(4),
#rank-system table tbody tr:nth-child(2) td:nth-child(4) {
   background-color: rgba(173, 144, 133, 0.5);
}

#rank-system table tbody tr:nth-child(1) td:nth-child(5),
#rank-system table tbody tr:nth-child(2) td:nth-child(5) {
   background-color: rgba(85, 121, 144, 0.5);
}

#rank-system table tbody tr:nth-child(1) td:nth-child(6),
#rank-system table tbody tr:nth-child(2) td:nth-child(6) {
   background-color: rgba(68, 64, 63, 0.5);
}

#rank-system table tbody tr:nth-child(1) td {
   padding: 10px 0;
}

#rank-system table tbody tr:nth-child(2) td {
   padding: 20px 0 10px;
}

#rank-system table tbody tr:nth-child(2) td p:nth-child(1) {
   color: #534741;
   font-weight: bold;
   font-size: 18px;
   line-height: 32px;
   letter-spacing: 0.05em;
}

#rank-system table tbody tr:nth-child(2) td p:nth-child(1) span {
   font-size: 32px;
   padding-right: 5px;
}

#rank-system table tbody tr:nth-child(2) td p:nth-child(2) {
   font-size: 18px;
   line-height: 32px;
   letter-spacing: 0.075em;
}

#rank-system table tbody tr:nth-child(3) td {
   text-align: left;
   font-size: 18px;
   line-height: 32px;
   letter-spacing: 0.075em;
   padding: 20px;
}

#rank-system table tbody tr:nth-child(3) dl {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   padding-top: 5px;
}

#rank-system table tbody tr:nth-child(3) dl dt {
   width: 148px;
   background-color: #3ab3aa;
   color: #fff;
   text-align: center;
   border-radius: 50px;
   padding: 2px 0;
}

#rank-system table tbody tr:nth-child(3) dl dd {
   width: calc(100% - 148px);
   box-sizing: border-box;
   font-size: 16px;
   padding-left: 20px;
}

#rank-system table tbody tr:nth-child(4) td {
   padding: 2px 0;
}

#rank-system table tbody tr:nth-child(4) td strong {
   font-size: 18px;
   letter-spacing: 0.1em;
   line-height: 32px;
}

#rank-change .box {
   padding-top: 40px;
}

#rank-change .box h3 {
   background-color: #c1e4e5;
   color: #2fa3c8;
   text-align: center;
   font-family: "MOBO", sans-serif;
   font-weight: bold;
   font-size: 36px;
   line-height: 62px;
   letter-spacing: 0.1em;
}

#rank-change .box h3 img {
   width: 36px;
   margin-left: 10px;
}

#rank-change .box h3 img+img {
   margin-left: 0;
}

#rank-change .rank-conditions {
   text-align: center;
   font-size: 24px;
   line-height: 42px;
   letter-spacing: 0.1em;
   padding-top: 40px;
}

#rank-change .rank-conditions span {
   display: inline-block;
   width: 128px;
   background-color: #c1e4e5;
   padding: 5px 0;
   margin: 0 5px;
}

#rank-change .rank-conditions .icon1 {
   width: 26px;
   margin: 0 5px;
}

#rank-change .rank-conditions .icon2 {
   width: 32px;
   margin: 0 5px;
}

#rank-change .photo {
   margin-top: 30px;
}

#rank-change .photo .photo_inner {
   display: block;
   position: relative;
}

#rank-change .photo .deco1 {
   width: 7%;
   position: absolute;
   top: 36%;
   right: 3.5%;
}

#rank-change .photo .deco2 {
   width: 7%;
   position: absolute;
   top: 17%;
   right: 11.2%;
}

#rank-change .photo .deco3 {
   width: 7%;
   position: absolute;
   top: 17%;
   left: 24.2%;
}

#rank-change .txt {
   text-align: center;
   font-size: 24px;
   line-height: 42px;
   letter-spacing: 0.1em;
   padding-top: 40px;
}

#rank-change .example {
   padding: 20px 0 0 140px;
}

#rank-confirmation .box {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 120px;
   text-align: center;
   padding-top: 70px;
}

#rank-confirmation .box dt {
   display: inline-block;
   background-color: #d4af6d;
   border-radius: 50px;
   font-size: 24px;
   line-height: 42px;
   letter-spacing: 0.1em;
   padding: 2px 20px;
}

#rank-confirmation .box dd {
   padding-top: 35px;
}

#rank-confirmation .phone dd {
   width: 190px;
   margin: 0 auto;
}

#rank-confirmation .web {
   width: 576px;
}

@media screen and (max-width: 1240px) {
   #section__rank .tab-link {
      gap: 2%;
   }

   #section__rank .tab-link li {
      width: 32%;
   }

   #section__rank .tab-content .wrap {
      padding: 50px 20px;
   }

   #section__rank .tab-content #rank-change .wrap {
      padding: 50px 20px;
   }

   #section__rank .tab-content .desc {
      font-size: 20px;
   }

   #section__rank .banner {
      gap: 4%;
   }

   #section__rank .banner .item {
      width: 48%;
   }

   #section__rank .banner h3 {
      font-size: 20px;
   }

   #section__rank .banner h3 small {
      font-size: 18px;
   }

   #rank-system .photo {
      width: 920px;
      box-sizing: border-box;
      padding: 0 50px 0 200px;
   }

   #rank-system .table {
      padding: 20px 0 2px;
   }

   #rank-system table {
      width: 920px;
   }

   #rank-system table td {
      font-size: 12px;
   }

   #rank-system table tbody tr:nth-child(2) td p:nth-child(2) {
      font-size: 14px;
   }

   #rank-system table tbody tr:nth-child(3) dl dd {
      font-size: 12px;
   }

   #rank-change .example {
      padding-left: 120px;
   }

   #rank-change .rank-conditions {
      font-size: 20px;
   }

   #rank-change .txt {
      font-size: 20px;
   }

   #rank-confirmation .box {
      gap: 60px;
   }
}

@media screen and (max-width: 991px) {
   #section__rank .banner {
      justify-content: center;
      gap: 20px;
   }

   #section__rank .banner .item {
      width: 552px;
   }

   #rank-change .example {
      padding-left: 90px;
   }
}

@media screen and (max-width: 767px) {
   #section__rank {
      margin-top: 50px;
      padding-bottom: 50px;
   }

   #section__rank .tab-link li {
      font-size: 18px;
      line-height: 25px;
      border-radius: 10px 10px 0 0;
   }

   #section__rank .tab-link li.active {
      padding-bottom: 10px;
   }

   #section__rank .tab-content {
      padding: 20px 10px 0;
   }

   #section__rank .tab-content .wrap {
      padding: 30px 10px;
   }

   #section__rank .tab-content #rank-change .wrap {
      padding: 30px 10px;
   }

   #section__rank .tab-content h2 {
      font-size: 24px;
      line-height: 36px;
      padding: 7px 0;
   }

   #section__rank .tab-content .desc {
      font-size: 14px;
      line-height: 30px;
      padding-top: 20px;
   }

   #section__rank .note {
      padding: 20px 0 0;
   }

   #section__rank .note p {
      text-indent: -14px;
      padding-left: 14px;
   }

   #section__rank .banner {
      padding-top: 40px;
   }

   #section__rank .banner .item {
      width: 100%;
   }

   #section__rank .banner h3 {
      height: auto;
      font-size: 16px;
      line-height: 30px;
   }

   #section__rank .banner h3 small {
      display: block;
      font-size: 14px;
   }

   #section__rank .banner .img img {
      height: 60px;
   }

   #section__rank .banner .bnr-link {
      background-size: auto 5px;
   }

   #rank-system .rank-conditions {
      padding-top: 20px;
   }

   #rank-system .rank-conditions dt {
      font-size: 18px;
   }

   #rank-system .rank-conditions dd {
      font-size: 16px;
   }

   #rank-system .rank-conditions dd span {
      width: 100px;
      padding: 0;
   }

   #rank-system .photo {
      width: 725px;
      margin-bottom: -60px;
      padding-left: 155px;
   }

   #rank-system .table {
      margin: 0 -10px;
   }

   #rank-system table {
      width: 705px;
   }

   #rank-system table th {
      font-size: 15px;
      line-height: 24px;
      letter-spacing: 0;
   }

   #rank-system table td {
      font-size: 12px;
   }

   #rank-system table thead th,
   #rank-system table thead td {
      font-size: 15px;
   }

   #rank-system table tbody tr:nth-child(1) td:nth-child(2),
   #rank-system table tbody tr:nth-child(2) td:nth-child(2) {
      font-size: 16px;
   }

   #rank-system table tbody tr:nth-child(1) td br {
      display: none;
   }

   #rank-system table tbody tr:nth-child(2) td p:nth-child(1) {
      font-size: 16px;
   }

   #rank-system table tbody tr:nth-child(2) td p:nth-child(1) span {
      font-size: 24px;
   }

   #rank-system table tbody tr:nth-child(2) td p:nth-child(2) {
      font-size: 12px;
      letter-spacing: 0;
   }

   #rank-system table tbody tr:nth-child(3) td {
      font-size: 14px;
   }

   #rank-system table tbody tr:nth-child(3) dl dd {
      padding-left: 10px;
   }

   #rank-system .txt-last {
      font-size: 14px;
      line-height: 24px;
      padding: 10px 0;
   }

   #rank-change .box {
      padding-top: 30px;
   }

   #rank-change .box h3 {
      font-size: 24px;
   }

   #rank-change .box h3 img {
      width: 24px;
      margin-left: 5px;
   }

   #rank-change .box h3 img+img {
      margin-left: 0;
   }

   #rank-change .rank-conditions {
      font-size: 14px;
      line-height: 30px;
      padding-top: 20px;
   }

   #rank-change .rank-conditions span {
      width: 100px;
      padding: 0;
   }

   #rank-change .photo {
      overflow: auto;
      margin-top: 20px;
      padding-bottom: 10px;
   }

   #rank-change .photo .photo_inner {
      width: 200%;
   }

   #rank-change .photo .deco1 {
      top: 36%;
   }

   #rank-change .photo .deco2 {
      top: 17%;
   }

   #rank-change .photo .deco3 {
      top: 17%;
   }

   #rank-change .txt {
      font-size: 14px;
      line-height: 24px;
      padding-top: 20px;
   }

   #rank-change .example {
      padding-left: 12vw;
   }

   #rank-confirmation .box {
      gap: 40px;
      padding-top: 40px;
   }

   #rank-confirmation .box dt {
      font-size: 18px;
      line-height: 36px;
   }

   #rank-confirmation .box dd {
      padding-top: 20px;
   }

   #rank-confirmation .box .phone dd {
      width: 50%;
      text-align: center;
   }

   #rank-confirmation .box .web {
      width: 100%;
   }
}

/* -- -- */