@charset "utf-8";



/* ------------------------------
 First_view
------------------------------ */
#first-view {
  margin: auto;
  width: 100%;
  position: relative;
  z-index: 1;
  background-color: var(--blue);
  background-color: var(--white);
}

/* --- スクロール矢印 --- */
#first-view .scroll-arrow {
  width: fit-content;
  position: absolute;
  bottom: 14svh;
  right: 0;
  transform: translate(0%,0%) rotate(90deg);
  font-family: "GenjyuuGLP", sans-serif;
  font-weight: 300;
  font-size: var(--fs_15);
  color: var(--white);
  line-height: 1;
  letter-spacing: 0.05em;
}

@media screen and (min-width:750px) {
  .other-dev #first-view .scroll-arrow {
    position: absolute;
    bottom: 180px;
    right: 0;
  }

}

#first-view .scroll-arrow::before {
  content: "";
  width: 250%;
  height: 1px;
  background-color: var(--white); 
  position: absolute;
  top: 130%;
  left: 0%;
  transform: translate(0%,-50%) scale(1,0.5);
}

#first-view .scroll-arrow::after {
  content: "";
  width: 0.75em;
  height: 1px;
  background-color: var(--white); 
  position: absolute;
  top: 130%;
  right: -150%;
  transform: translate(0%,-50%) rotate(30deg) scale(1,0.5);
  transform-origin: 100% 50%;
  
}



/*-------------------------------
  firstview(splide)上書き設定
-------------------------------*/


/* --- 表示範囲 --- */
.splide.fv {
  margin: auto;
  width: 100%;
  height: 100svh;
}

/* --- スライダー静止画・位置 --- */

.splide.fv .splide__slide {
  opacity: 0; /* 初期状態を透明に */
  visibility: hidden; /* 初期状態を非表示に */
  transition: opacity 1s ease-in-out, visibility 0s 1s; /* opacity は 1s で、visibility は遅延させて切り替え */
  height: 100svh;
}

.splide.fv .splide__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease-in-out, visibility 0s 0s; /* アクティブ時は visibility を即座に表示 */
}

.splide.fv .splide__slide > picture img {
  object-fit: cover;
  width: 100%;
  height: 100svh; /* min-height:  */ 
  transition: 9s 1s ease-out; /* 9s */
  transform: scale(1); 
  object-position: 50% 50%;
}

.splide.fv .splide__slide > picture img.one {
  object-position: 5% 50%;
}

.splide.fv .splide__slide img.two {
  object-position: 20% 50%;
}

.splide.fv .splide__slide img.three {
  object-position: 0% 50%;
}

.splide.fv .splide__slide img.four {
  object-position: 100% 50%;
}

.splide.fv .splide__slide img.five {
  object-position: 70% 50%;
}

/* --- スライダー拡大画・位置 --- */
.splide.fv .splide__slide.is-active > picture img {
  transition-delay: 0s;
  transform: scale(1.1);
}
 
.splide.fv .splide__slide.is-active > picture img.one {
  object-fit: cover;
  object-position: 5% 50%;
}

.splide.fv .splide__slide.is-active img.two {
  object-fit: cover;
  object-position: 2% 50%;
}

.splide.fv .splide__slide.is-active img.three {
  object-fit: cover;
  object-position: 0% 50%;
}

.splide.fv .splide__slide.is-active img.four {
  object-fit: cover;
  object-position: 100% 50%;
}

.splide.fv .splide__slide.is-active img.five {
  object-fit: cover;
  object-position: 70% 50%;
}



/* --- スライダー画像用テキスト --- */
.splide.fv .splide__slide .slide-title {
  font-family: "hina", serif;
  font-weight: 400;
  font-size: min(60px, max(8vw, 28.8px));
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: left;
  color: var(--white);
  position: absolute;
  writing-mode: vertical-rl; 
  white-space: nowrap;
}

/* --- link対策(PC)@media制御 --- */
/* for PC */
@media (orientation: landscape) and (min-width: 700px) {

  .splide.fv .splide__slide .slide-title {
    font-size: min(45px, max(6vw, 21.6px));
  }

}



/* テキスト位置 */

/* 1枚目 */
.splide.fv .splide__slide .slide-title.f1 {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 70%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%,-50%);
  writing-mode: horizontal-tb; 
}


/* 2枚目 */
.splide.fv .splide__slide .slide-title.f2 {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

#first-view .splide__slide .slide-title.f2 span.f11 {
  display: inline-block;
  text-indent: 1em;
}

/* 3枚目 */
#first-view .splide__slide .slide-title.f3 {
  position: absolute;
  top: 50%;
  left: auto;
  right: 5%;
  translate: -50% -50%;
}

