@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');

.features {
  --viewport: 750;
  --gold: #BBA171;
}
@media screen and (min-width:768px) {
  .features {
    --viewport: 1280;
  }
}
.font_gold {
  color: var(--gold);
}
.features {
  position: relative;
  font-size: calc(100vw / var(--viewport) * 24);
  font-weight: normal;
  color: #000 !important;
}
@media screen and (min-width:768px) {
  .features {
    font-size: min(calc(100vw / var(--viewport) * 18), 18px);
  }
}
.features, .features button, .features h1, .features h2, .features h3, .features h4, .features h5, .features h6, .features input, .features option, .features select, .features table, .features textarea {
  line-height: 1.5;
  color: inherit;
}
.features video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
@media screen and (min-width:768px) {
  .features a[href^="tel:"] {
    pointer-events: none;
  }
}
.features img {
  vertical-align: middle;
}
@media (min-width: 768px) {
  .features img{
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}
.features .clearfix::after {
   content: "";
   display: block;
   clear: both;
}
.features .inner {
  padding-left: calc(100vw / var(--viewport) * 35);
  padding-right: calc(100vw / var(--viewport) * 35);
}
@media (min-width: 768px) {
  .features .inner {
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 1160px;
  }
}

.lh1_6 {
  line-height: 1.6;
}

/*----------------------------------------------------------
    layout
----------------------------------------------------------*/
/* firstview */
.features .firstview {
  width: 100%;
  background-color: #000;
}
.features .firstviewWrapper {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
}
.features .firstviewImage {
  width: 100%;
  height: 100%;
  display: block;
}
.features .firstviewImage img {
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
@media screen and (max-width: 979px) {
  .features .firstviewImage img {
    max-height: none;
    height: calc(100vw / var(--viewport) * 518);;
  }
}
@media screen and (min-width: 1136px) {
  .features .firstviewImage img {
    width: auto;
    height: 400px;
  }
}
.features .firstviewContent {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.features .firstviewContent__Subtitle {
  color: var(--gold);
  font-size: 29px;
  font-weight: 600;
  display: block;
}
@media screen and (max-width: 979px) {
  .features .firstviewContent__Subtitle {
    font-size: calc(100vw / var(--viewport) * 36);
  }
}
.features .firstviewContent__Title {
  color: #fff;
  font-size: 36px;
  font-weight: 600;
  display: block;
}
@media screen and (max-width: 979px) {
  .features .firstviewContent__Title {
    font-size: calc(100vw / var(--viewport) * 44);
  }
}

/* introduction */
.features .introduction {
  padding-top: calc(100vw / var(--viewport) * 80);
}
.features .introductionTitle {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: calc(100vw / var(--viewport) * 20);
  width: calc(100vw / var(--viewport) * 484);
}
.features .introductionSubtitle {
  margin-bottom: calc(100vw / var(--viewport) * 20);
  text-align: center;
  font-size: calc(100vw / var(--viewport) * 40);
  font-weight: 700;
}
.introductionBox {
  background: #EAEAEA;
  padding: calc(100vw / var(--viewport) * 36) 0 calc(100vw / var(--viewport) * 41);
}
.introductionBox .flex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.introductionBox .flex li {
  text-align: center;
}
.reasonTitle {
  text-align: center;
}
.reasonTitle .reasonSub {
  color: #fff;
  font-size: calc(100vw / var(--viewport) * 29);
  font-weight: 600;
  line-height: 1;
  background: #000;
  display: inline-block;
  padding: 0.2em 0.8em 0.3em;
}
.reasonTitle p {
  font-size: calc(100vw / var(--viewport) * 42);
}
.introductionBox .flex li:nth-child(n+2) {
  margin-top: calc(100vw / var(--viewport) * 30);
}
@media screen and (min-width:768px) {
  .features .introduction {
    padding-top: min(calc(100vw / var(--viewport) * 37), 37px);
    padding-bottom: min(calc(100vw / var(--viewport) * 44), 44px);
  }
  .features .introductionTitle {
    margin-bottom: min(calc(100vw / var(--viewport) * 18), 18px);
    width: min(calc(100vw / var(--viewport) * 665), 665px);
  }
  .features .introductionSubtitle {
    margin-bottom: min(calc(100vw / var(--viewport) * 20), 20px);
    font-size: min(calc(100vw / var(--viewport) * 40), 40px);
  }
  .introductionBox {
    padding: min(calc(100vw / var(--viewport) * 50), 50px) 0;
  }
  .introductionBox .flex {
    flex-wrap: wrap;
    flex-direction: row;
  }
  .introductionBox .flex li:nth-child(1) {
    width: 100%;
  }
  .introductionBox .flex li:nth-child(n+2) {
    text-align: center;
    width: 50%;
  }
  .reasonTitle .reasonSub {
    font-size: min(calc(100vw / var(--viewport) * 20), 20px);
  }
  .reasonTitle p {
    font-size: min(calc(100vw / var(--viewport) * 38), 38px);
  }
  .introductionBox .flex li:nth-child(n+2) {
    margin-top: min(calc(100vw / var(--viewport) * 30), 30px);
  }
}

/* reason */
.reasonBox {
  padding-top: calc(100vw / var(--viewport) * 76);
}
.reasonBox .reasonTitle {
  margin-bottom: calc(100vw / var(--viewport) * 33);
}
.reasonBox .pc_flex {
  display: flex;
  flex-direction: column;
  gap: calc(100vw / var(--viewport) * 36);
  margin-bottom: calc(100vw / var(--viewport) * 13);
}
@media screen and (min-width:768px) {
  .reasonBox {
    padding-top: min(calc(100vw / var(--viewport) * 77), 77px);
  }
  .reasonBox .reasonTitle {
    margin-bottom: min(calc(100vw / var(--viewport) * 30), 30px);
  }
  .reasonBox .pc_flex {
    gap: min(calc(100vw / var(--viewport) * 40), 40px);
    margin-bottom: min(calc(100vw / var(--viewport) * 15), 15px);
  }
}
#reason01 .box01 {
  padding-bottom: calc(100vw / var(--viewport) * 36);
}
@media screen and (min-width:768px) {
  #reason01 .box01 {
    padding-bottom: min(calc(100vw / var(--viewport) * 70), 70px);
  }
  #reason01 .box01 .pc_flex {
    flex-direction: row;
  }
}
.features .precheckTitle {
  margin-left: auto;
  margin-right: auto;
  background: #000;
  border-radius: calc(100vw / var(--viewport) * 20);
  padding: calc(100vw / var(--viewport) * 12) calc(100vw / var(--viewport) * 20);
  text-align: center;
  font-size: calc(100vw / var(--viewport) * 44);
  font-weight: 700;
  color: #FFF;
}
.features .precheckTitle strong {
  color: var(--gold);
}
.features .precheckEyebrows {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  margin-top: calc(100vw / var(--viewport) * 48);
}
@media screen and (min-width:768px) {
  .features .precheckTitle {
    border-radius: min(calc(100vw / var(--viewport) * 20), 20px);
    padding: min(calc(100vw / var(--viewport) * 13), 13px) min(calc(100vw / var(--viewport) * 43), 43px);
    width: fit-content;
    font-size: min(calc(100vw / var(--viewport) * 44), 44px);
  }
  .features .precheckEyebrows {
    margin-top: min(calc(100vw / var(--viewport) * 40), 40px);
  }
}
.features .precheckEyebrow {
  text-align: center;
  line-height: calc(40 / 36);
  font-size: calc(100vw / var(--viewport) * 36);
  font-weight: 700;
}
@media screen and (min-width:768px) {
  .features .precheckEyebrow {
    line-height: calc(52 / 46);
    font-size: min(calc(100vw / var(--viewport) * 46), 46px);
  }
}
.features .precheckEyebrow strong {
  font-size: calc(100vw / var(--viewport) * 48);
}
@media screen and (min-width:768px) {
  .features .precheckEyebrow strong {
    font-size: min(calc(100vw / var(--viewport) * 60), 60px);
  }
}
.features .precheckEyebrow .number {
  font-size: calc(100vw / var(--viewport) * 69);
}
@media screen and (min-width:768px) {
  .features .precheckEyebrow .number {
    font-size: min(calc(100vw / var(--viewport) * 86), 86px);
  }
}
.features .precheckTables {
  display: flex;
  flex-direction: column;
  gap: calc(100vw / var(--viewport) * 28);
  margin-top: calc(100vw / var(--viewport) * 45);
}
@media screen and (min-width:768px) {
  .features .precheckTables {
    gap: min(calc(100vw / var(--viewport) * 50), 50px);
    margin-top: min(calc(100vw / var(--viewport) * 40), 40px);
  }
}
.features .precheckTable {
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
  width: 50%;
}
.features .precheckTable__Row {
  border-left: calc(100vw / var(--viewport) * 2) solid #000;
  border-right: calc(100vw / var(--viewport) * 2) solid #000;
  border-bottom: calc(100vw / var(--viewport) * 2) solid #000;
}
@media screen and (min-width:768px) {
  .features .precheckTable__Row {
    border-width: 1px;
  }
}
.features .precheckTable__Header {
  background: #000;
  text-align: center;
  padding: calc(100vw / var(--viewport) * 5);
  font-size: calc(100vw / var(--viewport) * 32);
  font-weight: 700;
  color: #FFF;
}
@media screen and (min-width:768px) {
  .features .precheckTable__Header {
    padding: min(calc(100vw / var(--viewport) * 7), 7px);
    font-size: min(calc(100vw / var(--viewport) * 39), 39px);
  }
}
.features .precheckTable__Data {
  position: relative;
  padding: calc(100vw / var(--viewport) * 6) calc(100vw / var(--viewport) * 6) calc(100vw / var(--viewport) * 6) calc(100vw / var(--viewport) * 54);
  font-size: calc(100vw / var(--viewport) * 27);
  font-weight: 700;
  color: #B9B9B9;
}
@media screen and (min-width:768px) {
  .features .precheckTable__Data {
    padding: min(calc(100vw / var(--viewport) * 8), 8px) min(calc(100vw / var(--viewport) * 8), 8px) min(calc(100vw / var(--viewport) * 8), 8px) min(calc(100vw / var(--viewport) * 113), 113px);
    font-size: min(calc(100vw / var(--viewport) * 38), 38px);
  }
}
.features .precheckTable__Data.check {
  color: #000;
}
.features .precheckTable__Data::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 calc(100vw / var(--viewport) * 15);
  margin: auto;
  background: #FFF;
  border: calc(100vw / var(--viewport) * 2) solid #000;
  width: calc(100vw / var(--viewport) * 30);
  height: calc(100vw / var(--viewport) * 30);
}
@media screen and (min-width:768px) {
  .features .precheckTable__Data::before {
    inset: 0 auto 0 min(calc(100vw / var(--viewport) * 48), 48px);
    border: 2px solid #000;
    width: min(calc(100vw / var(--viewport) * 48), 48px);
    height: min(calc(100vw / var(--viewport) * 48), 48px);
  }
}
.features .precheckTable__Data.check::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 calc(100vw / var(--viewport) * 17);
  margin: auto;
  background: url(../../assets/img/icon_check.svg) center/cover no-repeat;
  width: calc(100vw / var(--viewport) * 34);
  height: calc(100vw / var(--viewport) * 28);
}
@media screen and (min-width:768px) {
  .features .precheckTable__Data.check::after {
    inset: 0 auto 0 min(calc(100vw / var(--viewport) * 52), 52px);
    width: min(calc(100vw / var(--viewport) * 54), 54px);
    height: min(calc(100vw / var(--viewport) * 44), 44px);
  }
}

