@charset "UTF-8";

/* ==========================================================================
   株式会社テイケン FV
   参考サイトの実測値をもとに書き起こしたものです（CSSの複製ではありません）。
   基準幅: PC 1220px / SP 375px　境界: 768px

   ⚠️ 元々あった「0. 共通レイヤー」（html/bodyのリセット、font-sizeの
      サイト全体への指定）は、既存サイトのヘッダーと衝突してヘッダーが
      崩れる原因になったため削除しています。FV内の要素（.p-fv 以下）に
      必要なスタイルだけを残しています。
   ========================================================================== */

.p-fv,
.p-fv *,
.p-fv *::before,
.p-fv *::after {
  box-sizing: border-box;
}

.p-fv img,
.p-fv picture,
.p-fv svg {
  display: block;
  max-width: 100%;
}

.p-fv a {
  text-decoration: none;
  color: inherit;
}

.p-fv {
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: #0c0c0c;
}

/* --------------------------------------------------------------------------
   1. FV本体
   -------------------------------------------------------------------------- */

.p-fv {
  /* ⚠️ 色はサイト全体の変数と衝突しないよう、FVスコープに置いています。
        （:root へ移すと結合時にぶつかります） */
  --fv-blue: #2c74b3;
  --fv-navy: #0b294c;

  position: sticky;
  top: 4.4375rem; /* ヘッダーの高さぶん。ヘッダーは納品範囲外ですが、
                     結合したときに合うようこの値だけ残しています */
  height: 45.5rem;
  overflow: hidden; /* 傾けた写真列がFVの外へはみ出すのを止める */
  background-image: url("../img/bg_fv_pc.webp");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
}


/* --- 写真の2列 ----------------------------------------------------------- */

.p-fv__swiper-container {
  position: absolute;
  top: 0;
  left: calc(50% - 10.5625rem); /* 画面中央を基準に配置。テキスト側の
                                   right: calc(50% + 4.8125rem) と対になっています */
  right: -7.8125rem;            /* 右端は意図的に画面外へ出す */
  height: 100%;
  display: flex;
}

.p-fv__swiper {
  width: 31.9375rem;
  height: 100%;
  overflow: visible; /* 傾けた列を隠さない（クリップは .p-fv 側で行う） */
  transform: rotate(27deg);
}

.p-fv__swiper--right {
  margin-inline-start: -7.375rem; /* 左列に少し重ねる */
}

/* 等速で流す。既定の ease だと1周ごとに速度が波打つ */
.p-fv__swiper-wrapper {
  transition-timing-function: linear;
}

.p-fv__swiper-slide {
  height: 15.75rem;
  margin-block-end: 3.125rem;
}

.p-fv__picture,
.p-fv__picture img {
  width: 100%;
  height: 100%;
}

.p-fv__picture img {
  /* 列ごと 27deg 傾けているので、写真だけ戻して平行四辺形に切り抜く */
  transform: rotate(-27deg);
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
  object-fit: cover;
}


/* --- コピー ------------------------------------------------------------- */

.p-fv__contents {
  position: absolute;
  top: 11.125rem;
  right: calc(50% + 4.8125rem);
  z-index: 2;
  /* 30.8rem = タイトル1行の最大幅（8文字 ×（3.5rem + 字送り0.35rem））。
     参考サイトはテキストの実幅で決まっていましたが、こちらは本文が長く
     folding 幅に効くため、フォントの計量に依存しない固定値にしています */
  width: 30.8rem;
}

.p-fv__text {
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
}

.p-fv__text-title,
.p-fv__text-description {
  position: relative;
  color: #fff;
  /* 出現前の状態。JSが .is-show を付けるまで隠しておく */
  clip-path: inset(0 100% 0 0);
}

/* 左から右へ走る青いバー */
.p-fv__text-title::after,
.p-fv__text-description::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--fv-blue);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.p-fv__text-title {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.1em;
}

