.page-contents-under{
  width: 100%;
  margin-top: 5vw;
  gap: 5%;
}
.nav-btn{
  display: inline-block;
  cursor: pointer;
  line-height: 1.4;
}
.skill .page-contents-skill-title{
  white-space: nowrap;
}
.skill .page-contents-title{
  margin:0;
}
@media screen and (min-width:769px) {
  .page-contents.list .inner{
    padding-top: 0;
    padding-bottom: 8%;
  }
  .list .page-contents-title{
    margin-bottom: 4rem;
  }
  .page-contents-menu-title{
    align-self: flex-start;
    width: fit-content;
    padding-right: 30px;
  }
  .page-contents-menu-title *{
    font-weight: var(--font-weight-bold);
    font-family: var(--font-en);
  }
  .page-contents-menu-txts{
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 5%;
    flex: 1;
    max-width: 900px;
    margin-left: auto;
    font-size: 1.5rem;
    font-family: var(--font-en);
  }
  .page-contents-menu-txts *{
    font-weight: var(--font-weight-mix);
    font-family: var(--font-mix);
  }
  .page-contentes-menu-group{
    flex: 1;
    padding: 1rem 0;
    border-top: 1px solid #111;
  }
  .page-contentes-menu-group:first-of-type{
    flex: 2;
  }
  .page-contents-menu-subtitle{
    margin-bottom: 3rem;
  }
  .page-contents-menu-subtitle *{
    font-weight: var(--font-weight-bold);
  }
  .skill > .flex{
    gap: 5%;
    align-items: flex-start;
    padding-top: 16rem;
  }
  .page-contents-skill-img{
    width: 55%;
    align-items: center;
    justify-content: space-between;
  }
  .page-contents-skill-title {
    writing-mode: vertical-rl;
    transform-origin: center;
  }
  .page-contents-skill-title *{
    transform: rotate(180deg);
    border-left: 4px solid #111;
    padding-left: .25em;
    font-size: 8.4rem;
  }
  .page-contents-skill-img .visual{
    width: 74%;
    aspect-ratio: 470 / 572;
    background-color: #ccc;
  }
  .page-contents-skill-img .visual img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .page-contents-skill-txts{
    flex:1;
	  font-size: 1.5rem;
  }
  .page-contents-skill-group + .page-contents-skill-group{
    margin-top: 4rem;
  }
  .page-conentes-skill-subtitle {
    font-size: 1.8rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: .04em;
    line-height: 1.6;
    margin-bottom: 1rem;
  }
  .skill .btn_wrap{
    margin-top: min(6rem, 60px);
  }
}

@media screen and (max-width:768px) {
  .page-contents-under{
    flex-wrap: wrap;
  }
  .page-contents-menu-title {
    width: 100%;
    padding-bottom: .5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid;
    font-family: var(--font-mix);
  }
  .page-contents-menu-title * {
    font-weight: var(--font-weight-bold);
    font-size: 2.6rem;
  }
  .page-contents-menu-txts {
    width: 100%;
    flex-wrap: wrap;
    gap: 5%;
  }
  .page-contentes-menu-group{
    width: 47.5%;
  }
  .page-contents-menu-subtitle{
    margin-bottom: .5rem;
  }
  .page-contents-menu-subtitle *{
    font-weight: var(--font-weight-bold);
  }
  .skill .inner {
    padding: 16% 4% 0;
    flex-wrap: wrap;
  }
  .page-contents-skill-img{
    flex-wrap: wrap;
    margin-bottom: 4rem;
  }
  .page-contents-skill-group + .page-contents-skill-group{
    margin-top: 3.2rem;
  }
  .page-contents-skill-title{
    width: 100%;
  }
  .page-conentes-skill-subtitle {
    margin-bottom: .5rem;
    font-weight: var(--font-weight-semibold);
  }
  .skill .btn_wrap{
    margin-top: min(6rem, 60px);
  }
}