/* =========================================================
   電話番号カラー
========================================================= */
.c-list-sign a[href^="tel:"] {
  color: #fff !important;
  text-decoration: none !important;
  -webkit-text-fill-color: #fff !important;
}

/* =========================================================
   ベースリセット・共通調整
========================================================= */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img,
ins, kbd, q, samp, small, strong, var, b, i,
dl, dt, dd, ol, ul, li, fieldset, form, label,
legend, table, caption, tbody, tfoot, thead,
tr, th, td, article, aside, canvas, details,
figcaption, figure, footer, header, hgroup,
menu, nav, section, summary, time, mark,
audio, video {
  margin-top: -0.15px;
}


/* =========================================================
   ボタン共通
========================================================= */
.btn_push {
  transition: transform .1s;
}

.btn_push:active {
  transform: scale(.97);
}


/* =========================================================
   重ね
========================================================= */
.mt {
  margin-top: -5.5%;
}


/* =========================================================
   Swiper 共通
========================================================= */
.swiper {
  --swiper-navigation-size: 40px;
}

.swiper1,
.swiper2,
.swiper3,
.swiper4,
.swiper5 {
  height: auto;
}

.swiper-wrapper{
margin-bottom: 10%;
}

/* =========================================================
   swiper1 / swiper2 / swiper4 / swiper5
   通常スライド
========================================================= */
.swiper1 .swiper-slide,
.swiper2 .swiper-slide,
.swiper4 .swiper-slide,
.swiper5 .swiper-slide {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper1 .swiper-slide img,
.swiper2 .swiper-slide img,
.swiper4 .swiper-slide img,
.swiper5 .swiper-slide img {
  display: block;
  width: 80%;
  height: 100%;
  object-fit: cover;
}


/* =========================================================
   swiper3
   中央＋左右の前後スライドを少し見せる
   幅はJSの slidesPerView で制御
========================================================= */
.swiper3 {
  width: 100%;
  height: auto;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 0 45px;
}

.swiper3 .swiper-wrapper {
  align-items: center;
}

.swiper3 .swiper-slide {
  height: auto !important;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* swiper3 画像 */
.swiper3 .swiper-slide img {
  display: block;
  width: 85%;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

/* swiper3 動画 */
.swiper3 .swiper-slide video {
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}


/* =========================================================
   ページネーション
========================================================= */
.swiper .swiper-pagination-bullet {
  width: 17px;
  height: 17px;
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 5px) !important;
  background: #9fa0a0;
  opacity: 0.9;
}

.swiper .swiper-pagination-bullet:hover {
  filter: brightness(0.9);
  cursor: pointer;
}

.swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #ff4190;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  transform: scale(1.05);
  transition:
    transform .12s,
    background-color .12s;
}


/* =========================================================
   Swiper 矢印
========================================================= */
.swiper-button-next,
.swiper-button-prev {
  width: var(--swiper-navigation-size);
  height: var(--swiper-navigation-size);
  border-radius: 50%;
  background: #ff4190;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}


/* 右ボタン位置 */
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 3px);
  left: auto;
}


/* 左ボタン位置 */
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: var(--swiper-navigation-sides-offset, 3px);
  right: auto;
}


/* =========================================================
   3連矢印
========================================================= */
.swiper-button-next::after,
.swiper-button-prev::after {
  content: "›››" !important;
  font-family: Arial, sans-serif;
  font-size: 25px;
  font-weight: 300;
  letter-spacing: -2px;
  line-height: 1;
  color: #fff;
  width: 24px;
  height: auto;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  transform: none;
}


/* 右 */
.swiper-button-next::after {
  margin-left: -5px;
  margin-top: -3px;
  animation: swipeNextElegant 1.8s ease-in-out infinite;
}


/* 左 */
.swiper-button-prev::after {
  content: "‹‹‹" !important;
  margin-right: -5px;
  margin-top: -3px;
  animation: swipePrevElegant 1.8s ease-in-out infinite;
}


/* =========================================================
   矢印アニメーション
========================================================= */
@keyframes swipeNextElegant {
  0%,
  100% {
    transform: translateX(0);
    opacity: 1;
  }

  50% {
    transform: translateX(4px);
    opacity: 0.75;
  }
}

@keyframes swipePrevElegant {
  0%,
  100% {
    transform: translateX(0);
    opacity: 1;
  }

  50% {
    transform: translateX(-4px);
    opacity: 0.75;
  }
}


/* =========================================================
   ページネーション位置
========================================================= */
.swiper1 .swiper-pagination {
  bottom: 4%;
}

.swiper2 .swiper-pagination {
  bottom: 4%;
}

.swiper3 .swiper-pagination {
  bottom: 4%;
}

