/* front-page.css - フロントページ専用スタイル */
/*
* Project - Information Section
*/
.p-mainvisual {
  background-image: url(../image/p-mainvisual-bg.webp);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  padding-block: 66px 88px;
  height: 100dvh;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-width: 0;
    border-style: solid;
    border-color: #fff;
    z-index: 1;
    animation: borderAppear 1s cubic-bezier(.18,.94,.61,.93) 1s forwards;
  }
}
@media screen and (max-width: 1023px) {
  .p-mainvisual {
    background-position: right -260px bottom -60px;
    background-size: auto 130%;
    padding-block: 60px 60px;
    height: 100dvh;
    max-height: 530px;
    &::before {
      animation: borderAppear-sp 1s cubic-bezier(.18,.94,.61,.93) 1s forwards;
    }
  }
}

@keyframes borderAppear {
  from {
    border-width: 0;
  }
  to {
    border-width: 66px 88px 66px 88px;
  }
}

@keyframes borderAppear-sp {

  from {
    border-width: 0;
  }
  to {
    border-width: 10px;
  }
}
@keyframes waveRotate {
  from {
    rotate: 60deg;
    top: -90%;
  }
  to {
    rotate: 150deg;
    top: -330%;
  }
}
.p-mainvisual__logo {
  width: 236px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
@media screen and (max-width: 1023px) {
  .p-mainvisual__logo {
    width: 160px;
  }
}

.p-mainvisual__text-area {
  position: absolute;
  bottom: 66px;
  left: 66px;
  z-index: 2;
}

@media screen and (max-width: 1023px) {
  .p-mainvisual__text-area {
    display: none;
  }
}

.p-mainvisual__title-en {
  font-size: 60px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 1.5s ease, transform 1.5s ease;
}

.p-mainvisual__title-ja {
  font-size: 15px;
  font-family: var(--ys-font-family-ja);
  line-height: 2;
  letter-spacing: 0;
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 1.5s ease, transform 1.5s ease, letter-spacing 1.5s ease;
}


/* メインビジュアルテキストアニメーション完了時 */
.p-mainvisual__title-en.fade-in-slide {
  opacity: 1;
  transform: translateX(0);
}

.p-mainvisual__title-ja.fade-in-slide {
  opacity: 1;
  transform: translateX(0);
  letter-spacing: 0.08em;
}


.p-sec01 {
  background-image: url(../image/p-sec01-bg.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding-block: 220px 140px;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 1023px) {
  .p-sec01 {
    background-image: url(../image/p-sec01-bg-sp.webp);
    padding-block: 0;
  }
}

.p-sec01__content {
  width: fit-content;
  margin-inline: auto 0;
}
@media screen and (max-width: 1023px) {
  .p-sec01__content {
    padding-inline: 20px;
    translate: 0 -50px;
    margin-inline: 0 auto;
  }
}

/* フェードインアニメーション用の共通クラス */
.fade-in-element {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.p-sec01__title {
  font-size: 47px;
  line-height: 1.3;
  letter-spacing: 0.06em;
  margin-block-end: 60px;
  text-shadow:
  0 2px 8px rgba(255,255,255,0.8),
  0 0 4px #fff,
  0 0 4px #fff;
}
@media screen and (max-width: 1023px) {
  .p-sec01__title {
    font-size: 36px;
    margin-block-end: 20px;
  }
}

.p-sec01__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;
  text-shadow:
  0 2px 8px rgba(255,255,255,0.8),
  0 0 4px #fff,
  0 0 4px #fff;
}
@media screen and (max-width: 1023px) {
  .p-sec01__text1 {
    margin-block-end: 40px;
    font-size: 14px;
  }
}

.p-sec01__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;
  text-shadow:
  0 2px 8px rgba(255,255,255,0.8),
  0 0 4px #fff,
  0 0 4px #fff;
}
@media screen and (max-width: 1023px) {
  .p-sec01__text2 {
    font-size: 14px;
  }
}

.p-sec01__link {
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  font-weight: 700;
}
@media screen and (max-width: 1023px) {
  .p-sec01__link {
    width: 76px;
    height: 76px;
    background-color: #fffa;
    border-radius: 50%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-inline: auto;
  }
}

/* フェードインアニメーション用のクラス */
.fade-in-up {
  opacity: 1 !important;
  transform: translateY(0) !important;
}


.p-sec02 {
  padding-block: 190px 60px;
}
@media screen and (max-width: 1023px) {
  .p-sec02 {
    padding-block: 60px 60px;
  }
}

.p-sec02__content {

}

.p-sec02__title-area {
  grid-column: 1;
  grid-row: 1;
  padding-block-start: 80px;
}
@media screen and (max-width: 1023px) {
  .p-sec02__title-area {
    padding-block-start: 0;
    grid-column: 1;
    grid-row: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
}

.p-sec02__item {
  display: grid;
  grid-template-columns: 440px 1fr;
  grid-template-rows: auto auto;
  overflow: hidden;
}

@media screen and (max-width: 1023px) {
  .p-sec02__item {
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto;
    padding-inline: 20px;
    gap: 20px;
    position: relative;

    &::after {
      content: "";
      background-image: url(../image/c-case__item-after.webp);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      width: 20px;
      height: 10px;
      bottom: 40px;
      right: 40px;
      position: absolute;
    }
  }
}

.p-sec02__text-area {
  grid-column: 1;
  grid-row: 2;
}
@media screen and (max-width: 1023px) {
  .p-sec02__text-area {
    grid-column: 1;
    grid-row: 3;
  }
}

.p-sec02__post-title {
  font-size: 52px;
  line-height: 1.3;
  letter-spacing: 0.06em;
  margin-block-end: 60px;
  width: 60%;
  text-wrap: wrap;
  text-shadow:
  0 2px 8px rgba(255,255,255,0.8),
  0 0 4px #fff,
  0 0 4px #fff;
}
@media screen and (max-width: 1023px) {
  .p-sec02__post-title {
    font-size: 24px;
    width: 100%;
    margin-block-end: 0;
  }
}

.p-sec02__text1 {
  font-size: 16px;
  font-family: var(--ys-font-family-ja);
  line-height: 1.5;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-block-end: 30px;
  width: 55%;
  text-wrap: wrap;
  /* 適切な改行設定 */
  word-break: keep-all;
  overflow-wrap: break-word;
  hyphens: auto;
  text-shadow:
  0 2px 8px rgba(255,255,255,0.8),
  0 0 4px #fff,
  0 0 4px #fff;
}
@media screen and (max-width: 1023px) {
  .p-sec02__text1 {
    font-size: 10px;
    width: 100%;
    margin-block-end: 20px;
  }
}

.p-sec02__text2 {
  font-size: 12px;
  font-family: var(--ys-font-family-ja);
  line-height: 2;
  letter-spacing: 0.08em;
  font-weight: 700;
  /* 2行制限設定 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-shadow:
  0 2px 8px rgba(255,255,255,0.8),
  0 0 4px #fff,
  0 0 4px #fff;
}
@media screen and (max-width: 1023px) {
  .p-sec02__text2 {
    display: none;
  }
}

.p-sec02__slider-indicator {
  width: 90px;
  height: 1px;
  background-color: #e6e9ee;
  position: relative;
  margin-block-start: 30px;
  
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #033752;
  }
  
  &.active::before {
    animation: progressBar 9s linear infinite;
  }
}

@keyframes progressBar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

.p-sec02__img-area {
  grid-column: 2;
  grid-row: 1 / 3;
  position: relative;
  aspect-ratio: 600 / 1180;
  width: 100%;
  overflow: hidden;

  .p-sec02__slideshow-img {
    position: absolute;
    top: 0;
    right: 0;
    height: auto;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 600 / 1180;
    object-fit: cover;
    object-position: center;
    transition: transform 1s ease, opacity 0.8s ease;
    opacity: 0;

    &.active {
      opacity: 1;
    }
  }
}
@media screen and (max-width: 1023px) {
  .p-sec02__img-area {
    grid-column: 1;
    grid-row: 2;
    aspect-ratio: 324 / 418;

    .p-sec02__slideshow-img {
      aspect-ratio: 324 / 418;
      width: 100%;
      max-width: 100%;
    }
  }
}

.p-sec02__item:hover .p-sec02__img-area .p-sec02__slideshow-img {
  transform: scale(1.02);
}


.p-sec03 {
  padding-block: 0 190px;
}
@media screen and (max-width: 1023px) {
  .p-sec03 {
    padding-block: 0 60px;
  }
}

.p-sec03__content-area {
  display: flex;
  flex-direction: column;
  gap: 150px;
  align-items: center;
}
@media screen and (max-width: 1023px) {
  .p-sec03__content-area {
    gap: 30px;
    padding-inline: 30px;
  }
}

.p-sec04 {
  padding-block: 0 120px;
}
@media screen and (max-width: 1023px) {
  .p-sec04 {
    padding-block: 0 60px;
  }
}
.p-sec04__content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
@media screen and (max-width: 1023px) {
  .p-sec04__content {
    flex-direction: column;
    align-items: center;
    padding-inline: 20px;
  }
}

.p-sec04__title-area {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media screen and (max-width: 1023px) {
  .p-sec04__title-area {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    width: 100%;
  }
}

.p-sec04__content-area {
  width: 100%;
  max-width: 860px;
  /* padding-inline: 20px; */
}



.p-sec05 {
  padding-block: 0 150px;
}
@media screen and (max-width: 1023px) {
  .p-sec05 {
    padding-block: 0 60px;
  }
}

.p-sec05__content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
@media screen and (max-width: 1023px) {
  .p-sec05__content {
    flex-direction: column;
    align-items: center;
    padding-inline: 20px;
  }
}

.p-sec05__title-area {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media screen and (max-width: 1023px) {
  .p-sec05__title-area {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
  }
}

.p-sec05__content-area {
  /* informationコンテンツエリア */
  width: 100%;
  max-width: 700px;
}