.features .powerTitle {
  margin-top: calc(100vw / var(--viewport) * 32);
  background: #000;
  padding: calc(100vw / var(--viewport) * 4) calc(100vw / var(--viewport) * 4) calc(100vw / var(--viewport) * 8);
  text-align: center;
  font-size: calc(100vw / var(--viewport) * 30);
  font-weight: 700;
  color: var(--gold);
}
@media screen and (min-width:768px) {
  .features .powerTitle {
    margin-top: min(calc(100vw / var(--viewport) * 60), 60px);
    padding: min(calc(100vw / var(--viewport) * 14), 14px) min(calc(100vw / var(--viewport) * 14), 14px) min(calc(100vw / var(--viewport) * 24), 24px);
    font-size: min(calc(100vw / var(--viewport) * 43), 43px);
  }
}
.features .powerTitle small {
  display: block;
  font-size: calc(100vw / var(--viewport) * 20);
  font-weight: 400;
  color: #FFF;
}
@media screen and (min-width:768px) {
  .features .powerTitle small {
    font-size: min(calc(100vw / var(--viewport) * 19), 19px);
  }
}
.features .powerList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.features .powerImage.gorilla {
  position: relative;
}
.features .powerImage.gorilla::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  box-sizing: border-box;
  border: min(calc(100vw / var(--viewport) * 8), 8px) solid #F5D08C;
  width: 100%;
  height: 100%;
}
.features .powerLabel {
  background: #000;
  text-align: center;
  padding: calc(100vw / var(--viewport) * 11);
  font-size: calc(100vw / var(--viewport) * 18);
  font-weight: 700;
  color: #FFF;
}
@media screen and (min-width:768px) {
  .features .powerLabel {
    padding: min(calc(100vw / var(--viewport) * 16), 16px) min(calc(100vw / var(--viewport) * 16), 16px) 0;
    font-size: min(calc(100vw / var(--viewport) * 30), 30px);
  }
}
.features .powerLabel.gorilla {
  color: var(--gold);
}
.features .powerText {
  margin-top: -1px;
  background: #000;
  padding: calc(100vw / var(--viewport) * 22) calc(100vw / var(--viewport) * 16);
  line-height: calc(32 / 18);
  font-size: calc(100vw / var(--viewport) * 18);
  color: #FFF;
}
@media screen and (min-width:768px) {
  .features .powerText {
    padding: min(calc(100vw / var(--viewport) * 15), 15px) min(calc(100vw / var(--viewport) * 26), 26px) min(calc(100vw / var(--viewport) * 28), 28px);
    line-height: calc(22 / 14);
    font-size: min(calc(100vw / var(--viewport) * 14), 14px);
  }
}

