@charset "UTF-8";
/*------------------------------------------------------------------------------
  reset
------------------------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Spartan:wght@400;700&display=swap");
:root {
  --easing: cubic-bezier(0.2, 1, 0.2, 1);
  --transition: 0.8s var(--easing);
  --color-base: #0c1210;
  --color-gray: #ddd;
  --color-theme: #b4e900;
  --color-theme-darken: #6e8f00;
  --color-text: #adbdb7;
  --box-shadow: 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.05),
    -0.8rem -0.8rem 1.2rem #fff;
  --box-shadow-hover: 1rem 1rem 1.5rem rgba(0, 0, 0, 0.08),
    -1rem -1rem 1.5rem #fff;
  --box-shadow-inset: inset 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.05),
    inset -0.8rem -0.8rem 1.2rem #fff;
  --box-shadow-dark: 0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.1),
    -0.8rem -0.8rem 1.2rem rgba(#fff, 0.2);
}


input,
select,
textarea,
button {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  appearance: none;
}

:focus:not(:focus-visible) {
  outline: 0;
  /* キーボード操作"以外"でフォーカスされた際はoutlineを消す */
}

main {
  display: block;
width:100%;
max-width:1280px;
height:auto;
margin:0 auto;
}



/* slider */
.slide-media{
  position: relative;
  overflow: hidden;
}

.slide-media img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  object-fit:cover;
}

.splide {
  z-index: 0;
}


.slide-clinic {
  overflow: hidden;
}

.slide-clinic .l-inner {
  padding-bottom: 0;
}


.slide-clinic .splide__track--fade .splide__slide {
  pointer-events: none;
}

.slide-clinic .splide__track--fade .splide__slide.is-active {
  pointer-events: auto;
}

.slide-clinic .slide {
 position: relative;
  width: 100%;
  text-align: center;
}
.slide-clinic .slide::before {
 content: "";
  display: block;
  padding-top: 66.66%; /* 比率を指定 */
}

.slide-clinic .slide-media {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.slide-clinic .slide-media img {
  transition: 7s 1s linear;
  transform: translateX(-1.5%) scale(1.1);
}

.slide-clinic .slide-title{
  animation: 2s var(--easing) both;
  opacity: 0;
  font-size: 2.6rem;
  font-weight:bold;
  text-shadow: 0.02em 0.02em 0.02em rgba(0,0,0,1);
text-align:center;
  line-height: 1.1;
  color: #FFF;
  position: absolute;
  top: 45%;
  left: 0;
  right:0;
}

.slide-clinic .slide-title .subTtl{
  font-size: 1.6rem;
  line-height: 1;
}



.slide-clinic .slide-text{
text-align:center;
  animation: 2s var(--easing) both;
  opacity: 0;
  margin-bottom: 1rem ;
  font-size: 1.6rem;
  color: #fff;
  animation-delay: 0.2s;
  position: absolute;
  right: 0;
  bottom: 0;
  left:0;
}

.slide-clinic .splide__slide[class*=-active] .slide-media img {
  transition-delay: 0s;
  transform: translateX(1.5%) scale(1.05);
}

.slide-clinic .splide__slide.anm-started .slide-title,
.slide-clinic .splide__slide.anm-started .slide-text{
  animation-name: slide-clinic-fadeIn;
}

.slide-clinic .splide__slide.anm-finished .slide-title,
.slide-clinic .splide__slide.anm-finished .slide-text {
  animation-name: slide-clinic-fadeOut;
}
@keyframes slide-clinic-fadeIn {
  0% {
    transform: translateY(6rem);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-clinic-fadeOut {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-6rem);
    opacity: 0;
  }
}


/*# sourceMappingURL=style.css.map */