#first-view .splide__slide .slide-title.f3 span.f12 {
  display: inline-block;
  text-indent: 1em;
}

/* 4枚目 */
#first-view .splide__slide .slide-title.f4 {
  position: absolute;
  top: 50%;
  left: 25%;
  translate: -50% -50%;
}

#first-view .splide__slide .slide-title.f4 span.f13 {
  display: inline-block;
  text-indent: 1em;
}

/* 5枚目 */
#first-view .splide__slide .slide-title.f5 {
  position: absolute;
  top: 50%;
  left: 25%;
  translate: -50% -50%;
}

#first-view .splide__slide .slide-title.f5 span.f14 {
  display: inline-block;
  text-indent: 1em;
}

/* --------- 文字間調整 --------- */
/* 1 */

/* 2 */
#first-view .splide__slide .slide-title.f2 span.f21,
#first-view .splide__slide .slide-title.f2 span.f22 {
  letter-spacing: 0em;
  display: inline-block;
}

#first-view .splide__slide .slide-title.f2 span.f23 {
  letter-spacing: 0em;
  display: inline-block;
}

/* 3 */
#first-view .splide__slide .slide-title.f3 span.f21,
#first-view .splide__slide .slide-title.f3 span.f22 {
  letter-spacing: 0em;
  display: inline-block;
}

#first-view .splide__slide .slide-title.f3 span.f23 {
  letter-spacing: 0em;
  display: inline-block;
}

/* 4 */
#first-view .splide__slide .slide-title.f4 span.f21,
#first-view .splide__slide .slide-title.f4 span.f22 {
  letter-spacing: 0em;
  display: inline-block;
}

#first-view .splide__slide .slide-title.f4 span.f23 {
  letter-spacing: 0em;
  display: inline-block;
}

/* 5 */
#first-view .splide__slide .slide-title.f5 span.f21,
#first-view .splide__slide .slide-title.f5 span.f22 {
  letter-spacing: 0em;
  display: inline-block;
}

#first-view .splide__slide .slide-title.f5 span.f23 {
  letter-spacing: 0em;
  display: inline-block;
}

/* ---------- iPhoneハック ---------- */
.ios-dev #first-view .splide__slide .slide-title {
  letter-spacing: 0.5em;
}

/* 1 */

/* 2 */
.ios-dev #first-view .splide__slide .slide-title.f2 span.f21,
.ios-dev #first-view .splide__slide .slide-title.f2 span.f22,
.ios-dev #first-view .splide__slide .slide-title.f2 span.f23 {
  letter-spacing: 0.3em;
}

/* 3 */
.ios-dev #first-view .splide__slide .slide-title.f3 span.f21,
.ios-dev #first-view .splide__slide .slide-title.f3 span.f22,
.ios-dev #first-view .splide__slide .slide-title.f3 span.f23 {
  letter-spacing: 0.3em;
}

/* 4 */
.ios-dev #first-view .splide__slide .slide-title.f4 span.f21,
.ios-dev #first-view .splide__slide .slide-title.f4 span.f22,
.ios-dev #first-view .splide__slide .slide-title.f4 span.f23 {
  letter-spacing: 0.3em;
}

/* 5 */
.ios-dev #first-view .splide__slide .slide-title.f5 span.f21,
.ios-dev #first-view .splide__slide .slide-title.f5 span.f22,
.ios-dev #first-view .splide__slide .slide-title.f5 span.f23 {
  letter-spacing: 0.3em;
}

/* ---------- Firefoxハック ---------- */
@-moz-document url-prefix() {
  #first-view .splide__slide .slide-title {
    letter-spacing: 0.5em;
  }

  /* 1 */

  /* 2 */
  #first-view .splide__slide .slide-title.f2 span.f21,
  #first-view .splide__slide .slide-title.f2 span.f22,
  #first-view .splide__slide .slide-title.f2 span.f23 {
    letter-spacing: 0.3em;
  }

  /* 3 */
  #first-view .splide__slide .slide-title.f3 span.f21,
  #first-view .splide__slide .slide-title.f3 span.f22,
  #first-view .splide__slide .slide-title.f3 span.f23 {
    letter-spacing: 0.3em;
  }

  /* 4 */
  #first-view .splide__slide .slide-title.f4 span.f21,
  #first-view .splide__slide .slide-title.f4 span.f22,
  #first-view .splide__slide .slide-title.f4 span.f23 {
    letter-spacing: 0.3em;
  }

  /* 5 */
  #first-view .splide__slide .slide-title.f5 span.f21,
  #first-view .splide__slide .slide-title.f5 span.f22,
  #first-view .splide__slide .slide-title.f5 span.f23 {
    letter-spacing: 0.3em;
  }

}




