@charset "UTF-8";

/* --------------------
  .catalog_block
-------------------- */
.catalog_content::after {
  content: "";
  width: clamp(100px,calc(100px + calc(220 - 100) * (100vw - 668px) / 632),220px);
  height: clamp(100px,calc(100px + calc(215 - 100) * (100vw - 668px) / 632),215px);
  background-image: url("/asset/images/original/t-shirt/decoration_catalog.svg");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: clamp(-46px,calc(-46px + calc(20 - (-46)) * (100vw - 1300px) / -632),20px);
  top: -29px;
}

@media (max-width: 667px) {
  .catalog_content::after {
    width:101px;
    height: 99px;
    right: 24px;
    top: 0;
  }
}


/* --------------------
  .select_block
-------------------- */
.comparison_block {
  display: flex;
  column-gap: 20px;
  justify-content: center;
  margin-bottom: 86px;
}
.comparison_content {
  width: calc(50% - 10px);
  max-width: 500px;
  border-radius: 50px;
  background-color: #E3F7FB;
  overflow: hidden;
}
.comparison_content .comparison_title {
  color: #fff;
  padding: 24px 20px;
  text-align: center;
  position: relative;
}
.comparison_content.original .comparison_title {
  background-color: #0081CC;
}
.comparison_content.ondemand .comparison_title {
  background-color: #00C0E8;
}
.comparison_content .comparison_title::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-style: solid;
  border-width: 16px;
  bottom: -26px;
  border-radius: 0 0 10px 0;
  transform: scaleX(0.5) rotate(45deg) translateX(-50%);
  left: calc(50% + -8px);
}
.comparison_content.original .comparison_title::after {
  border-color: transparent #0081CC #0081CC transparent;
}
.comparison_content.ondemand .comparison_title::after {
  border-color: transparent #00C0E8 #00C0E8 transparent;
}
.comparison_content .comparison_title p {
  font-weight: 500;
  margin-bottom: 10px;
}
.comparison_content .comparison_title h3 {
  font-size: clamp(25px,calc(25px + calc(32 - 25) * (100vw - 668px) / 632),32px);
  font-weight: 600;
}
.comparison_content .comparison_title h3 span {
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  font-family: 'lexend';
  display: block;
}
.comparison_detail {
  padding: 50px clamp(20px,calc(20px + calc(40 - 20) * (100vw - 668px) / 632),40px);
  font-weight: 500;
}
.comparison_detail img {
  width: 100%;
  background-color: #fff;
  border-radius: 50px;
  margin: 40px 0 50px;
}
.comparison_content .recommendation_block dt {
  font-size: 24px;
  padding: 12px;
  text-align: center;
  font-weight: 500;
  margin-bottom: 24px;
}
.comparison_content.original .recommendation_block dt {
  border-top: 1px solid #0081CC;
  border-bottom: 1px solid #0081CC;
  color: #0081CC;
}
.comparison_content.ondemand .recommendation_block dt {
  border-top: 1px solid #00C0E8;
  border-bottom: 1px solid #00C0E8;
  color: #00C0E8;
}
.comparison_content .recommendation_block li:not(:last-child) {
  margin-bottom: 20px;
}
.comparison_content .recommendation_block li::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 6px;
  display: inline-block;
}
.comparison_content.original .recommendation_block li::before {
  background-color: #0081CC;
}
.comparison_content.ondemand .recommendation_block li::before {
  background-color: #00C0E8;
}
.comparison_table_wrapper {
  overflow-x: auto;
  max-width: 1020px;
  margin: auto;
  padding-bottom: 20px;
}
.comparison_table_wrapper::-webkit-scrollbar {
  height: 5px;
}
.comparison_table_wrapper::-webkit-scrollbar-thumb {
  background: #00C0E8;
  border-radius: 100px;
}

.comparison_table_wrapper::-webkit-scrollbar-track {
  background: #D9D9D9;
  border-radius: 100px;
}
.comparison_table {
  border: 1px solid #D9D9D9;
  border-radius: 30px;
  overflow: hidden;
  min-width: 900px;
  margin: auto;
}
.comparison_table table {
  border-radius: 30px;
  width: 100%;
  position: relative;
}
.comparison_table thead th,
.comparison_table tbody th,
.comparison_table tbody td {
  padding: 16px;
  text-align: center;
}
.comparison_table thead th {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}
.comparison_table thead th:not(:last-child){
  border-right: 1px solid #fff;
}
.comparison_table thead th:nth-child(1) {
  background-color: #7B7B7B;
  width: 29.5%;
}
.comparison_table thead th:nth-child(2) {
  background-color: #0081CC;
  width: 35.25%;
}
.comparison_table thead th:nth-child(3) {
  background-color: #00C0E8;
  width: 35.25%;
}
.comparison_table tbody tr {
  border-top: 1px solid #D9D9D9;
}
.comparison_table tbody th,
.comparison_table tbody td:not(:last-child) {
  border-right: 1px solid #D9D9D9;
}
.comparison_table tbody th {
  background-color: #F3F3F3;
}
.comparison_table tbody td {
  background-color: #fff;
}
.comparison_aster {
  margin-top: 32px;
  text-align: center;
}
@media (max-width: 667px) {
  .comparison_block {
    margin-bottom: 57px;
    flex-flow: column;
    row-gap: 24px;
  }
  .comparison_content {
    width: 100%;
    max-width: 100%;
    border-radius: 70px;
  }
  .comparison_content .comparison_title {
    padding: 31px 20px 21px;
  }
  .comparison_content .comparison_title p {
    margin-bottom: 7px;
    font-size: 14px;
  }
  .comparison_content .comparison_title h3 {
    font-size: 24px;
  }
  .comparison_content .comparison_title h3 span {
    font-size: 12px;
  }
  .comparison_detail {
    padding: 32px 24px 59px;
    font-weight: 400;
  }
  .comparison_detail img {
    border-radius: 35px;
    margin: 24px 0;
  }
  .comparison_content .recommendation_block dt {
    font-size: 16px;
    padding: 8px;
    margin-bottom: 16px;
  }
  .comparison_content .recommendation_block li:not(:last-child) {
    margin-bottom: 12px;
  }
  .comparison_table_wrapper {
    margin-right: calc(50% - 50vw);
  }
  .comparison_table {
    width: 754px;
    min-width: 0;
  }
  .comparison_table thead th:nth-child(1) {
    width: 168px;
  }
  .comparison_table thead th:nth-child(2),
  .comparison_table thead th:nth-child(3) {
    width: 293px;
  }
  .comparison_aster {
    margin-top: 24px;
    font-size: 14px;
    line-height: 1.8;
    text-align: left;
  }
}