#reason01 .box02 {
  background: #3C3A39;
  padding-top: calc(100vw / var(--viewport) * 80);
  padding-bottom: calc(100vw / var(--viewport) * 80);
}
#reason01 .box02 .diffTitle {
  display: flex;
  justify-content: space-between;
}
#reason01 .box02 .diffTitle li {
  text-align: center;
  width: 50%;
}
#reason01 .box02 .diffTitle li span {
  color: #fff;
  font-size: calc(100vw / var(--viewport) * 24);
  font-weight: bold;
  text-align: center;
  display: inline-block;
  background: #989393;
  width: calc(100vw / var(--viewport) * 296);
  border-radius: calc(100vw / var(--viewport) * 20) calc(100vw / var(--viewport) * 20) 0 0;
  padding: calc(100vw / var(--viewport) * 11);
}
#reason01 .box02 .diffTitle li:nth-child(2) span {
  background: #706144;
}
#reason01 .box02 .diffTable {
  background: linear-gradient(90deg, #fff 0%, #fff 50%, var(--gold) 50%, var(--gold) 100%);;
  padding: calc(100vw / var(--viewport) * 60) calc(100vw / var(--viewport) * 30) calc(100vw / var(--viewport) * 80);
}
#reason01 .box02 .diffTable table {
  border-collapse:collapse;
}
#reason01 .box02 .diffTable .midashi {
  display: flex;
  justify-content: space-between;
}
#reason01 .box02 .diffTable .midashi li {
  width: 50%;
}
@media screen and (min-width:768px) {
  #reason01 .box02 {
    max-width: initial;
    padding-top: min(calc(100vw / var(--viewport) * 48), 48px);
    padding-bottom: min(calc(100vw / var(--viewport) * 113), 113px);
  }
  #reason01 .box02 .diffTitle,
  #reason01 .box02 .diffTable {
    max-width: 1120px;
    margin: 0 auto;
  }
  #reason01 .box02 .diffTitle li span {
    font-size: min(calc(100vw / var(--viewport) * 33), 33px);
    width: min(calc(100vw / var(--viewport) * 394), 394px);
    border-radius: min(calc(100vw / var(--viewport) * 20), 20px) min(calc(100vw / var(--viewport) * 20), 20px) 0 0;
    padding: min(calc(100vw / var(--viewport) * 15), 15px);
  }
  #reason01 .box02 .diffTable {
    padding: min(calc(100vw / var(--viewport) * 54), 54px) min(calc(100vw / var(--viewport) * 60), 60px) min(calc(100vw / var(--viewport) * 60), 60px);
  }
}
#reason02 .box01 {
  color: #fff;
  background: #3C3A39;
  padding-top: calc(100vw / var(--viewport) * 40);
  padding-bottom: calc(100vw / var(--viewport) * 75);
}
#reason02 .box01 ul {
  text-align: center;
}
#reason02 .box01 li .midashi {
  font-size: calc(100vw / var(--viewport) * 32);
  font-weight: 600;
  background: #989393;
  display: inline-block;
  padding: 0.2em 0.8em 0.3em;
  margin: 0 auto;
}
#reason02 .box01 li .sub {
  font-size: calc(100vw / var(--viewport) * 32);
  font-weight: 600;
  margin-top: calc(100vw / var(--viewport) * 16);
}
#reason02 .box01 li video {
  margin-top: calc(100vw / var(--viewport) * 26);
}
#reason02 .box01 li:nth-child(2) .midashi {
  background: #716144;
}
#reason02 .box01 > p {
  font-weight: normal;
}
@media screen and (max-width:767px) {
  #reason02 .box01 li:nth-child(2) {
    margin-top: calc(100vw / var(--viewport) * 44);
  }
}
@media screen and (min-width:768px) {
  #reason02 .box01 {
    max-width: initial;
    font-size: min(calc(100vw / var(--viewport) * 18), 18px);
    padding-top: min(calc(100vw / var(--viewport) * 60), 60px);
    padding-bottom: min(calc(100vw / var(--viewport) * 60), 60px);
  }
  #reason02 .box01 .pc_flex {
    flex-direction: row;
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
  }
  #reason02 .box01 li .midashi {
    font-size: min(calc(100vw / var(--viewport) * 32), 32px);
  }
  #reason02 .box01 li .sub {
    font-size: min(calc(100vw / var(--viewport) * 32), 32px);
    margin-top: min(calc(100vw / var(--viewport) * 16), 16px);
  }
  #reason02 .box01 li video {
    margin-top: min(calc(100vw / var(--viewport) * 29), 29px);
  }
  #reason02 .box01 > p {
    font-size: min(calc(100vw / var(--viewport) * 18), 18px);
    max-width: 1120px;
    margin: 0 auto;
  }
}

