@charset "UTF-8";

/* -------------------------------------- */
/* p-about-bg
-------------------------------------- */
.p-about-bg {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 0;
}

@media only screen and (min-width: 1025px) {
  .p-about-bg {
    gap: 24rem 0;
  }
}

/* head（1行目）+ value（2行目）に重ねる。単独の高さ行は作らない */
.p-about-bg__media {
  grid-column: 1;
  grid-row: 1 / 3;
  z-index: 0;
  pointer-events: none;
}

.p-about-bg::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #000000;
  opacity: 0.7;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

.p-about-bg__media video {
  display: block;
  width: 100%;
  height: 100svh;
  object-fit: cover;
  object-position: top center;
  position: sticky;
  top: 100%;
  left: 0;
  transition: top 0.6s 0.3s cubic-bezier(0.72, 0.29, 0.46, 0.92);
}

.is-load .p-about-bg__media video {
  top: 0;
}

.p-about-bg__media video.is-scrub {
  transition: none;
}


/* -------------------------------------- */
/* p-about-head */
/* -------------------------------------- */
.p-about-head {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  padding: 10rem 0 12rem;
}

@media only screen and (min-width: 1025px) {
  .p-about-head {
    padding: calc(100svh - max(49svh, var(--mainv-h, 0px)) + 4rem) 0 12rem;
  }
}

.p-about-head__inner {
  width: 100%;
  padding: 0 3rem;
  display: grid;
  gap: 6rem 0;
}

@media only screen and (min-width: 1025px) {
  .p-about-head__inner {
    padding: 0 8rem;
    grid-template-columns: 1fr 1fr;
    gap: 26rem;
  }
}

.p-about-head__copy {}

@media only screen and (min-width: 1025px) {
  .p-about-head__copy {
    height: fit-content;
    position: sticky;
    top: 40%;
  }
}

.p-about-head__copy p {
  font-family: var(--font-jp-b);
  font-size: 2.2rem;
  color: #FFFFFF;
  line-height: 1.4;
  letter-spacing: -0.06em;
  font-feature-settings: normal;
  text-align: center;
}

@media only screen and (min-width: 769px) {
  .p-about-head__copy p {
    font-size: 3.2rem;
    line-height: 1.5;
    text-align: left;
  }
}

.p-about-head__txt {
  position: relative;
  display: grid;
  gap: 2.5rem 0;
}

@media only screen and (min-width: 769px) {
  .p-about-head__txt {
    gap: 5.5rem 0;
  }
}

.p-about-head__txt p {
  font-family: var(--font-jp-b);
  font-size: 1.4rem;
  color: #FFFFFF;
  line-height: 2;
  letter-spacing: 0.1em;
}

@media only screen and (min-width: 769px) {
  .p-about-head__txt p {
    font-size: 2rem;
  }
}


/* -------------------------------------- */
/* p-about-value */
/* -------------------------------------- */
.p-about-value {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  z-index: 2;
  width: 100%;
}

.p-about-value__inner {
  /* 各 block が画面に固定されたまま止まるスクロール量 */
  --value-hold: 50svh;
  width: 100%;
}

/* 最後の block の後ろに、ブロック間と同じだけの余白を置く
   （sticky は親の下端で外れるため、親側に空間が必要） */
.p-about-value__inner::after {
  content: "";
  display: block;
  height: var(--value-hold);
}

.p-about-value__bg {
  width: 100%;
  height: 100svh;
  position: sticky;
  top: 0;
  overflow-x: clip;
}

.p-about-value__bg::before {
  content: "";
  display: block;
  width: 100%;
  height: 89.34vw;
  position: absolute;
  top: 0;
  bottom: 0;
  margin-block: auto;
  left: 0;
  background-image: radial-gradient(
    circle,
    transparent calc(89.34vw / 2 - 1px),
    #FFFFFF33 calc(89.34vw / 2 - 1px),
    #FFFFFF33 calc(89.34vw / 2),
    transparent calc(89.34vw / 2)
  );
  background-size: 89.34vw 89.34vw;
  background-repeat: repeat-x;
  background-position: center;
}

