/* ========== Base / Common ========== */

/* Splide */
.splide__arrow {
  opacity: 1;
}

/* 背景動画（PC/SP共通で全画面表示） */
.front_page__kv__inner video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100vw;
  min-height: 100vh;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: -1;
  /* コンテンツの背面 */
  pointer-events: none;
}

/* KV ステージ（高さはビューポート準拠） */
@supports (height: 100svh) {
  .front_page__kv {
    height: 100vh;
  }
}

@supports not (height: 100svh) {
  .front_page__kv {
    height: 100vh;
  }
}

.front_page__kv {
  margin-bottom: 0;
}

/* KV以降の白背景（通常）／ヘッダー下に配置（重なり防止） */
.front_page__content {
  background: #fff;
  /* PC 120px / SP 60px の余白（60〜120の範囲で可変） */
  padding-top: clamp(60px, 7vw, 120px);
  position: relative;
  z-index: 0;
}

/* フェードイン（.front_page__intro）制御 */
.front_page__intro {
  opacity: 0;
  transition: opacity 1s ease;
}

.front_page__intro.inview {
  opacity: 1;
}

/* タイポグラフィ（本文の行間） */
.front_page__point__slide__contents p {
  font-size: 16px;
  line-height: 2.2;
}

/* Product タイトルの基本プロパティ（字間・行高） */
.front_page__product .splide__slide dl dt,
.front_page__product .splide__slide dl dd {
  letter-spacing: 0.05em;
  line-height: 1.8;
}

/* News リストのテキスト（PC/SP共通） */
.front_page__news .ec-newsRole__list p {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.8;
}

/* Authorities（権威ロゴ等）の line-height 調整 */
.front_page__authoritys__block p {
  line-height: 1.8;
}

/* ========== PC: >=768px ========== */
@media only screen and (min-width: 768px) {
  .front_page__intro__block {
    width: fit-content;
  }

  /* intro 背景のPCでの背景位置調整 */
  .front_page__intro {
    background-position: 190px 100%;
  }

  /* 背景スライド（.front_page__intro2） */
  .front_page__intro2 {
    background: url(../img/top/bg_intro2.webp) no-repeat 0 40px,
      url(../img/top/bg_intro3.webp) no-repeat right 0 bottom 100px;
    background-size: 360px auto, 360px auto;
    transition: background-position 1s ease;
  }

  .front_page__intro2.inview {
    background-position: 0 0, right 0 bottom 138px;
  }

  /* タイポ（PC向けサイズ） */
  .front_page__intro__block p,
  .front_page__intro2__block p {
    font-size: 18px;
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.1em;
  }

  .front_page__intro__block h2,
  .front_page__intro__block .h2,
  .front_page__intro2__block h2,
  .front_page__intro2__block .h2 {
    font-size: 44px;
    letter-spacing: 0.2em;
  }

  .front_page__intro2__block {
    width: calc(34.411765vw + 120px);
    min-width: 720px;
    padding: 60px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 60px;
    margin-bottom: 100px;

    @media (min-width: 1500px) {
      background: unset;
      width: 34.411765vw;
      min-width: 600px;
      padding: 0;
      margin-bottom: 0;
    }
  }

  .front_page__usage__lead dt {
    font-size: 28px;
  }

  .front_page__usage__lead dd {
    margin-top: 40px;
    font-weight: 500;
    line-height: 1.8;
  }

  #purchase .front_page__usage__inner .front_page__usage__inner_sns li a {
    font-size: 22px;
  }

  .front_page__product .splide__slide dl dt {
    font-size: 18px;
  }

  .front_page__product .splide__slide dl dd {
    font-size: 18px;
  }

  .front_page__authoritys__block p {
    font-size: 18px;
  }

  .front_page__point__slide__contents h3,
  .front_page__point__slide__contents .h3 {
    font-size: 22px;
    line-height: 1.8;
  }

  .front_page__point__slide__btn a {
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .front_page__point__slide__btn a:hover {
    background: #f2f2f2 !important;
  }
}

/* ========== Tablet Portrait: 768–1024px（縦） ========== */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .br-pc {
    display: none;
  }
}

/* ========== SP: <=767px ========== */
@media (max-width: 767px) {
  .br-pc {
    display: none;
  }

  .front_page__intro2 figure {
    position: relative;
    overflow: hidden;
    /* はみ出し防止（任意） */
  }

  .front_page__intro2 figure img {
    display: block;
    width: 100%;
    transform: translateY(24px) scale(1.02);
    /* 初期オフセット */
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1), opacity 0.6s ease;
    will-change: transform, opacity;
    /* iOSで滑らかに */
  }

  /* 画面内に入ったら発火（PCの .inview と同じトリガー） */
  .front_page__intro2.inview figure img {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  /* SP タイポ（商品リスト） */
  .front_page__product .splide__slide dl dt {
    font-size: 18px;
  }

  .front_page__product .splide__slide dl dd {
    font-size: 16px;
  }

  .front_page__intro__block p,
  .front_page__intro2__block p,
  .front_page__point__slide__contents p {
    font-size: 16px;
    line-height: 2.2;
    letter-spacing: 0.05em;
  }

  .front_page__usage__lead dd {
    font-weight: 500;
    line-height: 1.8;
  }

  #purchase .front_page__usage__inner .front_page__usage__inner_sns li a {
    font-size: 18px;
  }

  .front_page__point__slide__contents h2,
  .front_page__point__slide__contents .h2 {
    font-size: 24px;
  }

  .front_page__point__slide__contents h3,
  .front_page__point__slide__contents .h3 {
    font-size: 18px;
    line-height: 1.8;
  }

  .ec-footerRole .ec-footerRole__products dd ul li a {
    font-size: 14px;
    text-wrap-mode: nowrap;
  }

  .ec-footerRole .ec-footerRole__logo img {
    width: 60%;
    margin: 0 auto;
  }

  .ec-footerRole .ec-footerRole__logo {
    margin-bottom: 60px;
  }
}

/* iPhone SEを含む小さい画面（～375px）を全部まとめて */
@media screen and (max-width: 415px) {
  .front_page__intro {
    background: url(../img/top/bg_intro_smp.svg) no-repeat right 8px top -6px;
  }
}