/* =====================================================
   Swanilda custom styles (2026-10)
   - works ロゴのカルーセルを Swiper 化（自動で流れつつ手で動かせる）
   - サービスカード等のイラスト差し替え
   - 各セクションの飾りイラスト
   ===================================================== */

/* ---- works: Swiper carousel ---- */
.p-work__swiper {
  margin-top: 3.125rem;
  overflow: visible;
  cursor: grab;
}
.p-work__swiper:active {
  cursor: grabbing;
}
.p-work__swiper .swiper-wrapper {
  transition-timing-function: linear !important;
  align-items: center;
}
.p-work__swiper .swiper-slide {
  width: 10rem;
  flex-shrink: 0;
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  .p-work__swiper .swiper-slide {
    width: 21.875rem;
  }
}
.p-work__swiper .p-work__logo {
  display: block;
  width: 100%;
  margin-top: 0;
}
.p-work__swiper .p-work__logo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
}

/* ---- service cards: transparent illustrations ---- */
.c-card__img img {
  object-fit: contain;
}

/* ---- decorative illustrations ---- */
.p-illust {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  display: none;
}
.p-illust img {
  width: 100%;
  height: auto;
}
@media screen and (min-width: 1024px) {
  .p-illust {
    display: block;
  }
}

/* news: layout unchanged from the live site (full-width list, no illustration).
   Each item is kept to about 3 lines by the length of the news text itself. */

/* contact flow: illustration outside the steps column, at its bottom-right
   (.p-contact has overflow hidden, so it is clipped rather than causing a scrollbar) */
.p-contact__contents {
  position: relative;
}
.p-contact__illust {
  right: -290px;
  bottom: 0.5rem;
  width: 230px;
}
@media screen and (max-width: 1199px) {
  .p-contact__illust {
    display: none;
  }
}

/* company: illustration at top-right of the section (right of the title) */
.p-company .l-inner {
  position: relative;
}
.p-company__illust {
  top: 0.5rem;
  right: 1.5rem;
  bottom: auto;
  width: 240px;
}

/* ---- top page: link to the corporate-video page ---- */
.p-point__cv {
  text-align: center;
  margin-top: 3rem;
  padding: 0 1rem;
}
.p-point__cv-link {
  display: inline-block;
  background: #fff;
  color: #333;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.5;
  padding: 0.9rem 1.75rem;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  transition: 0.3s;
}
.p-point__cv-link:hover {
  opacity: 0.8;
}
.p-point__cv-link::after {
  content: " →";
}

/* footer link */
.p-footer__cv {
  text-align: center;
  font-size: 0.8125rem;
  margin: 0.75rem 0 0;
}
.p-footer__cv-link {
  color: #333;
  text-decoration: underline;
}

/* ---- staff photo: transparent blob PNG, no cropping ---- */
.p-staff__img img {
  object-fit: contain;
}
/* the theme pulls the photo flush to the left edge of the screen (margin-left: 50% - 50vw),
   which makes the blob look cut off. Keep a small gap from the edge instead. */
@media (min-width: 768px) {
  .p-staff__img {
    margin-left: calc(50% - 50vw + 2rem);
  }
}

/* ---- sub pages (page.php): header anchor links handled in custom.js ---- */

/* ---- about us (2026-10-17) ---- */
.p-about .p-about__sub-title {
  line-height: 1.35;
}
.p-about .p-about__content .p-about__text {
  font-size: 1.0625rem;
  line-height: 1.9;
  margin-top: 1.125rem;
}
.p-about .p-about__content .p-about__sub-title + .p-about__text {
  margin-top: 1.75rem;
}
.p-about .p-about__content .p-about__text--lead {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.7;
  margin-top: 1.625rem;
  margin-bottom: 0.25rem;
}
@media (min-width: 768px) {
  .p-about .p-about__content .p-about__text {
    font-size: 1.125rem;
    margin-top: 1.375rem;
  }
  .p-about .p-about__content .p-about__sub-title + .p-about__text {
    margin-top: 2.25rem;
  }
  .p-about .p-about__content .p-about__text--lead {
    font-size: 1.375rem;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
  }
}
/* stage photo inside the site's blob frame (transparent PNG/WebP, 1163x1106), centered beside the text.
   Width is capped per breakpoint so the nowrap sub-title always fits and the frame never runs past the viewport. */
.p-about__img--photo {
  margin-top: 2rem;
  margin-right: 0;
}
.p-about__img--photo img {
  aspect-ratio: 1133 / 1162;
  height: auto;
  object-fit: contain;
}
.p-about__img--photo::after {
  top: 50%;
  width: 22rem;
  height: 20.75rem;
}
@media (min-width: 768px) {
  .p-about__img--photo {
    margin-top: 0;
    align-self: center;
    width: 58vw;
    max-width: 38rem;
    margin-right: calc(50% - 50vw + 1.25rem);
  }
  .p-about__img--photo::after {
    top: 36%;
    width: 33.875rem;
    height: 31.9375rem;
  }
}
@media (min-width: 1200px) {
  .p-about__img--photo {
    width: 100%;
    max-width: 42.5rem;
  }
}