@media only screen and (min-width: 1025px) {
  .p-about-value__bg::before {
    height: 46.875vw;
    background-image: radial-gradient(
      circle,
      transparent calc(46.875vw / 2 - 1px),
      #FFFFFF33 calc(46.875vw / 2 - 1px),
      #FFFFFF33 calc(46.875vw / 2),
      transparent calc(46.875vw / 2)
    );
    background-size: 46.875vw 46.875vw;
  }
}

.p-about-value__bg::after {
  content: "";
  display: block;
  width: 178.68vw;
  height: 89.34vw;
  position: absolute;
  top: 0;
  bottom: 0;
  margin-block: auto;
  left: 50%;
  transform: translateX(-50%);
  background-image: radial-gradient(
    circle,
    transparent calc(89.34vw / 2 - 1px),
    #FFFFFF33 calc(89.34vw / 2 - 1px),
    #FFFFFF33 calc(89.34vw / 2),
    transparent calc(89.34vw / 2)
  );
  background-size: 89.34vw 89.34vw;
  background-repeat: repeat-x;
  background-position: left center;
}

@media only screen and (min-width: 1025px) {
  .p-about-value__bg::after {
    width: 93.75vw;
    height: 46.875vw;
    background-image: radial-gradient(
      circle,
      transparent calc(46.875vw / 2 - 1px),
      #FFFFFF33 calc(46.875vw / 2 - 1px),
      #FFFFFF33 calc(46.875vw / 2),
      transparent calc(46.875vw / 2)
    );
    background-size: 46.875vw 46.875vw;
  }
}

.p-about-value__block {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  height: 100svh;
  position: sticky;
  top: 0;
}

@media only screen and (min-width: 1025px) {
  .p-about-value__block {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
  }
}

/* 前の block が固定されてから、次の block が入ってくるまでの間 */
.p-about-value__block + .p-about-value__block {
  margin-top: var(--value-hold);
}