.p-fv__text-description {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
  /* ⚠️ 参考サイトは1行 nowrap でしたが、指定の本文が約60字あるため
        nowrap は外しています（README.md 参照） */
}

/* 読み込み時に一斉に発火する */
.p-fv__text-title.is-show,
.p-fv__text-description.is-show {
  animation: fvTextView 1.2s ease-in-out forwards;
}

.p-fv__text-title.is-show::after,
.p-fv__text-description.is-show::after {
  animation: fvColorBox 1.2s ease-in-out forwards;
}

@keyframes fvTextView {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes fvColorBox {
  0% {
    transform: scaleX(0);
    transform-origin: 0 50%;
  }
  50% {
    transform-origin: 0 50%;
  }
  60% {
    transform: scaleX(1);
    transform-origin: 100% 50%;
  }
  100% {
    transform: scaleX(0);
    transform-origin: 100% 50%;
  }
}


/* --- ボタン ------------------------------------------------------------- */

.p-fv__button {
  margin-block-start: 2rem;
}

/* カタカナ語が行末で割れる（例「クリーニン／グ」）のを防ぐ。SPで効きます */
.u-nowrap {
  white-space: nowrap;
}

/* テキストのアニメが終わってから遅れて出す（JSが1.2秒後に .is-show を付ける） */
.u-fadeIn {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.u-fadeIn.is-show {
  opacity: 1;
}

.c-button--fv {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13.75rem;
  height: 3.6875rem;
  background-color: #fff;
}

.c-button__text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.c-button__text-en {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: var(--fv-blue);
}

.c-button__text-jp {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--fv-navy);
}

.c-button__text-jp--big {
  font-size: 1.5rem;
  font-weight: 700;
}

.c-button__icon {
  position: absolute;
  right: 0.1875rem;
  bottom: 0.1875rem;
}


/* --------------------------------------------------------------------------
   2. SP（〜767px）
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  .p-fv {
    top: 2.9375rem;
    height: 43.5625rem;
    background-image: url("../img/bg_fv_sp.webp");
  }

  /* 🔴 SPだけの追加（参考サイトには無い処理です・README.md「SPの読みやすさ」参照）
     SPは2列（19.1875rem ×2 ＋ 間隔 2.625rem ＝ 41rem ＝ 656px）が画面幅 375px より
     広いため、写真がどう置いても画面全体に掛かります。参考サイトはコピーが短く
     （見出し2行＋本文1行）成立していましたが、今回のコピーは本文が約60字あり、
     そのままだと白文字が明るい写真に重なって読めません。
     そこで写真の上・文字の下に暗い膜を1枚敷いています。不要なら削除してください。 */
  .p-fv::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(11, 41, 76, 0) 0%,
      rgba(11, 41, 76, 0.32) 28%,
      rgba(11, 41, 76, 0.62) 46%,
      rgba(11, 41, 76, 0.62) 100%
    );
  }

  .p-fv__swiper-container {
    /* 2列（19.1875rem ×2 ＋ 間隔 2.625rem ＝ 41rem）を右へ抜けさせる。
       幅 41rem＝656px は参考サイトの実測幅と1pxも違わない */
    left: auto;
    right: -6.8125rem;
    width: 41rem;
  }

  .p-fv__swiper {
    width: 19.1875rem;
  }

  .p-fv__swiper--right {
    margin-inline-start: 2.625rem;
  }

  .p-fv__swiper-slide {
    height: 9.125rem;
  }

  .p-fv__contents {
    top: 18.1875rem;
    left: 1.1875rem;
    right: 1.1875rem;
    z-index: 98;
    width: auto;
  }

  .p-fv__text-title {
    font-size: 1.5rem;
  }

  .p-fv__text-description {
    font-size: 1rem;
  }

  /* ⚠️ 参考サイトどおり、SPではボタンを表示しません。
        表示したい場合はこのブロックを削除してください（README.md 参照） */
  .p-fv__button {
    display: none;
  }

}