/* テキスト動作 */
#first-view .splide__slide[class*=-active] .slide-title {
  animation: fadeIn both 3.5s ease -0.5s;
}

@keyframes fadeIn {

  0% {
    filter: blur(300px);
    opacity: 0;
    scale: 0.3;
  }
 
  100% {
    filter: blur(0px);
    opacity: 1;
    scale: 1;
  }
}



/* --- スマホ横向き --- */
@media (orientation: landscape) and (max-height: 500px) {

  .ios-dev .splide.fv,
  .android-dev .splide.fv {
    /* height: 133.333333vw;/* 133.333333vw */
    /* max-height: 1000px; /* 1000px */
    height: auto !important;
  }

  .ios-dev .splide.fv .splide__slide,
  .android-dev .splide.fv .splide__slide {
    height: auto !important;
  }

  .ios-dev .splide.fv .splide__slide > picture img,
  .android-dev .splide.fv .splide__slide > picture img {
    /* height: 133.333333vw; /* 133.333333vw */
    /*  max-height: 1000px; /* 1000px */
    height: auto !important;
  }

}

/* --- スマホ縦向き --- */
@media (orientation: portrait) {

  .ios-dev .splide.fv,
  .android-dev .splide.fv,
  .ios-dev .splide.fv .splide__slide,
  .android-dev .splide.fv .splide__slide {
    height: 100svh !important;
  }


}





/* -------------------------------------------------
 「お役立ち情報 USEFUL CONTENTS」useful上書き設定
------------------------------------------------- */
/* --- スライダー --- */
.useful_slider {
  width: min(100vw,750px);
}

#ufc {
  margin: auto;
}

#ufc .adj {
  margin-left: calc(50% - 50vw);
  margin: auto;
  padding: 15% 0;
  width: 100%;
  background-color: var(--gray);
}

#ufc .adj .splide__slide {
  transition-property: transform;
  transition-duration: 1.4s;
  transition-timing-function: ease-in-out;
}

#ufc .adj .splide__slide img {
  height: auto;
  width: 100%;
}

/* ページネーション */
#ufc .splide__pagination {
  position: absolute;
  top: 107%;
  right: 0;
}  

#ufc .splide__pagination__page {
  background: #bbb;
  border: 0;
  border-radius: 50%;
  display: inline-block;
  height: min(15px, max(2vw, 10px));
  margin: min(1vw,12px);
  opacity: 1; /* 0.7 */
  padding: 0;
  position: relative;
  transition: transform .2s linear;
  width: min(15px, max(2vw, 10px));
  transform: scale(0.8);
}

#ufc .splide__pagination__page.is-active {
  background: #333;
  transform: scale(0.8);
  z-index: 1;
}


/* --- link対策(PC・SP)@media制御 --- */
/* for PC */
@media (hover: hover) {
  #ufc .splide__slide a:hover {
    opacity: 0.6;
  }

}

/* for SP */
@media (hover: none) {
  #ufc .splide__slide a:active {
    opacity: 0.6;
  }

}




/* -------------------------------------------------
 「製品カテゴリ特別限定品」SLE上書き設定
------------------------------------------------- */
/* --- スライダー --- */
.SLE_slider {
  width: min(100vw,750px);
  margin-top: 10%;
}

#SLE {
  margin: auto;
}

#SLE .adj {
  margin-left: calc(50% - 50vw);
  margin: auto;
  padding: 12% 0 12% 6%;
  width: 100%;
  background-color: var(--gray);
}

#SLE .adj .splide__slide {
  transition-property: transform;
  transition-duration: 1.4s;
  transition-timing-function: ease-in-out;
}

#SLE .adj .splide__slide img {
  height: auto;
  width: 100%;
}

/* ページネーション */
#SLE .splide__pagination {
  position: absolute;
  top: 104%;
  right: 0;
}  

#SLE .splide__pagination__page {
  background: #bbb;
  border: 0;
  border-radius: 50%;
  display: inline-block;
  height: min(15px, max(2vw, 10px));
  margin: min(1vw,12px);
  opacity: 1; /* 0.7 */
  padding: 0;
  position: relative;
  transition: transform .2s linear;
  width: min(15px, max(2vw, 10px));
  transform: scale(0.8);
}

#SLE .splide__pagination__page.is-active {
  background: #333;
  transform: scale(0.8);
  z-index: 1;
}


/* --- link対策(PC・SP)@media制御 --- */
/* for PC */
@media (hover: hover) {
  #SLE .splide__slide a:hover {
    opacity: 0.6;
  }

}

/* for SP */
@media (hover: none) {
  #SLE .splide__slide a:active {
    opacity: 0.6;
  }

}