/* 次の block が上がってきたら中身を隠す（about.js で is-out） */
.p-about-value__block > * {
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.p-about-value__block.is-out > * {
  opacity: 0;
  visibility: hidden;
}

.p-about-value__motion {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.p-about-value__motion.--01 {
  .circle-motion {
    width: 100px;
    height: 200px;
    display: block;
    overflow: visible;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform: scale(0.66);
  }

  @media only screen and (min-width: 769px) {
    .circle-motion {
      transform: scale(1);
    }
  }

  .left {
    animation: kf_left 3.85473s linear infinite;
  }
  
  .right {
    animation:kf_right 3.85473s linear infinite;
  }

  @media (prefers-reduced-motion:reduce) {
    .left {
      animation: none;
      translate: 50px 0px;
    }
    
    .right {
      animation: none;
      translate: -50px 0px;
    }
  }
}

@keyframes kf_left {
  0% {
    animation-timing-function: ease;
    translate: 0px 0px;
  }
  38.913% {
    translate: 50px 0px;
  }
  100% {
    translate: 50px 0px;
  }
}

@keyframes kf_right {
  0% {
    translate: 0px 0px;
  }
  1.946% {
    animation-timing-function: ease;
    translate: 0px 0px;
  }
  38.913% {
    translate: -50px 0px;
  }
  100% {
    translate: -50px 0px
  }
}

.p-about-value__motion.--02 {
  .travel-space {
    width: 209.288px;
    height: 218.861px;
    display: grid;
    place-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform: translate(-15px, 15px) scale(0.66);
  }

  @media only screen and (min-width: 769px) {
    .travel-space {
      transform: translate(-20px, 20px) scale(1);
    }
  }
  
  .travel {
    position: relative;
    width: 203.02px;
    height: 100.388px;
    transform: rotate(-48.78deg);
  }
  
  .traveller {
    position: absolute;
    width: 100.388px;
    height: 100.388px;
    border-radius: 50%;
    left: 0;
    top: 0;
  }
  
  & [data-node-id="1:6369"] {
    animation: kf_1_6369_opacity_0 3.85473s linear, kf_1_6369_background-color_0 3.85473s linear, kf_1_6369_translate_0 3.85473s linear; animation-iteration-count: infinite;
  }
  
  & [data-node-id="1:6370"] {
    animation: kf_1_6370_opacity_0 3.85473s linear, kf_1_6370_background-color_0 3.85473s linear, kf_1_6370_translate_0 3.85473s linear;
    animation-iteration-count: infinite;
  }
  
  & [data-node-id="1:6371"] {
    animation: kf_1_6371_opacity_0 3.85473s linear, kf_1_6371_background-color_0 3.85473s linear, kf_1_6371_translate_0 3.85473s linear; animation-iteration-count: infinite;
  }
  
  & [data-node-id="1:6372"] {
    animation: kf_1_6372_background-color_0 3.85473s linear, kf_1_6372_box-shadow_0 3.85473s linear, kf_1_6372_translate_0 3.85473s linear;
    animation-iteration-count: infinite;
  }
  
  @media (prefers-reduced-motion:reduce) {
    .traveller {
      animation: none!important;
    }

    .traveller:not(:last-child) {
      display:none;
    }
    
    .traveller:last-child {
      background: #1735E4;
      translate: 82.105px 0px;
    }
  }
}

@keyframes kf_1_6369_opacity_0 {
  0% {
    opacity: 0;
  }
  12.203% {
    animation-timing-function: ease-out;
    opacity: 0;
  }
  17.366% {
    animation-timing-function: ease-in-out;
    opacity: 0.07;
  }
  49.614% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes kf_1_6369_background-color_0 {
  0% {
    background-color: rgba(255, 255, 255, 0.4);
  }
  12.406% {
    background-color: rgba(255, 255, 255, 0.4);
  }
  49.614% {
    background-color: rgba(77, 102, 229, 0.5);
  }
  100% {
    background-color: rgba(77, 102, 229, 0.5);
  }
}

@keyframes kf_1_6369_translate_0 {
  0% {
    translate: 0px 0px;
  }
  12.406% {
    animation-timing-function: ease-out;
    translate: 0px 0px;
  }
  15.674% {
    animation-timing-function: ease-in-out;
    translate: -11.2px 0px;
  }
  20.344% {
    translate: 0px 0px;
  }
  49.614% {
    translate: 82.105px 0px;
  }
  100% {
    translate: 82.105px 0px;
  }
}

@keyframes kf_1_6370_opacity_0 {
  0% {
    opacity: 0;
  }
  8.473% {
    animation-timing-function: ease-out;
    opacity: 0;
  }
  13.635% {
    animation-timing-function: ease-in-out;
    opacity: 0.13;
  }
  45.905% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes kf_1_6370_background-color_0 {
  0% {
    background-color: rgba(255, 255, 255, 0.4);
  }
  8.672% {
    background-color: rgba(255, 255, 255, 0.4);
  }
  45.905% {
    background-color: rgba(77, 102, 229, 0.5);
  }
  100% {
    background-color: rgba(77, 102, 229, 0.5);
  }
}

@keyframes kf_1_6370_translate_0 {
  0% {
    translate: 0px 0px;
  }
  8.672% {
    animation-timing-function: ease-out;
    translate: 0px 0px;
  }
  11.941% {
    animation-timing-function: ease-in-out;
    translate: -11.2px 0px;
  }
  16.613% {
    translate: 0px 0px;
  }
  45.905% {
    translate: 82.105px 0px;
  }
  100% {
    translate: 82.105px 0px;
  }
}

@keyframes kf_1_6371_opacity_0 {
  0% {
    opacity: 0;
  }
  5.378% {
    animation-timing-function: ease-out;
    opacity: 0;
  }
  10.54% {
    animation-timing-function: ease-in-out;
    opacity: 0.22;
  }
  42.786% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes kf_1_6371_background-color_0 {
  0% {
    background-color: rgba(255, 255, 255, 0.4);
  }
  5.578% {
    background-color: rgba(255, 255, 255, 0.4);
  }
  42.786% {
    background-color: rgba(77, 102, 229, 0.5);
  }
  100% {
    background-color: rgba(77, 102, 229, 0.5);
  }
}

@keyframes kf_1_6371_translate_0 {
  0% {
    translate: 0px 0px;
  }
  5.578% {
    animation-timing-function: ease-out;
    translate: 0px 0px;
  }
  8.846% {
    animation-timing-function: ease-in-out;
    translate: -11.2px 0px;
  }
  13.516% {
    translate: 0px 0px;
  }
  42.786% {
    translate: 82.105px 0px;
  }
  100% {
    translate: 82.105px 0px;
  }
}

@keyframes kf_1_6372_background-color_0 {
  0% {
    background-color: rgba(255, 255, 255, 0.01);
  }
  2.48% {
    background-color: rgba(255, 255, 255, 0.01);
  }
  12.406% {
    background-color: rgba(178, 191, 242, 0.15);
  }
  22.326% {
    background-color: rgba(102, 128, 235, 0.45);
  }
  31.019% {
    background-color: rgba(51, 84, 229, 0.75);
  }
  39.691% {
    background-color: #1735E4;
  }
  100% {
    background-color: #1735E4;
  }
}

@keyframes kf_1_6372_box-shadow_0 {
  0% {
    animation-timing-function: step-end;
    box-shadow: 0px 0px 30px 0px rgba(255, 255, 255, 0.4) inset;
  }
  2.48% {
    box-shadow: 0px 0px 30px 0px rgba(255, 255, 255, 0.4) inset;
  }
  39.691% {
    animation-timing-function: step-end;
    box-shadow: 0px 0px 30px 0px rgba(255, 255, 255, 0) inset;
  }
  100% {
    box-shadow: 0px 0px 30px 0px rgba(255, 255, 255, 0) inset;
  }
}

@keyframes kf_1_6372_translate_0 {
  0% {
    translate: 0px 0px;
  }
  2.48% {
    animation-timing-function: ease-out;
    translate: 0px 0px;
  }
  5.749% {
    animation-timing-function: ease-in-out;
    translate: -14.4px 0px;
  }
  10.418% {
    translate: 0px 0px;
  }
  39.691% {
    translate: 82.105px 0px;
  }
  100% {
    translate: 82.105px 0px;
  }
}

.p-about-value__motion.--03 {
  .assembly {
    width: 239px;
    height: 150px;
    transform: rotate(180deg) scale(0.66);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }

  @media only screen and (min-width: 769px) {
    .assembly {
      transform: rotate(180deg) scale(1);
    }
  }
  
  .row {
    position: absolute;
    display: flex;
    gap: 30px;
    width: 150px;
    height: 30px;
  }
  
  .dot {
    display: block;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%
  }
  
  & [data-node-id="1:6346"] {
    animation: kf_1_6346_translate_0 3.85473s linear;
    animation-iteration-count: infinite;
  }
  
  & [data-node-id="1:6347"],
  & [data-node-id="1:6348"],
  & [data-node-id="1:6349"] {
    animation: kf_1_6347_background-color_0 3.85473s linear, kf_1_6347_box-shadow_0 3.85473s linear;
    animation-iteration-count: infinite;
  }
  
  & [data-node-id="1:6350"] {
    animation: kf_1_6350_translate_0 3.85473s linear;
    animation-iteration-count: infinite;
  }
  
  & [data-node-id="1:6351"],
  & [data-node-id="1:6352"],
  & [data-node-id="1:6353"] {
    animation: kf_1_6351_background-color_0 3.85473s linear, kf_1_6351_box-shadow_0 3.85473s linear;
    animation-iteration-count: infinite;
  }
  
  & [data-node-id="1:6354"] {
    animation: kf_1_6354_translate_0 3.85473s linear;
    animation-iteration-count: infinite;
  }
  
  & [data-node-id="1:6355"],
  & [data-node-id="1:6356"],
  & [data-node-id="1:6357"] {
    animation: kf_1_6355_background-color_0 3.85473s linear, kf_1_6355_box-shadow_0 3.85473s linear;
    animation-iteration-count: infinite;
  }
  
  @media (prefers-reduced-motion:reduce) {
    .row,
    .dot {
      animation: none!important;
    }
    
    .row {
      translate:var(--rest-x) 0;
    }
    
    .row:nth-child(1) {
      --rest-x: 13.27px;
    }
    
    .row:nth-child(2) {
      --rest-x: 44.5px;
    }
    
    .row:nth-child(3) {
      --rest-x: -44.5px;
    }
    
    .dot {
      background: #1735E4;
    }
  }
}

@keyframes kf_1_6346_translate_0 {
  0% {
    translate: 0px 0px;
  }
  5.188% {
    animation-timing-function: cubic-bezier(0.42, 0, 0.3, 1);
    translate: 0px 0px;
  }
  90.798% {
    translate: 13.27px 0px;
  }
  100% {
    translate: 13.27px 0px;
  }
}

@keyframes kf_1_6347_background-color_0 {
  0% {
    background-color: rgba(255, 255, 255, 0.01);
  }
  5.188% {
    animation-timing-function: cubic-bezier(0.42, 0, 0.3, 1);
    background-color: rgba(255, 255, 255, 0.01);
  }
  90.798% {
    background-color: #1735E4;
  }
  100% {
    background-color: #1735E4;
  }
}

@keyframes kf_1_6347_box-shadow_0 {
  0% {
    animation-timing-function: step-end;
    box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.3) inset;
  }
  5.188% {
    animation-timing-function: cubic-bezier(0.42, 0, 0.3, 1);
    box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.3) inset;
  }
  90.798% {
    box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0) inset;
  }
  100% {
    box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0) inset;
  }
}

@keyframes kf_1_6350_translate_0 {
  0% {
    translate: 0px 0px;
  }
  8.82% {
    animation-timing-function: cubic-bezier(0.42, 0, 0.3, 1);
    translate: 0px 0px;
  }
  94.429% {
    translate: 44.5px 0px;
  }
  100% {
    translate: 44.5px 0px;
  }
}

@keyframes kf_1_6351_background-color_0 {
  0% {
    background-color: rgba(255, 255, 255, 0.01);
  }
  8.82% {
    animation-timing-function: cubic-bezier(0.42, 0, 0.3, 1); 
    background-color: rgba(255, 255, 255, 0.01);
  }
  94.429% {
    background-color: #1735E4;
  }
  100% {
    background-color: #1735E4;
  }
}

@keyframes kf_1_6351_box-shadow_0 {
  0% {
    animation-timing-function: step-end;
    box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.3) inset;
  }
  8.82% {
    animation-timing-function: cubic-bezier(0.42, 0, 0.3, 1);
    box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.3) inset;
  }
  94.429% {
    box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0) inset;
  }
  100% {
    box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0) inset;
  }
}