.swiper4 .swiper-pagination {
  bottom: 4%;
}

.swiper5 .swiper-pagination {
  bottom: 13%;
}


/* =========================================================
   SP
========================================================= */
@media (max-width: 639px) {

  .swiper3 {
    width: 100%;
    padding-bottom: 45px;
  }

}


/* =========================================================
   PC
========================================================= */
@media (min-width: 640px) {

  .swiper {
    --swiper-navigation-size: 56px;
  }

  .swiper-button-next,
  .swiper-button-prev {
    background: #ff4190;
  }

  .swiper .swiper-pagination-bullet {
    width: 25px;
    height: 25px;
    margin: 0 8px;
    background: #9fa0a0;
  }

  .swiper1 .swiper-pagination {
    bottom: 4%;
  }

  .swiper2 .swiper-pagination {
    bottom: 4%;
  }

  .swiper3 .swiper-pagination {
    bottom: 4%;
  }

  .swiper4 .swiper-pagination {
    bottom: 4%;
  }

  .swiper5 .swiper-pagination {
    bottom: 13%;
  }

  .swiper-button-prev {
    left: 15px;
  }

  .swiper-button-next {
    right: 15px;
  }

  .swiper3 {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-bottom: 60px;
  }

}


/* =========================================================
   OPENトグルボタン
========================================================= */
.toggle-btn {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  display: block;
  width: 100%;
  line-height: 0;
  font-size: 0;
  box-sizing: border-box;
}


/* トグル画像 */
.toggle-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}


/* 矢印共通 */
.toggle-btn .arrow1,
.toggle-btn .arrow2 {
  position: absolute;
  left: 83%;
  transform: translate(-50%, -50%);
  width: 3%;
  border-radius: 50%;
  border: 1px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-sizing: border-box;
  background: rgba(0,0,0,0);
  opacity: 1;
  transition:
    opacity .3s ease,
    transform .3s ease;
}

.toggle-btn .arrow1 {
  top: 55%;
}

.toggle-btn .arrow2 {
  top: 55%;
}

.arrow1 svg,
.arrow2 svg {
  width: 100%;
  height: 100%;
  stroke: white;
  stroke-width: 2px;
  fill: none;
  transition: transform .3s ease;
}


/* アクティブ時 */
.toggle-btn.active .arrow1,
.toggle-btn.active .arrow2 {
  opacity: 0.6;
  transform:
    translate(-50%, -50%)
    rotate(180deg);
}


/* 開閉コンテンツ */
.toggle-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .36s ease;
  margin-top: 0;
  padding: 0;
}


/* =========================================================
   フェードイン（上から）
========================================================= */
div.column.-column1.-fadeInDown {
  opacity: 0;
  transform: translateY(-50px);
  will-change: opacity, transform;
  animation:
    hc_fadeInTop
    1.8s
    cubic-bezier(.14,.84,.36,1)
    0.12s
    both;
}

@keyframes hc_fadeInTop {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================================================
   フェードイン（下から）
========================================================= */
.-fadeInUp {
  opacity: 0;
  transform: translateY(15px);
  will-change: opacity, transform;
  animation:
    hc_fadeInBottom
    1.4s
    cubic-bezier(.14,.84,.36,1)
    0.12s
    both;
}

@keyframes hc_fadeInBottom {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================================================
   動きを減らす設定
========================================================= */
@media (prefers-reduced-motion: reduce) {

  div.column.-column1.-fadeInDown,
  .-fadeInUp {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

}


/* =========================================================
   左下追従ボタン
========================================================= */
#w-bottom-left {
  position: sticky;
  opacity: 1;
  transition: opacity 1s ease;
}

#w-bottom-left.fade-out {
  opacity: 0 !important;
  pointer-events: none;
}




/* =========================================================
   左下追従ボタン
========================================================= */

/* 左から */
.-fadeInLeft {
	animation-name: customFadeInLeft !important;
	animation-duration: 1.5s !important;
	animation-delay: 0.18s !important;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
	animation-fill-mode: both !important;
}

/* 下から */
.-fadeInUp {
	animation-name: customFadeInUp !important;
	animation-duration: 1.5s !important;
	animation-delay: 0.18s !important;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
	animation-fill-mode: both !important;
}

/* 右から */
.-fadeInRight {
	animation-name: customFadeInRight !important;
	animation-duration: 1.5s !important;
	animation-delay: 0.18s !important;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
	animation-fill-mode: both !important;
}


/* 左 → 定位置 */
@keyframes customFadeInLeft {
	from {
		opacity: 0;
		transform: translateX(-28px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* 下 → 定位置 */
@keyframes customFadeInUp {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 右 → 定位置 */
@keyframes customFadeInRight {
	from {
		opacity: 0;
		transform: translateX(28px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}