#reason03 .sub {
  font-size: calc(100vw / var(--viewport) * 20);
  font-weight: bold;
}
#reason03 .box01 .flex {
  display: flex;
}
#reason03 .box01 .flex li {
  width: 50%;
}
#reason03 .box01 .flex li figcaption {
  color: #fff;
  font-size: calc(100vw / var(--viewport) * 21);
  font-weight: 600;
  text-align: center;
  background: #000;
  padding: 0.2em 0 0.3em;
}
#reason03 .box01 .pc_flex {
  margin-bottom: 0;
}
#reason03 .box01 p {
  font-size: calc(100vw / var(--viewport) * 24);
  margin-top: calc(100vw / var(--viewport) * 15);
}
@media screen and (max-width:767px) {
  #reason03 .box01 .flex li:nth-child(1) {
    border-right: 1px solid #fff;
    box-sizing: content-box;
  }
}
@media screen and (min-width:768px) {
  #reason03 .sub {
    font-size: 15px;
  }
  #reason03 .box01 .flex {
    gap: min(calc(100vw / var(--viewport) * 40), 40px);
  }
  #reason03 .box01 .flex li figcaption {
    font-size: min(calc(100vw / var(--viewport) * 21), 21px);
    padding: 0.4em 0 0.5em;
  }
  #reason03 .box01 p {
    font-size: min(calc(100vw / var(--viewport) * 18), 18px);
    margin-top: min(calc(100vw / var(--viewport) * 15), 15px);
  }
  #reason03 .box01 .pc_flex {
    flex-direction: row;
    margin-bottom: 0;
  }
  #reason03 .box01 .pc_flex p {
    width: 50%;
    margin-top: 0;
  }
}