@keyframes kf_1_6354_translate_0 {
  0% {
    translate: 0px 0px;
  }
  12.452% {
    animation-timing-function: cubic-bezier(0.42, 0, 0.3, 1);
    translate: 0px 0px;
  }
  98.061% {
    translate: -44.5px 0px;
  }
  100% {
    translate: -44.5px 0px;
  }
}

@keyframes kf_1_6355_background-color_0 {
  0% {
    background-color: rgba(255, 255, 255, 0.01);
  }
  12.452% {
    animation-timing-function: cubic-bezier(0.42, 0, 0.3, 1);
    background-color: rgba(255, 255, 255, 0.01);
  }
  98.061% {
    background-color: #1735E4;
  }
  100% {
    background-color: #1735E4;
  }
}

@keyframes kf_1_6355_box-shadow_0 {
  0% {
    animation-timing-function: step-end;
    box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.3) inset;
  }
  12.452% {
    animation-timing-function: cubic-bezier(0.42, 0, 0.3, 1);
    box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.3) inset;
  }
  98.061% {
    box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0) inset;
  }
  100% {
    box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0) inset;
  }
}

/* モーション: block に is-view が付いたら、タイトル・テキストと同じタイミングで表示して動かし始める */
.p-about-value__motion > * {
  opacity: 0;
  transition: opacity 1.2s 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.is-view .p-about-value__motion > * {
  opacity: 1;
}

/* is-view が付くまではアニメーションを最初のフレームで止めておく
   （各モーションの animation 指定より後に書くこと） */
.p-about-value__block:not(.is-view) .p-about-value__motion * {
  animation-play-state: paused;
}

.p-about-value__ttlbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.p-about-value__ttl {
  font-family: var(--font-jp-b);
  font-size: 2.2rem;
  line-height: 1.6;
  color: #FFFFFF;
  text-align: center;
  transform: translateY(1.5em);
}

@media only screen and (min-width: 769px) {
  .p-about-value__ttl {
    font-size: 3rem;
    transform: translateY(0);
  }
}

.p-about-value__ttl .line {
  display: block;
  overflow: hidden;
}

.p-about-value__ttl .line .words {
  display: inline-block;
  opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, 100);
  transition: 1.2s 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.is-view .p-about-value__ttl .line .words {
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 0);
}

