@charset "UTF-8";
/* ========== Base / Common ========== */
/* Splide 共通スタイル */
/* 矢印コンテナをスライドトラックに対して相対配置 */
.front_page__point .splide__track,
.front_page__product .splide__track {
  position: relative;
}
/* 共通スタイル - ボタン自体は絶対に動かさない */
.front_page__point .splide__arrows button,
.front_page__product .splide__arrows button {
  border: unset !important;
  width: 80px;
  height: 80px;
  background: none !important;
  overflow: hidden;
  text-indent: -9999px;
  position: absolute;
  cursor: pointer;
  animation: none !important;
  transition: none !important;
}
/* 疑似要素でアイコンを表示 */
.front_page__point .splide__arrows button::before,
.front_page__product .splide__arrows button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../icon/icon_slide.svg) no-repeat center;
  background-size: contain;
  transition: all 0.3s ease;
  transform: scale(1);
  opacity: 0.8;
}
/* ========== front_page__point 矢印配置 ========== */
.front_page__point .splide__arrows button {
  top: 50%;
  transform: translateY(-50%) !important;
}
.front_page__point .splide__arrows button.splide__arrow--prev {
  left: -40px !important;
}
.front_page__point .splide__arrows button.splide__arrow--next {
  right: -40px !important;
}
/* ========== front_page__product 矢印配置 ========== */
/* 上下中央。左右位置は後段（40px / 20px / 10px）で決める */
.front_page__product .splide__arrows button {
  top: 50%;
  transform: translateY(-50%) !important;
}
/* 右矢印のアイコン画像 */
.front_page__point .splide__arrows button.splide__arrow--next::before,
.front_page__product .splide__arrows button.splide__arrow--next::before {
  background-image: url(../icon/icon_slide2.svg);
}
/* ホバー時 - 不透明に */
.front_page__point .splide__arrows button:hover::before,
.front_page__product .splide__arrows button:hover::before {
  opacity: 1;
}
/* アクティブ時（押した時） - 縮小 */
.front_page__point .splide__arrows button:active::before,
.front_page__product .splide__arrows button:active::before {
  transform: scale(0.95);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  opacity: 1;
}
/* タブレット・小さめのPC画面対応 */
@media (max-width: 1200px) {
  .front_page__point .splide__arrows button.splide__arrow--prev {
    left: 10px !important;
  }
  .front_page__point .splide__arrows button.splide__arrow--next {
    right: 10px !important;
  }
}
/* さらに小さい画面 */
@media (max-width: 1024px) {
  .front_page__point .splide__arrows button.splide__arrow--prev {
    left: 5px !important;
  }
  .front_page__point .splide__arrows button.splide__arrow--next {
    right: 5px !important;
  }
}
/* front_page__point 固有のスタイル */
.front_page__point .splide__arrows button.active-arrow::after {
  background-color: rgb(255, 255, 255) !important;
}
.front_page__point .splide__arrows button.active-arrow::before {
  transform: scale(1.1) !important;
}
/* スライド全般のスタイル */
.front_page__point .splide__arrow {
  opacity: 1;
}
/* front_page__point のスライダーのみ透過効果を適用 */
.front_page__point .splide__slide {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
/* PC表示のみで透過効果を適用 */
@media (min-width: 768px) {
  .front_page__point .splide__slide:not(.is-active) {
    opacity: 0.6;
  }
}
/* 商品スライダーのスライド透過効果 */
.front_page__product__slide .splide__slide {
  transition: opacity 0.8s ease;
}
/* 最初のスライドでは左矢印を非表示 */
.splide.is-initialized:not(.is-overflow) .splide__arrow--prev {
  opacity: 0;
  pointer-events: none;
}
/* 最後のスライドでは右矢印を非表示 */
.splide.is-end .splide__arrow--next {
  opacity: 0;
  pointer-events: none;
}
/* その他のスタイル */
@media only screen and (min-width: 768px) {
  .front_page__point__slide {
    padding: 48px 48px 48px;
  }
}
@media (min-width: 980px) {
  .front_page__point__slide__inner {
    -moz-column-gap: 48px;
    column-gap: 48px;
  }
}
.front_page__point__slide__contents2 ul li dl dd {
  line-height: 1.8;
}
.front_page__point__slide__contents h3,
.front_page__point__slide__contents .h3 {
  margin-bottom: 20px;
}
.front_page__point__slide__contents h2,
.front_page__point__slide__contents .h2 {
  margin-bottom: 28px;
}
/* 商品スライダーの矢印配置 */
.front_page__product .splide__list {
  position: relative; /* これを基準にする */
}
.front_page__product .splide__arrows {
  position: static; /* 通常のフローに */
}
.front_page__product .splide__arrows button {
  position: absolute;
}
.front_page__product .splide__arrows button.splide__arrow--prev {
  left: 40px !important;
}
.front_page__product .splide__arrows button.splide__arrow--next {
  right: 40px !important;
}
@media (max-width: 1200px) {
  .front_page__product .splide__arrows button.splide__arrow--prev {
    left: 20px !important;
  }
  .front_page__product .splide__arrows button.splide__arrow--next {
    right: 20px !important;
  }
}
@media (max-width: 1024px) {
  .front_page__product .splide__arrows button.splide__arrow--prev {
    left: 10px !important;
  }
  .front_page__product .splide__arrows button.splide__arrow--next {
    right: 10px !important;
  }
}
.splide:hover .splide__arrow {
  opacity: 1;
}
.splide:hover .splide__arrow--prev {
  opacity: 1;
}
.splide.is-initialized:not(.is-overflow):hover .splide__arrow--prev {
  opacity: 0 !important;
}
.splide.is-end:hover .splide__arrow--next {
  opacity: 0 !important;
}
/* その他のスタイル */
@media only screen and (min-width: 768px) {
  .front_page__point__slide {
    padding: 48px 48px 48px;
  }
}
@media (min-width: 980px) {
  .front_page__point__slide__inner {
    -moz-column-gap: 48px;
    column-gap: 48px;
  }
}
.ec-footerRole {
  position: relative;
  z-index: 100;
  background: #fff;
}
/* 背景動画（PC/SP共通で全画面表示） */
.front_page__kv__inner video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100vw;
  min-height: 100vh;
  transform: translate(-50%, -50%);
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -1;
  /* コンテンツの背面 */
  pointer-events: none;
}
/* KV ステージ（高さはビューポート準拠） */
@supports (height: 100svh) {
  .front_page__kv {
    height: 100svh;
  }
}
@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: -moz-fit-content;
    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 only screen and (min-width: 768px) and (min-width: 1500px) {
  .front_page__intro2__block {
    background: unset;
    width: 34.411765vw;
    min-width: 600px;
    padding: 0;
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 768px) {
  .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;
  }
  .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;
  }
}
.front_page__product .splide__slide .ec-shelfGrid__item__icons {
  padding: 0px;
  margin-bottom: 0px;
}
.front_page__product .splide__slide dl {
  padding: 0px;
  margin: 0px;
}
.front_page__product .splide__slide figure {
  margin-bottom: 0px;
}
.front_page__product .splide__slide dl dd {
  margin-top: 0px;
}