.profile-inner,
.history-inner{
  width: calc(344 / var(--vw) * var(--base));
  margin-inline: auto;
  font-size: calc(14 / var(--vw) * var(--base));
  line-height: calc(25/14);
}

.profile-inner .h-section-title{
  font-size: calc(36 / var(--vw) * var(--base));
  letter-spacing: 5%;
}

.profile-list{
  margin-block: calc(30 / var(--vw) * var(--base));
}

.profile-list-item{
  padding-block: calc(22 / var(--vw) * var(--base));
  padding-inline-start: calc(18 / var(--vw) * var(--base));
  padding-inline-end: calc(33 / var(--vw) * var(--base));
  border-bottom: 1px solid var(--color5);
  font-size: calc(15 / var(--vw) * var(--base));
  text-align: right;
  line-height: calc(28.5/15);
}

.profile-list-item span{
  display: block;
  margin-block-end: 1.0em;
  font-size: calc(11 / var(--vw) * var(--base));
  font-family: "JetBrains Mono", monospace;
  text-align: left;
}

.profile-inner .p-sup{
  width: max-content;
  margin-inline: auto;
  font-size: calc(10 / var(--vw) * var(--base));
  line-height: calc(25/10);
}

@media (min-width: 768px){
  .profile-inner,
  .history-inner{
    box-sizing: border-box;
    width: calc(100% - (100 / var(--vw) * var(--base)));
    max-width: calc(1144 / var(--vw) * var(--base));
    font-size: calc(20 / var(--vw) * var(--base));
    line-height: calc(40/20);
  }

  .profile-inner{
    padding-inline-start: calc(390 / var(--vw) * var(--base));
  }

  .profile-inner .h-section-title{
    font-size: calc(70 / var(--vw) * var(--base));
    letter-spacing: 10%;
  }

  .profile-list{
    margin-block-start: calc(60 / var(--vw) * var(--base));
  }

  .profile-list-item{
    display: grid;
    grid-template-columns: 25% 1fr;
    gap: calc(75 / var(--vw) * var(--base));
    align-items: center;
    box-sizing: border-box;
    height: calc(80 / var(--vw) * var(--base));
    padding-block: calc(15 / var(--vw) * var(--base));
    padding-inline: 0;
    text-align: left;
  }

  .profile-list-item span{
    margin-block-end: 0;
    font-size: calc(13 / var(--vw) * var(--base));
  }

  .profile-inner .p-sup{
    width: auto;
    font-size: calc(16 / var(--vw) * var(--base));
    line-height: 2;
  }
}

.history-inner > p{
  width: calc(280 / var(--vw) * var(--base));
  margin-inline: auto;
}

@media (max-width: 767px){
  .history-list{
    margin-block-start: calc(64 / var(--vw) * var(--base));
    margin-block-end: calc(16 / var(--vw) * var(--base));
  }

  .history-list-item{
    border-bottom: 1px solid var(--color5);
    padding-block: calc(26 / var(--vw) * var(--base));
    padding-inline: calc(32 / var(--vw) * var(--base));
    font-size: calc(16 / var(--vw) * var(--base));
  }

  .history-label{
    display: flex;
    align-items: center;
    gap: 0.5em;
    border: 1px solid var(--color4);
    width: max-content;
    margin-block-end: 1.5em;
    padding: 0.4em 0.65em;
    font-size: calc(12 / var(--vw) * var(--base));
    font-family: "JetBrains Mono", monospace;
    line-height: 1;
    text-indent: 0;
  }

  .history-label span{
    font-size: calc(10 / var(--vw) * var(--base));
  }

  .history-text{
    text-indent: 1.0em;
  }

  .history-inner .p-sup{
    font-size: calc(13 / var(--vw) * var(--base));
    line-height: 2;
  }

  .c-hover-record{
    top: 200%;
    transform: translateX(-20%);
  }
}

@media (min-width: 768px){
  .history-inner > p{
    width: auto;
  }

  .history-list{
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: calc(60 / var(--vw) * var(--base));
    margin-block-start: calc(60 / var(--vw) * var(--base));
    margin-block-end: calc(24 / var(--vw) * var(--base));
  }

  .history-list-item{
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / 3;
    height: calc(150 / var(--vw) * var(--base));
    font-size: calc(22 / var(--vw) * var(--base));
  }

  .history-label,
  .history-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .history-label{
    border-right: 2px solid var(--color4);
    padding-inline-end: 2.0em;
    font-size: calc(16 / var(--vw) * var(--base));
    font-family: "JetBrains Mono", monospace;
    line-height: calc(28/16);
  }

  .history-label span:not(.secret-text){
    display: block;
    font-size: calc(13 / var(--vw) * var(--base));
  }

  .history-label .c-hover-record span{
    font-size: calc(11 / var(--vw) * var(--base));
  }

  .history-label .c-hover-record span:nth-of-type(1){
    font-size: calc(8 / var(--vw) * var(--base));
  }

  .history-text{
    border-bottom: 1px solid var(--color5);
  }
}