.p-about-value__txtbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.p-about-value__txt {
  font-family: var(--font-jp-b);
  font-size: 1.4rem;
  line-height: 1.6;
  color: #FFFFFF;
  max-width: calc((250 / 375) * 100vw);
  transform: translateY(-1.5em);
}

@media only screen and (min-width: 769px) {
  .p-about-value__txt {
    font-size: 1.6rem;
    width: calc((380 / 1440) * 100vw);
    transform: translateY(0);
  }
}

.p-about-value__txt .line {
  display: block;
  overflow: hidden;
}

.p-about-value__txt .line .words {
  display: inline-block;
  opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, 100);
  transition: 1.2s 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.is-view .p-about-value__txt .line .words {
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 0);
}


/* -------------------------------------- */
/* p-about-achieve */
/* -------------------------------------- */
.p-about-achieve {
  position: relative;
  background-color: #373737;
  padding: 10.5rem 0 5rem;
  overflow-x: clip;
}

@media only screen and (min-width: 769px) {
  .p-about-achieve {
    padding: 17.5rem 0 8rem;
  }
}

.p-about-achieve__inner {
  width: 100%;
  padding: 0 2rem;
}

@media only screen and (min-width: 769px) {
  .p-about-achieve__inner {
    padding: 0 4.8rem;
  }
}