#reason04 .box01 .midashi {
  font-size: calc(100vw / var(--viewport) * 32);
  font-weight: 600;
  text-align: center;
  line-height: 1.44;
}
#reason04 .box01 img {
  margin-top: calc(100vw / var(--viewport) * 14);
}
#reason04 .box01 p {
  font-size: calc(100vw / var(--viewport) * 24);
  margin-top: calc(100vw / var(--viewport) * 15);
}
#reason04 .box01 p.midashi {
  margin-top: 0;
}
@media screen and (min-width:768px) {
  #reason04 .box01 .pc_flex {
    flex-direction: row;
  }
  #reason04 .box01 .pc_flex li {
    width: 50%;
  }
  #reason04 .box01 .midashi {
    font-size: min(calc(100vw / var(--viewport) * 32), 32px);
  }
  #reason04 .box01 img {
    margin-top: min(calc(100vw / var(--viewport) * 14), 14px);
  }
  #reason04 .box01 p {
    font-size: min(calc(100vw / var(--viewport) * 18), 18px);
    margin-top: min(calc(100vw / var(--viewport) * 15), 15px);
  }
}

#reason05 .box01 p {
  font-size: calc(100vw / var(--viewport) * 24);
  margin-top: calc(100vw / var(--viewport) * 15);
}
@media screen and (max-width:767px) {
  #reason05 .box01 .pc_flex {
    gap: 0;
  }
}
@media screen and (min-width:768px) {
  #reason05 .box01 .pc_flex {
    flex-direction: row;
    margin-bottom: 0;
  }
  #reason05 .box01 .pc_flex img,
  #reason05 .box01 .pc_flex p {
    font-size: min(calc(100vw / var(--viewport) * 18), 18px);
    width: 50%;
    margin-top: 0;
  }
}

