/**
 * Project - Front page
 * トップページ固有スタイル
 *
 * 分離済みコンポーネント（別ファイル参照）:
 *   - achievement-logos-slider.css : 実績ロゴスライダー
 *   - post-card.css                : 投稿カード・一覧
 *   - media-slider.css             : ピックアップスライダー
 */

/* main visual */
.p-mainVisual {
  color: var(--color-text-light);
  padding-block: 134px 347px;
  position: relative;
  min-height: 60vh;

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
      252deg,
      rgba(0, 0, 0, 0) 26.96%,
      rgba(0, 0, 0, 0.5) 63.64%
    );
  }
}

.p-mainVisual > .l-container {
  position: relative;
  z-index: 1;
}
.p-mainVisualVideo {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.p-mainVisualCopy {
  font-family: var(--font-heading);
  display: flex;
  flex-direction: column;

  .upper {
    font-size: min(8.33vw, 120px);
    font-weight: 400;
    line-height: 1.4;

    @media screen and (max-width: 767px) {
      font-size: 18.91vw;
    }
  }

  .bottom {
    width: min(65vw, 936px);

    @media screen and (max-width: 767px) {
      width: 76.37vw;
    }

    img {
      width: 100%;
    }
  }
}
.p-mainVisualText {
  line-height: 1.7;
  letter-spacing: 0.02em;
  margin-top: 28px;
}
.p-mainVisualGrad {
  width: 100%;
  padding-block: 40px;
  background: linear-gradient(
    270deg,
    rgba(131, 163, 200, 0.6) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
  backdrop-filter: blur(2px);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;

  @media screen and (max-width: 767px) {
    padding-block: 20px 26px;
  }
}
.p-mainVisualSubText {
  font-family: var(--font-heading);
  font-size: 48px;
  line-height: 1.4;
  font-feature-settings: "kern" 1, "palt" 1, "pkna" 1;

  & > span:first-child {
    display: block;
  }
  & > span:nth-child(2),
  & > span:nth-child(3) {
    display: inline-block;
  }

  @media screen and (max-width: 767px) {
    font-size: 28px;
  }
}

/* about us */
.p-aboutSection {
  background-image: url("../../../images/bg_about.png");
  background-size: cover;
  background-position: top center;

  &.l-sectionPrimary {
    padding-bottom: 40px;
  }
}
.p-aboutHeadingWrapper {
  margin-bottom: 40px;
}
.p-aboutMainText {
  font-size: 48px;
  font-family: var(--font-heading);
  line-height: 1.4;
  margin-bottom: 25px;

  @media screen and (max-width: 767px) {
    font-size: 24px;
    margin-bottom: 32px;
  }

  span {
    display: block;
  }
}
.p-aboutContents {
  display: grid;
  grid-template-columns: 1fr 56.67%;
  gap: 20px;
  @media screen and (max-width: 979px) {
    gap: 0;
  }
  @media screen and (max-width: 767px) {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.p-aboutSmallHeading {
  font-size: 20px;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
}
.p-aboutBodyText {
  line-height: 1.7;
  letter-spacing: 0.02em;
}
.p-aboutImage {
  margin-top: -1.5rem;

  img {
    width: 100%;
  }
}
.p-buttonWrapper {
  margin-top: 40px;
}
/* 装飾テキスト：右→左に無限スライド（改行なし） */
.p-aboutSlideTextWrap {
  padding-bottom: 1em;
  overflow: hidden;
  margin-top: 34px;
}
.p-aboutSlideText__track {
  display: flex;
  width: max-content;
  animation: p-aboutSlideText 40s linear infinite;
  animation-play-state: paused;

  &.is-animated {
    animation-play-state: running;
  }
}
.p-aboutSlideText {
  flex-shrink: 0;
  display: block;
  height: 90px;
  width: auto;
  padding-right: 4rem; /* 繰り返し間の余白 */

  @media screen and (max-width: 767px) {
    height: 48px;
  }
}
@keyframes p-aboutSlideText {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* service */
.p-serviceSection {
  &.l-sectionPrimary {
    padding-bottom: 90px;
    @media screen and (max-width: 767px) {
      padding-bottom: 2rem;
    }
  }
}
.p-serviceHeadingWrapper {
  margin-bottom: 40px;
}
.p-serviceItem {
  background-color: var(--color-bg-lightGray);
  border-top: 1px solid;
  padding-block: 2rem;
  position: sticky;
  left: 0;
  transition: padding-top 0.25s ease;
  @media screen and (max-width: 767px) {
    position: relative;
  }

  /* =====================================================
   * サービスアイテム スティッキーアニメーション
   *
   * 【現在: 2枚構成 --01 / --02】
   * 4枚に戻す際は以下を復元:
   *   --02: margin-bottom: 296px を追加
   *   --03, --04 のブロックをコメントアウトから戻す
   * ===================================================== */
  &.--01 {
    top: 110px;
    margin-bottom: 60px;
    /* margin-bottom: 273px; */
    @media screen and (max-width: 767px) {
      top: auto;
      margin-bottom: 0;
    }
  }
  &.--02 {
    top: 191px;
    /* 4枚時: margin-bottom: 296px; ← 2枚時は最終アイテムのため不要 */
    @media screen and (max-width: 767px) {
      top: auto;
      margin-bottom: 0;
    }
  }
  /* 4枚時: 以下ブロックを有効化
  &.--03 {
    top: 272px;
    margin-bottom: 216px;
    @media screen and (max-width: 767px) {
      top: auto;
      margin-bottom: 0;
    }
  }
  &.--04 {
    top: 449px;
    @media screen and (max-width: 767px) {
      top: auto;
    }
  }
  */

  &:last-child {
    @media screen and (max-width: 767px) {
      margin-bottom: 0;
    }
  }

  .c-buttonSecondary {
    min-width: 260px;

    @media screen and (max-width: 767px) {
      width: 100%;
      max-width: 370px;
    }
  }
}
.p-serviceItemHeadingWrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 2rem;
  border-bottom: 1px solid;
  margin-bottom: 1.25rem;
  transition: padding-bottom 0.25s ease;

  @media screen and (max-width: 767px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  & > p {
    @media screen and (max-width: 767px) {
      width: 100%;
    }
  }
}
.p-serviceHeading {
  font-size: 24px;
  letter-spacing: 0.01em;
}
.p-serviceItemContents {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;

  @media screen and (max-width: 767px) {
    grid-template-columns: 1fr;
  }
}
.p-serviceItemIntroduction {
  line-height: 1.7;
  letter-spacing: 0.02em;
  margin-bottom: 1.5rem;
}
.p-serviceItemImage {
  img {
    width: 100%;
  }
}
/* 2カラムの高さに合わせ、見出しを除いた残りを2枚のカードで等分 */
.p-serviceItemDetails {
  display: flex;
  flex-direction: column;
  min-height: 0; /* grid 子要素で flex が縮むように */
}

.p-serviceItemDetailHeading {
  flex-shrink: 0;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  padding-left: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  @media screen and (max-width: 767px) {
    padding-left: 0.5rem;
  }

  &::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    background-image: url("../../../images/icon_information_black.svg");
    background-size: contain;
    background-position: center;
  }
}

.p-serviceDetailCard {
  flex: 0 0 auto; /* 1件のとき高さが伸びないよう grow を無効化 */
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  gap: 0.5rem;
  position: relative;
  cursor: pointer;
  transition: background-color 0.25s ease;
  @media screen and (max-width: 767px) {
    padding-inline: 0.5rem;
  }

  &:has(+ .p-serviceDetailCard) {
    border-bottom: 1px solid;
  }

  &:hover {
    background-color: var(--color-bg-white);
  }
}
.p-serviceDetailCardTitle {
  font-size: 22px;
  letter-spacing: 0.02em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.p-serviceDetailCardText {
  line-height: 1.7;
  letter-spacing: 0.02em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.p-serviceDetailCardLabels {
  order: -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.p-serviceDetailCardFooter {
  margin-top: auto;
}
.p-serviceDetailCardLink {
  font-weight: 700;
  line-height: 1;
  padding-block: 0.5rem;
  padding-right: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;

  /* 矢印アイコン */
  &::before {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-image: url("../../../images/icon_arrow_right_black.svg");
    background-size: contain;
    background-position: center;
    order: 1;
  }

  /* カード全体をリンク範囲にする stretched link */
  &::after {
    content: "";
    position: absolute;
    inset: 0;
  }
}
.p-serviceButtonWrapper {
  width: fit-content;
  margin-top: 56px;
  margin-inline: auto;
}

/* case study */
.p-caseSection {
  border-top: 1px solid;
  position: relative;
  overflow: hidden;

  &::before {
    content: "";
    display: block;
    width: 1868px;
    height: 1230px;
    background-image: url("../../../images/bg_top_case_object.png");
    background-size: contain;
    background-position: top center;
    position: absolute;
    top: -420px;
    left: calc(
      50% - 1054px
    ); /* 1440px 時の left: -334px と等価。section 中央基準で固定 */
    z-index: -1;
  }
}
.p-caseButtonWrapper {
  width: fit-content;
  margin-top: 70px;
  margin-inline: auto;
}

/* media（現在コメントアウト中） */
.p-mediaHeadingWrapper {
  margin-bottom: 40px;
}
.p-mediaButtonWrapper {
  width: fit-content;
  margin-top: 64px;
  margin-inline: auto;
}

/* aio lab */
.p-labSection {
  background-size: cover;
  background-position: top left;
  position: relative;

  &::before {
    content: "";
    display: block;
    width: 2048px;
    height: 1314px;
    background-image: url("../../../images/bg_top_aio_lab.png");
    background-size: contain;
    background-position: top center;
    position: absolute;
    top: -190px;
    left: calc(
      50% - 1042px
    ); /* 1440px 時の left: -322px と等価。section 中央基準で固定 */
    z-index: -1;
  }

  &.l-sectionPrimary {
    padding-bottom: 80px;
  }
}
.p-labHeadingWrapper {
  margin-bottom: 40px;
}
.p-labButtonWrapper {
  width: fit-content;
  margin-top: 40px;
  margin-inline: auto;
}
.p-labList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  padding: 0;
  margin-top: 40px;

  @media (max-width: 1024px) {
    grid-template-columns: repeat(2, 1fr);
  }
  @media (max-width: 640px) {
    grid-template-columns: 1fr;
  }
}
.p-labList > li {
  border: 1px solid;
}

/* 3列: 2列目以降の left・2行目以降の top を除去 */
@media (min-width: 1025px) {
  .p-labList > li:not(:nth-child(3n + 1)) {
    border-left: none;
  }
  .p-labList > li:nth-child(n + 4) {
    border-top: none;
  }
}

/* 2列: 2列目の left・2行目以降の top を除去 */
@media (min-width: 641px) and (max-width: 1024px) {
  .p-labList > li:not(:nth-child(2n + 1)) {
    border-left: none;
  }
  .p-labList > li:nth-child(n + 3) {
    border-top: none;
  }
}

/* 1列: 2件目以降の top を除去 */
@media (max-width: 640px) {
  .p-labList > li:not(:first-child) {
    border-top: none;
  }
}

.p-labCard {
  height: 100%;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background-color: var(--color-bg-white);
  position: relative;
  cursor: pointer;
}
.p-labCardTitle {
  font-size: 24px;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.p-labCardText {
  margin: 0;
  flex: 1;
  line-height: 1.7;
  letter-spacing: 0.02em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  max-height: 5.1em; /* 1.7 × 3行 */
}
.p-labCardDate {
  font-family: var(--font-en);
  font-size: 0.875rem;
  font-weight: 600;
  order: -1;
}
.p-labCardTag {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  order: -2;
}
.p-labCardFooter {
  margin-top: auto;
}
.p-labCardLink {
  font-weight: 700;
  line-height: 1;
  padding-block: 0.5rem;
  padding-right: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;

  /* 矢印アイコン */
  &::before {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-image: url("../../../images/icon_arrow_right_black.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    order: 1;
  }

  /* カード全体をリンク範囲にする stretched link */
  &::after {
    content: "";
    position: absolute;
    inset: 0;
  }
}

/* news */
.p-newsSection {
  padding-top: 140px;

  @media screen and (max-width: 767px) {
    padding-top: 64px;
  }
}
.p-newsHeadingWrapper {
  margin-bottom: 40px;
}
.p-newsButtonWrapper {
  width: fit-content;
  margin-top: 40px;
  margin-inline: auto;
}
.p-newsTabs {
  margin-bottom: 0;
}
.p-newsTabList {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;

  @media screen and (max-width: 767px) {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
  }
  & > * {
    @media screen and (max-width: 767px) {
      flex-shrink: 0;
    }
  }
}
.p-newsTab {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  appearance: none;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border-gray);
  padding: 20px;
  cursor: pointer;
  color: var(--color-border-gray);
  transition: color 0.2s, border-color 0.2s;

  &:hover {
    color: var(--color-text-dark);
  }

  &.is-active {
    color: var(--color-text-dark);
    border-bottom-color: currentColor;
  }
}
.p-newsTabPanel {
  display: none;
  min-height: 17rem;

  &.is-active {
    display: block;
  }
}

.p-newsList {
  list-style: none;
  display: grid;
  gap: 20px;

  li {
    padding-block: 10px;
    border-bottom: 1px solid var(--color-border-gray);
  }
}
.p-newsLink {
  display: block;
}
.p-newsDate {
  font-family: var(--font-en);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.p-newsText {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  max-height: 1.6em;
}