@media only screen and (min-width: 1025px) {
  .p-about-achieve__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
}

.c-title.--achieve {}

.c-title.--achieve .c-title__en {
  color: #FFFFFF;
}

.c-title.--achieve .c-title__jp {
  color: #FFFFFF;
  position: absolute;
  bottom: calc(100% + 1rem);
}

.p-about-achieve__list {
  margin-top: 5.5rem;
}

@media only screen and (min-width: 1025px) {
  .p-about-achieve__list {
    width: calc((650 / 1440) * 100vw);
    margin-top: 1.5rem;
  }
}

.p-about-achieve__item {
  display: grid;
  gap: 1.5rem 0;
  border-bottom: 1px solid #FFFFFF33;
  padding: 1.5rem 0;
}

@media only screen and (min-width: 1025px) {
  .p-about-achieve__item {
    padding: 1.5rem 0 3rem;
  }
}

.p-about-achieve__item:first-child {
  border-top: 1px solid #FFFFFF33;
}

.p-about-achieve__item-ttl {
  font-family: var(--font-jp-b);
  font-size: 1.3rem;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: #FFFFFF;
}

@media only screen and (min-width: 769px) {
  .p-about-achieve__item-ttl {
    font-size: 1.5rem;
  }
}

.p-about-achieve__item-ttl .line {
  display: block;
  overflow: hidden;
}

