.about-inner,
.experience-inner,
.organization-inner,
.structure-inner,
.observation-log-inner,
.terminology-inner{
  width: calc(344 / var(--vw) * var(--base));
  margin-inline: auto;
  font-size: calc(14 / var(--vw) * var(--base));
  line-height: calc(25/14);
}

@media (max-width: 767px){
  .about-inner p,
  .experience-inner p,
  .experience-inner ul,
  .structure-inner p{
    width: calc(280 / var(--vw) * var(--base));
    margin-inline: auto;
  }

  .structure-inner p:not(.p-sup){
    font-size: calc(14 / var(--vw) * var(--base));
    letter-spacing: 0;
  }
}

@media (min-width: 768px){
  .about-inner,
  .experience-inner,
  .organization-inner,
  .structure-inner,
  .observation-log-inner,
  .terminology-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);
  }

  .about-inner,
  .structure-inner{
    padding-inline-end: calc(290 / var(--vw) * var(--base));
  }

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

  .about-inner p,
  .experience-inner p,
  .experience-inner ul,
  .structure-inner p{
    width: auto;
    letter-spacing: 0;
  }
}

#word{
  gap: calc(1600 / var(--vw) * var(--base));
}

#blink-cursor{
  animation: blink 0.8s step-end infinite;
}

@media (min-width: 768px){
  .p-separate{
    margin-block: calc(130 / var(--vw) * var(--base));
  }
}

.about-lead-wrap{
  position: relative;
  width: calc(280 / var(--vw) * var(--base));
  margin-inline: auto;
}

.about-lead-wrap > div{
  transition: 0.6s ease;
}

#about-lead{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

@media (min-width: 768px){
  .about-lead-wrap{
    width: auto;
  }

  #about-lead:hover{
    cursor: url("../img/cursor2.svg") 16 16, auto;
  }
}

.hide{
  opacity: 0;
}

.p-sup{
  margin-block-start: calc(30 / var(--vw) * var(--base));
}

@media (max-width: 767px){
  .c-hover-record{
    transform: translateX(-20%);
  }
}

#experience .h-section-title{
  position: relative;
}

#experience .h-section-title:after{
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  color: #e0ffff;
  z-index: -1;
}

#experience .h-section-title.is-active:after{
  animation: animate 48ms ease-in-out infinite;
  z-index: 1;
}

@keyframes animate{
  0%, 100%{
    top: -5px;
    left: 0;
    opacity: 1;
  }
  20%{
    top: 0;
    left: -8px;
    opacity: 0.7;
  }
  40%{
    top: 5px;
    left: 0;
    opacity: 0.2;
  }
  60%{
    top: 0;
    left: 8px;
    opacity: 0.3;
  }
  80%{
    top: 0;
    left: 0;
    opacity: 0.9;
  }
}

.experience-list{
  margin-block: calc(30 / var(--vw) * var(--base));
  list-style-type: disc;
}

.experience-list li{
  margin-inline-start: 1.5em;
}

@media (min-width: 768px){
  .experience-list{
    margin-block: calc(50 / var(--vw) * var(--base));
  }
}

.organization-list{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20 / var(--vw) * var(--base));
}

.organization-list-item{
  border: 1px solid var(--color3);
  box-sizing: border-box;
  width: calc(278 / var(--vw) * var(--base));
  height: calc(118 / var(--vw) * var(--base));
  padding: calc(24 / var(--vw) * var(--base));
}

.organization-label{
  display: inline-flex;
  border: 1px solid var(--color4);
  margin-block-end: 0.5em;
  padding: 0.4em;
  color: var(--color4);
  font-size: calc(20 / var(--vw) * var(--base));
  letter-spacing: 0;
  line-height: 1;
}

.organization-text{
  font-size: calc(13 / var(--vw) * var(--base));
  letter-spacing: 0;
}

@media (min-width: 768px){
  .organization-list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

.observation-log-list{
  border: 1px solid var(--color5);
}

.observation-log-list-header,
.observation-log-list-footer{
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(62 / var(--vw) * var(--base));
  padding-inline: calc(25 / var(--vw) * var(--base));
  font-size: calc(11 / var(--vw) * var(--base));
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.01em;
}

.observation-log-list-header{
  border-bottom: 1px solid var(--color5);
}

.observation-log-list-footer{
  border-top: 1px solid var(--color5);
}

.observation-log-list-footer .p-sup{
  margin-block-start: 0;
  font-size: calc(11 / var(--vw) * var(--base));
}

.observation-log-list-body{
  padding: calc(25 / var(--vw) * var(--base));
  font-size: calc(11 / var(--vw) * var(--base));
  letter-spacing: 0.01em;
}

.observation-log-list-item{
  border-bottom: 1px dashed var(--color5);
  padding-block-start: calc(8 / var(--vw) * var(--base));
  padding-block-end: calc(25 / var(--vw) * var(--base));
  padding-inline-start: 1.6em;
  text-indent: -1.6em;
}

.observation-log-label{
  display: block;
  margin-block-end: 1.0em;
  font-size: calc(10 / var(--vw) * var(--base));
  font-family: "JetBrains Mono", monospace;
}

.observation-log-label:before{
  content: ">";
  display: inline-block;
  text-indent: 0;
  margin-inline-end: 1.0em;
  color: var(--color4);
}

@media (min-width: 768px){
  .observation-log-list-header,
  .observation-log-list-footer{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: calc(45 / var(--vw) * var(--base));
  }

  .observation-log-list-body{
    font-size: calc(13 / var(--vw) * var(--base));
  }

  .observation-log-label{
    font-size: calc(13 / var(--vw) * var(--base));
  }
}

.terminology-list{
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(20 / var(--vw) * var(--base));
}

.terminology-list-item{
  border: 1px solid var(--color5);
  padding-block: calc(24 / var(--vw) * var(--base));
  padding-inline: calc(32 / var(--vw) * var(--base));
}

.terminology-head{
  display: flex;
  align-items: baseline;
  gap: 1.0em;
  margin-block-end: 0.5em;
  font-size: calc(22 / var(--vw) * var(--base));
  font-weight: 600;
  line-height: 1;
}

.terminology-text{
  font-size: calc(13 / var(--vw) * var(--base));
  line-height: calc(24.7/13);
}

.terminology-label {
  font-size: calc(10 / var(--vw) * var(--base));
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
}

@media (min-width: 768px){
  .terminology-list{
    grid-template-columns: repeat(2, 1fr);
  }

  .terminology-list-item{
    box-sizing: border-box;
    height: calc(160 / var(--vw) * var(--base));
    padding: calc(32 / var(--vw) * var(--base));
  }

  .terminology-label {
    font-size: calc(11 / var(--vw) * var(--base));
  }
}