/* achievement */
.achievement {
  padding-top: calc(100vw / var(--viewport) * 90);
  padding-bottom: calc(100vw / var(--viewport) * 35);
}
.achievement h2 img {
  width: calc(100vw / var(--viewport) * 550);
  display: block;
  margin: 0 auto;
}
.achievement .pc_flex {
  margin-top: calc(100vw / var(--viewport) * 32);
}
.achievement .pc_flex .flex {
  display: flex;
  justify-content: space-between;
  margin-top: calc(100vw / var(--viewport) * 40);
}
.achievement .pc_flex .flex li {
  color: #fff;
  font-size: calc(100vw / var(--viewport) * 32);
  font-weight: 600;
  text-align: center;
  background: #000;
  width: calc(100vw / var(--viewport) * 219);
  height: calc(100vw / var(--viewport) * 219);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(100vw / var(--viewport) * 16);
}
.achievement .pc_flex .flex li .text {
  font-size: calc(100vw / var(--viewport) * 53);
  font-weight: bold;
  line-height: 1.13;
  text-align: center;
}
.achievement .pc_flex .flex li .period {
  font-size: calc(100vw / var(--viewport) * 15);
  margin-top: calc(100vw / var(--viewport) * 8);
}
@media screen and (min-width:768px) {
  .achievement {
    padding-top: min(calc(100vw / var(--viewport) * 77), 77px);
    padding-bottom: min(calc(100vw / var(--viewport) * 77), 77px);
  }
  .achievement h2 {
    margin-bottom: min(calc(100vw / var(--viewport) * 32), 32px);
  }
  .achievement h2 img {
    width: min(calc(100vw / var(--viewport) * 550), 550px);
  }
  .achievement .pc_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: min(calc(100vw / var(--viewport) * 40), 40px);
    margin-top: 0;
  }
  .achievement .pc_flex li {
    width: 50%;
  }
  .achievement .pc_flex .flex {
    margin-top: 0;
  }
  .achievement .pc_flex .flex li {
    font-size: min(calc(100vw / var(--viewport) * 25), 25px);
    width: 31.67%;
    height: auto;
  }
  .achievement .pc_flex .flex li .text {
    font-size: min(calc(100vw / var(--viewport) * 40), 40px);
  }
  .achievement .pc_flex .flex li .period {
    font-size: min(calc(100vw / var(--viewport) * 11), 11px);
    margin-top: min(calc(100vw / var(--viewport) * 8), 8px);
  }
}

/* suport */
.suport {
  padding-top: calc(100vw / var(--viewport) * 35);
}
.suport h2 {
  font-size: calc(100vw / var(--viewport) * 49);
  font-weight: bold;
  text-align: center;
  line-height: 1.39;
}
.suport p {
  font-size: calc(100vw / var(--viewport) * 24);
  margin-top: calc(100vw / var(--viewport) * 15);
}
@media screen and (min-width:768px) {
  .suport {
    padding-top: min(calc(100vw / var(--viewport) * 27), 27px);
  }
  .suport h2 {
    font-size: min(calc(100vw / var(--viewport) * 49), 49px);
  }
  .suport p {
    font-size: min(calc(100vw / var(--viewport) * 18), 18px);
    margin-top: min(calc(100vw / var(--viewport) * 15), 15px);
  }
}