.p-about-achieve__item-ttl .line .words {
  display: inline-block;
  opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, 100);
  transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.is-view .p-about-achieve__item-ttl .line .words {
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 0);
}

.p-about-achieve__item-txt {
  font-family: var(--font-en);
  font-weight: 300;
  font-size: 7.4rem;
  line-height: 1;
  color: #FFFFFF;
  letter-spacing: -0.03em;
}

@media only screen and (min-width: 769px) {
  .p-about-achieve__item-txt {
    font-size: 13rem;
  }
}

.p-about-achieve__item-txt .plus {
  font-size: 7.8rem;
  font-weight: 400;
  margin-left: 1.5rem;
}

@media only screen and (min-width: 769px) {
  .p-about-achieve__item-txt .plus {
    font-size: 14rem;
  }
}

.p-about-achieve__item-txt .line {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
}

.p-about-achieve__item-txt .line .words {
  display: inline-block;
  opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, 100);
  transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.is-view .p-about-achieve__item-txt .line .words {
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 0);
}

.p-about-achieve__bottom {
  padding: 0 2rem;
  margin-top: 6rem;
  overflow: hidden;
}

@media only screen and (min-width: 769px) {
  .p-about-achieve__bottom {
    padding: 0 4.8rem;
    margin-top: 13.5rem;
  }
}

.p-about-achieve__bottom-ttl {
  font-size: 1.3rem;
  font-weight: 300;
  color: #FFFFFF;
  margin-bottom: 0.5rem;
  opacity: 0.6;
}

@media only screen and (min-width: 769px) {
  .p-about-achieve__bottom-ttl {
    font-size: 2.2rem;
    margin-bottom: 5.5rem;
  }
}

.p-about-achieve__logo {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  opacity: 0.6;
}

.p-about-achieve__logo.--toleft {
  animation: logos-slide-left 20s linear infinite;
}

.p-about-achieve__logo.--toright {
  animation: logos-slide-right 20s linear infinite;
  margin-top: -3rem;
}

@media only screen and (min-width: 1025px) {
  .p-about-achieve__logo.--toright {
    display: none;
  }
}

