/* aboutページ専用CSS */
.p-about.l-main {
  padding-block: 0;
  min-height: 100dvh;
  position: relative;
  z-index: 1;
}
.l-footer {
  position: relative;
  z-index: 2;
}

.p-about-mainvisual {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  z-index: -1;
}
.p-about-mainvisual__img {
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease;

  img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
  }
}
.p-about-mainvisual__logo {
  width: 265px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  opacity: 1;
} 
@media screen and (max-width: 1023px) {
  .p-about-mainvisual__logo {
    width: 160px;
  }
}

/* ロゴの透明度制御用クラス */
.p-about-mainvisual__logo.fade-out {
  opacity: 0;
}

.p-about-content {
  margin-block-start: 100dvh;
  /* background-color: var(--ys-color-gray); */
}

/*
*message
*/
.p-about-message {
}

.p-about-message__content {
  width: fit-content;
  position: relative;
  left: calc(50% + 70px);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
@media screen and (max-width: 1023px) {
  .p-about-message__content {
    left: unset;
    padding-inline: 20px;
  }
}

.p-about-message__content2 {
  /* background-color: #fff; */
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 100px;
  min-height: 100dvh;
  padding-inline: 60px;
}
@media screen and (max-width: 1023px) {
  .p-about-message__content2 {
    grid-template-columns: 1fr;
    padding-inline: 20px;
    padding-block: 60px;
    gap: 40px;

  }
}

.p-about-message__title {
  font-size: 47px;
  line-height: 1.3;
  letter-spacing: 0.06em;
  margin-block-end: 20px;
}
@media screen and (max-width: 1023px) {
  .p-about-message__title {
    font-size: 36px;
  }
}

.p-about-message__text1 {
  font-size: 16px;
  font-family: var(--ys-font-family-ja);
  line-height: 1.8;
  letter-spacing: 0.08em;
  margin-block-end: 60px;
  font-weight: 700;
}
@media screen and (max-width: 1023px) {
  .p-about-message__text1 {
    font-size: 12px;
  }
}

.p-about-message__text2 {
  font-size: 16px;
  font-family: var(--ys-font-family-ja);
  line-height: 1.8;
  letter-spacing: 0.08em;
  margin-block-end: 24px;
  font-weight: 700;
}
@media screen and (max-width: 1023px) {
  .p-about-message__text2 {
    font-size: 12px;
    margin-block-end: 0;
  }
}

.p-about-message__link {
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.p-about-message__image1 {
}
@media screen and (max-width: 1023px) {
  .p-about-message__image1 {
    width: 240px;
    aspect-ratio: 240 / 370;
    margin-inline: auto;
    overflow: hidden;
    img {
      width: 300px;
      height: auto;
      object-fit: cover;
      object-position: center;
      translate: -40px -10px;
    }
  }
}

/*
*produce
*/
.p-about-produce {
  container-type: inline-size;
  background-color: #fff;
  position: relative;
  z-index: 1;
  padding-block-start: 60px;

}
@media screen and (max-width: 1023px) {
  .p-about-produce {

  }
}

.p-about__title {
  position: sticky;
  z-index: 10;
  top: 120px;
  left: 0;
  width: fit-content;
  font-size: 43px;
  line-height: 1;
  letter-spacing: 0.06em;
  font-family: var(--ys-font-family-en);
  font-style: italic;
  color: var(--ys-color-text);
  rotate: 90deg;
  translate: 100px 50%;
  transform-origin: left;
  margin-left: 30px;
}
@media screen and (max-width: 1023px) {
  .p-about__title {
    font-size: 24px;
    translate: 0 0;
  }
}

.p-about-produce__inner {

}

.p-about-produce__image {
  width: calc(1200 / 1440 * 100cqi);
  margin-inline: auto 0;
  position: relative;

  &::before {
    content: "";
    width: 440px;
    height: 673px;
    background-color: #f3f9f9;
    position: absolute;
    top: 0;
    left: calc(120 / 1440 * 100cqi);
    z-index: -1;
  }
}
@media screen and (max-width: 1023px) {
  .p-about-produce__image {
    position: sticky;
    top: 60px;
    left: 0;
    aspect-ratio: 300 / 600;
    width: calc(300 / 375 * 100cqi);
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    &::before {
      width: calc(190 / 360 * 100cqi);
      height: calc(290 / 360 * 100cqi);
      top: 50px;
    }
  }
}

.p-about-produce__content {
  translate: 0 -200px;
  margin-left: calc(200 / 1440 * 100cqi);
}
@media screen and (max-width: 1023px) {
  .p-about-produce__content {
    translate: 0 0;
    margin-left: 0;
  }
}

.p-about-produce__list {
  display: flex;
  gap: 20px;
}
@media screen and (max-width: 1023px) {
  .p-about-produce__list {
    flex-direction: column;
  }
}

.p-about-produce__item {
  flex: 0 1 320px;
  width: 320px;
  max-width: 100%;
  background-color: #fff;
  padding-block: 50px 70px;
  padding-inline: 45px;
  position: relative;
}
@media screen and (max-width: 1023px) {
  .p-about-produce__item {
    width: calc(100% - 30px);
    padding-block: 20px 30px;
    padding-inline: 70px 10px;
    flex: 0 0 auto;
  }
}

.p-about-produce__item-title-en {
  rotate: 90deg;
  translate: 0.6em 0;
  font-size: 35px;
  line-height: 1;
  letter-spacing: 0.26em;
  font-family: var(--ys-font-family-ja);
  position: absolute;
  top: 0;
  left: 0;
  color: var(--ys-color-gray);
  transform-origin: left top;
}
@media screen and (max-width: 1023px) {
  .p-about-produce__item-title-en {
    font-size: 16px;
    top: 20px;
    left: 45px;
  }
}

.p-about-prodece__item-content {

}

.p-about-produce__item-title {
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  font-family: var(--ys-font-family-ja);
  font-weight: 700;
  margin-block-end: 20px;
}
@media screen and (max-width: 1023px) {
  .p-about-produce__item-title {
    font-size: 12px;
    line-height: 1.5;
  }
}

.p-about-produce__item-text {
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.22em;
  font-family: var(--ys-font-family-ja-sub);
}
@media screen and (max-width: 1023px) {
  .p-about-produce__item-text {
    font-size: 10px;
    line-height: 1.6;
  }
}

/*
*service
*/
.p-about-service {
  padding-block: 50px 100px;
  background-color: #fff;
  container-type: inline-size;
}

.p-about__title {

}

.p-about-service__inner {
  margin-inline: calc(120 / 1440 * 100cqi);
}
@media screen and (max-width: 1023px) {
  .p-about-service__inner {
    margin-inline: 0;
  }
}

.p-about-service__content {
  padding-top: 200px;
}

.p-about-service__list {
  display: flex;
  flex-direction: column;
  gap: 100px;
}
@media screen and (max-width: 1023px) {
  .p-about-service__list {
    gap: 0;
    position: relative;
    z-index: 0;

    &::before {
      content: "";
      width: calc(100% - 30 / 375 * 100cqi);
      height: 80%;
      position: absolute;
      right: 0;
      bottom: 0;
      background-color: #fbfbed;
      z-index: -1;
    }
  }
}

.p-about-service__item {
  padding-inline: 100px 0;
  background-image: linear-gradient(to right, #fbfbed 700px, transparent 700px);
  padding-block: 50px;
  display: flex;
  gap: 80px;
  justify-content: flex-start;
  align-items: center;
  --p-about-service__item-image-width: 580px;
  --p-about-service__item-image-translate: -30px 0;

  &:nth-child(2n) {
    padding-inline: 0 100px;
    flex-direction: row-reverse;
    background-image: linear-gradient(to left, #fbfbed 700px, transparent 700px);
    --p-about-service__item-image-width: 670px;
    --p-about-service__item-image-translate: -120px 0;
  }
}
@media screen and (max-width: 1023px) {
  .p-about-service__item {
    flex-direction: column-reverse;
    padding-block:30px;
    padding-inline: 0;
    gap: 30px;
    --p-about-service__item-content-translate-y: 0;
    --p-about-service__item-image-translate: calc(30 / 375 * 100cqi) var(--p-about-service__item-content-translate-y);
    background-image: none;
    &:nth-child(2n) {
      flex-direction: column-reverse;
      padding-inline: 0;
      --p-about-service__item-image-translate: calc(-1 * 30 / 375 * 100cqi) var(--p-about-service__item-content-translate-y);
      background-image: none;
    }
    
  }
}

.p-about-service__item-content {
  width: 100%;
  max-width: 340px;
}
@media screen and (max-width: 1023px) {
  .p-about-service__item-content {
    width: auto;
    max-width: 100%;
    margin-inline: calc(55 / 375 * 100cqi) calc(35 / 375 * 100cqi);
    translate: 0 var(--p-about-service__item-content-translate-y);
  }
}

.p-about-service__item-title {
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  font-family: var(--ys-font-family-ja);
  font-weight: 700;
  margin-block-end: 20px;
}
@media screen and (max-width: 1023px) {
  .p-about-service__item-title {
    font-size: 12px;
    letter-spacing: 0.224;
    margin-block-end: 10px;
  }
}

.p-about-service__item-text {
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.22em;
  font-family: var(--ys-font-family-ja-sub);
}
@media screen and (max-width: 1023px) {
  .p-about-service__item-text {
    font-size: 11px;
    letter-spacing: 0.07em;
  }
}

.p-about-service__item-image {
  width: 530px;
  max-width: 100%;
  aspect-ratio: 530 / 350;
  flex: 0 0 530px;
  overflow: hidden;

  img {
    width: var(--p-about-service__item-image-width);
    height: auto;
    object-fit: cover;
    object-position: center;
    translate: var(--p-about-service__item-image-translate);
  }
}
@media screen and (max-width: 1023px) {
  .p-about-service__item-image {
    width: calc(315 / 375 * 100cqi);
    aspect-ratio: 315 / 220;
    flex: 0  0 auto;
    translate: var(--p-about-service__item-image-translate);
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      translate: 0 0;
    }
  }
}


/*
*price
*/
.p-about-price {
  background-color: #fff;
  padding-block: 80px;
  container-type: inline-size;
}

.p-about-price__inner {
  margin-left: calc(230 / 1440 * 100cqi);

}

.p-about-price__content {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 100px;
}
@media screen and (max-width: 1023px) {
  .p-about-price__content {
    flex-direction: column-reverse;
    gap: 0;
    align-items: flex-start;
  }
}

.p-about-price__text {
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.22em;
  font-family: var(--ys-font-family-ja-sub);
  flex: 0 0 auto;
}
@media screen and (max-width: 1023px) {
  .p-about-price__text {
    font-size: 11px;
    letter-spacing: 0.07em;
    background-color: #fff;
    padding-top: 20px;
    padding-right: 10px;
    width: 80%;
    position: relative;
    z-index: 1;

  }
}

.p-about-price__image {
  flex: 1 1 100%;
  aspect-ratio: 670 / 770;
  overflow: hidden;

  img {
    width: calc(743 / 1440 * 100cqi);
    height: auto;
    object-fit: cover;
    object-position: center bottom;
    translate: 0 -220px;
  }
}
@media screen and (max-width: 1023px) {
  .p-about-price__image {
    width: 100%;
    aspect-ratio: 315 / 450;
    flex: 1 1 auto;
    margin-bottom: -120px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center bottom;
    }
  }
}

/*
*flow
*/
.p-about-flow {
  background-color: #fff;
  padding-block: 300px 500px;
  container-type: inline-size;
}
@media screen and (max-width: 1023px) {
  .p-about-flow {
    padding-block: 300px 100px ;
  }
}

.p-about-flow__inner {
  margin-left: calc(230 / 1440 * 100cqi);
}
@media screen and (max-width: 1023px) {
  .p-about-flow__inner {
    margin-left: 0;
  }
}

.p-about-flow__content {

}

.p-about-flow__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 100px;
}
@media screen and (max-width: 1023px) {
  .p-about-flow__list {
    gap: 8px;
  }
}

.p-about-flow__item {
  position: relative;
  width: 100%;

  &:nth-child(2n) {
    margin-left: 80px;
    width: calc(100% - 80px);
  }
}
@media screen and (max-width: 1023px) {
  .p-about-flow__item {
    margin-left: 0;
    width: 100%;

    position: relative;
    &:nth-child(2n) {
      margin-left: 0;
      width: 100%;
    }
  }
}

.p-about-flow__item-content {
  max-width: 390px;
}
@media screen and (max-width: 1023px) {
  .p-about-flow__item-content {
    width: calc(100% - 30 / 375 * 100cqi);
    max-width: 100%;
    background-color: #fff;
    padding-block: 30px;
    padding-inline: 60px 15px;
    position: relative;
    z-index: 1;
  }
}

.p-about-flow__item-number {
  font-size: 90px;
  line-height: 1;
  letter-spacing: 0.06em;
  font-family: var(--ys-font-family-en-sub);
  font-weight: 900;
  margin-block-end: 20px;
  color: #f3f5f6;
  position: relative;

  &::before {
    content: "";
    width: 32px;
    height: 1px;
    background-color: var(--ys-color-text);
    position: absolute;
    left: -10px;
    bottom: 10px;
  }
}
@media screen and (max-width: 1023px) {
  .p-about-flow__item-number {
    font-size: 34px;
    margin-block-end: 10px;
    position: absolute;
    top: 15px;
    left: 45px;
    &::before {
      content: none;
    }
  }
}

.p-about-flow__item-title {
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  font-family: var(--ys-font-family-ja);
  font-weight: 700;
  margin-block-end: 15px;
  padding-bottom: 25px;
  position: relative;

  &::before {
    content: attr(data-en);
    color: #bdccd4;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.06em;
    font-family: var(--ys-font-family-en-sub);
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
@media screen and (max-width: 1023px) {
  .p-about-flow__item-title {
    font-size: 12px;
    letter-spacing: 0.224;
    margin-block-end: 15px;
    padding-bottom: 20px;

    &::before {
      font-size: 10px;
    }
  }
}

.p-about-flow__item-text {
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.1em;
  font-family: var(--ys-font-family-ja-sub);
  /* スライドインアニメーション用クラスを適用（遅延付き） */
}
@media screen and (max-width: 1023px) {
  .p-about-flow__item-text {
    font-size: 11px;
    letter-spacing: 0.07em;
    text-align: justify;
  }
}

.p-about-flow__item-image {
  position: absolute;
  overflow: hidden;

}
@media screen and (max-width: 1023px) {
  .p-about-flow__item-image {
    z-index: 0;
  }
}

.p-about-flow__item:nth-child(1) .p-about-flow__item-image {
  width: 324px;
  height: 215px;
  top: 0;
  right: 100px;
  img {
    width: 358px;
    translate: -20px 0;
  }
}
.p-about-flow__item:nth-child(2) .p-about-flow__item-image {
  width: 324px;
  height: 215px;
  top: -170px;
  right: 200px;
  img {
    width: 349px;
    translate: -20px 0;
  }
}
.p-about-flow__item:nth-child(3) .p-about-flow__item-image {
  width: 324px;
  height: 486px;
  top: 0;
  right: 160px;
  img {
    width: 361px;
  }
}

.p-about-flow__item:nth-child(4) .p-about-flow__item-image {
  width: 750px;
  height: 422px;
  top: calc(100% + 100px);
  right: 60px;
  img {
    width: 798px;
    translate: -40px 0;
  }
}

@media screen and (max-width: 1023px) {
  .p-about-flow__item:nth-child(n) .p-about-flow__item-image {
    width: calc(315 / 375 * 100cqi);
    height: auto;
    top: -200px;
    right: 0;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      translate: 0 0;
    }
  }
  .p-about-flow__item:nth-child(3) .p-about-flow__item-image {
    top: -180px;
  }
  .p-about-flow__item:nth-child(4) .p-about-flow__item-image {
    top: 120px;
  }
}