:root {
  --index_font_16: max(16px, 1.17vw);
  --index_font_19: max(19px, 1.39vw);
  --index_font_19_2: max(19px, 1.39vw);
  --index_font_18: max(18px, 1.32vw);
  --index_font_21: max(21px, 1.54vw);
  --index_font_28: max(28px, 2.05vw);
  --index_font_47: max(47px, 3.44vw);
  --index_padding_60: max(60px, 4.39vw);
  --index_margin_60: max(60px, 4.39vw);
  --index_margin_80: max(80px, 5.86vw);
  --index_margin_90: max(90px, 6.59vw);
  --index_size_40: max(40px, 2.93vw);
  --index_gap_30: max(30px, 2.20vw);
  --index_gap_50: max(50px, 3.66vw);

}

@media screen and (max-width: 770px) {
  :root {
    --index_font_16: max(14px, 3.73vw);
    --index_font_19: max(13px, 3.47vw);
    --index_font_19_2: max(15px, 4vw);
    --index_font_18: max(14px, 3.73vw);
    --index_font_21: max(17px, 4.53vw);
    --index_font_28: max(20px, 5.33vw);
    --index_font_47: max(29px, 7.73vw);
    --index_margin_30: max(30px, 8vw);
    --index_padding_60: max(60px, 16vw);
    --index_margin_60: max(47px, 12.53vw);
    --index_margin_80: max(50px, 13.33vw);
    --index_margin_90: max(50px, 13.33vw);
    --index_size_40: max(37px, 9.87vw);
    --index_gap_30: max(15px, 4vw);
    --index_gap_50: max(20px, 5.33vw);



  }
}

main .firstView {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

@media screen and (max-width: 770px) {
  main .firstView {
    height: auto;
    flex-direction: column;
  }
}

main .firstView .title {
  width: 93%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: var(--block_margin) auto var(--index_margin_60);
  border-bottom: 1px solid #000000;
}

main .firstView h1 {
  font-size: var(--index_font_47);
}

main .firstView p {
  font-size: var(--index_font_19);
}

main .firstView .desRank {
  padding-bottom: var(--index_padding_60);
}

main .firstView .desRank p {
  font-size: var(--index_font_19_2);
  margin-top: var(--index_margin_80);
}

main .firstView .desRank #updateText .dateCap {
  font-size: var(--index_font_21);
}

main .firstView .desRank #updateText .yearDisplay {
  font-size: var(--index_font_18);
}

@media screen and (max-width: 770px) {
  main .firstView .desRank p {
    margin-bottom: var(--index_margin_30);
  }
}

section:nth-of-type(n+2) {
  margin-bottom: var(--index_margin_90);
}

.container {
  width: 93%;
  margin: 0 auto;
}

.container .sec_title h3::before {
  content: "";
  display: block;
  width: 5px;
  height: var(--index_font_28);
  background-color: #000000;
  margin-right: var(--small_font);
}

.container .sec_title h3 {
  font-size: var(--index_font_28);
  display: flex;
  align-items: center;
  margin-bottom: var(--title_margin);
}

.container .sec_title h3.lowSofa, 
.container .sec_title h3.allSofa {
  letter-spacing: 0.15em;
}

.container ol {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: var(--index_gap_30);
  row-gap: var(--index_gap_50);
}
.container ol li .img_box{
  position: relative;

}
.container ol li .img_box::after{
  content: '';
  display: block;
  width: 100%;
  height: 0;
  padding-top: 70.66%;
}
.container ol li .img_box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.container ol li .text_box {
  margin-top: var(--base_font);
  display: flex;
  flex-direction: column;
}

.container ol li .text_box h5 {
  font-size: var(--index_font_16);
  line-height: 1.4;
}

.container ol li .text_box .arm {
  font-size: var(--small_font);
  line-height: 1.5;
  margin-top: 3px;
}

.container ol li .text_box .price {
  display: block;
  font-size: var(--small_font);
  margin-top: 3px;
}

.container ol li a:hover .text_box h5,
.container ol li a:hover .text_box .arm,
.container ol li a:hover .text_box .price  {
  color: #B0B2AF;
}


.container ol li .rank_box {
  width: var(--index_size_40);
  height: var(--index_size_40);
  margin: 0 auto var(--base_font);
  position: relative;
}

.container ol li .rank_text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  color: #ffffff;
  font-size: var(--base_font);
}

.container ol li:nth-child(n+4) .rank_text {
  color: #000000;
}

@media screen and (max-width: 770px) {
  .container ol {
    grid-template-columns: repeat(2, 1fr);
  }
}