@keyframes logos-slide-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes logos-slide-right {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

.p-about-achieve__logo-list {
  display: flex;
  align-items: center;
}

.p-about-achieve__logo-item {
  width: fit-content;
  height: fit-content;
  margin: 0 0;
}

.p-about-achieve__logo-item img {
  width: auto;
  height: 9rem;
  margin: 0 0;
}

@media only screen and (min-width: 769px) {
  .p-about-achieve__logo-item img {
    height: 10rem;
    margin: 0 2.5rem;
  }
}


/* -------------------------------------- */
/* p-about-service */
/* -------------------------------------- */
.p-about-service {
  background-color: #FFFFFF;
  padding: 7rem 0 5rem ;
}

@media only screen and (min-width: 769px) {
  .p-about-service {
    padding: 20rem 0 12rem;
  }
}

.p-about-service__inner {
  width: 100%;
  padding: 0 2rem;
}

@media only screen and (min-width: 769px) {
  .p-about-service__inner {
    padding: 0 4.8rem;
  }
}

.c-title.--service {}

.c-title.--service .c-title__en {}

.c-title.--service .c-title__jp {
  position: absolute;
  top: 0.5rem;
  right: 0;
  text-align: right;
}

@media only screen and (min-width: 769px) {
  .c-title.--service .c-title__jp {
    top: auto;
    bottom: calc(100% + 1rem);
    left: 0;
    right: auto;
    text-align: left;
  }
}

.p-about-service__list {
  counter-reset: service-list;
  margin-top: 5rem;
}

@media only screen and (min-width: 769px) {
  .p-about-service__list {
    margin-top: 12.5rem;
  }
}

/* リストを画面上部から SP 5rem / PC 12.5rem で固定し、固定中のスクロールで1つずつ開く
   （about.js が --service-count に項目数を入れ、::after の高さから進み具合を計算） */
.p-about-service__inner {
  /* 1項目あたりのスクロール量 */
  --service-step: 100svh;
}

.p-about-service__list {
  position: sticky;
  top: 5rem;
}

@media only screen and (min-width: 769px) {
  .p-about-service__list {
    top: 12.5rem;
  }
}

.p-about-service__inner::after {
  content: "";
  display: block;
  height: calc(var(--service-step) * var(--service-count, 4));
}

.p-about-service__item {
  border-top: 1px solid #1C1C1C4D;
}

@media only screen and (min-width: 769px) {
  .p-about-service__item {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media only screen and (min-width: 1025px) {
  .p-about-service__item {
    grid-template-columns: 67% 33%;
  }
}

.p-about-service__ttlbox {
  padding: 0.5rem 0;
}

@media only screen and (min-width: 769px) {
  .p-about-service__ttlbox {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
}

.p-about-service__ttl {
  position: relative;
  font-weight: 300;
  font-size: 3rem;
  letter-spacing: -0.03em;
  padding-left: 6rem;
}

@media only screen and (min-width: 769px) {
  .p-about-service__ttl {
    font-size: 4.8rem;
    line-height: 1.9;
    padding-left: 9rem;
  }
}

@media only screen and (min-width: 1025px) {
  .p-about-service__ttl {
    padding-left: 14rem;
  }
}

.p-about-service__ttl::before {
  counter-increment: service-list;
  content: counter(service-list, decimal-leading-zero);
  font-size: 3rem;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin-block: auto;
}

@media only screen and (min-width: 769px) {
  .p-about-service__ttl::before {
    font-size: 4.8rem;
  }
}

.p-about-service__copybox {
  padding: 1.8rem 0 1.1rem;
}

@media only screen and (min-width: 769px) {
  .p-about-service__copybox {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    display: flex;
    align-items: center;
  }
}

.p-about-service__copy {
  font-family: var(--font-jp-b);
  font-size: 1.8rem;
  line-height: 1.4;
  font-feature-settings: normal;
}

@media only screen and (min-width: 769px) {
  .p-about-service__copy {
    font-size: 2.4rem;
  }
}

.p-about-service__txtbox {
  padding: 0 0 3rem;
}

@media only screen and (min-width: 769px) {
  .p-about-service__txtbox {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    padding: 0 0 0;
  }
}

/* スクロールで1つずつ開く（about.js で is-open と --panel-h を付与）
   閉じているときは高さ・上下の余白とも 0。copybox は SP のみ */
.p-about-service__txtbox {
  overflow: hidden;
  transition:
    height 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.p-about-service__txtbox:not(.is-open) {
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.p-about-service__txtbox.is-open {
  height: var(--panel-h, auto);
}

@media only screen and (max-width: 768px) {
  .p-about-service__copybox {
    overflow: hidden;
    transition:
      height 0.6s cubic-bezier(0.22, 1, 0.36, 1),
      padding 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .p-about-service__copybox:not(.is-open) {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .p-about-service__copybox.is-open {
    height: var(--panel-h, auto);
  }
}

.p-about-service__txt {
  font-family: var(--font-jp-b);
  font-size: 1.4rem;
  line-height: 1.8;
  font-feature-settings: normal;
}

@media only screen and (min-width: 769px) {
  .p-about-service__txt {
    line-height: 2;
    padding: 0rem 3rem 5rem 0;;
  }
}

@media only screen and (min-width: 1025px) {
  .p-about-service__txt {
    padding: 0rem 9rem 7rem 0;;
  }
}


/* -------------------------------------- */
.p-about .c-contact .c-contact__logo {
  display: none;
}

@media only screen and (min-width: 1025px) {
  .p-about .c-contact {
    padding-bottom: 5rem;
  }

  .p-about .c-contact .c-contact__photo-wrap,
  .p-about .c-contact .c-contact__btn-wrap {
    top: 19rem;
  }
  
  .p-about .c-contact .c-contact__copy {
    margin-top: 8rem;
  }

  .p-about .c-contact .c-contact__txt {
    transform: translateY(-35rem);
  }
}