/*----------------------------------------------------------------------
よく使うモジュール一覧
----------------------------------------------------------------------*/
:root {
/* スペース（余白・間隔） */
--space-xs: clamp(1.25rem, 1rem + 0.98vw, 1.875rem); /* 20-30px */
--space-sm: calc(var(--space-xs) * 1.5); /* 30-45px */
--space-md: calc(var(--space-xs) * 2); /* 40-60px */
--space-lg: calc(var(--space-xs) * 3); /* 60-90px */
--space-xl: calc(var(--space-xs) * 4); /* 80-120px */
--space-jump: clamp(1.25rem, 0.35rem + 3.8vw, 3.75rem); /* 20-60px */
}

html{
	overflow-y: scroll;
}

sup,sub {
	font-size: 65%;
}

input[type="submit"], input[type="button"] {
	border-radius: inherit;
	-webkit-appearance: none;
}

img{
  height: auto;
  max-width: 100%;
  image-rendering: -webkit-optimize-contrast;	
}

a {
	text-decoration: none;
}

a:active, a:focus{
	outline:none;
	
}

article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary {
display:block;
}


.fadeInTrigger,
.fadeUpTrigger,
.fadeLeftTrigger,
.fadeRightTrigger,
.delayScroll li{
  opacity: 0;
}

/* フェードイン */
.fadeIn{
opacity:0;
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */
.fadeUp{
  opacity: 0;
  animation-name: fadeUpAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 左から */
.fadeLeft{
  opacity:0;
  animation-name:fadeLeftAnime;
  animation-duration: 1s;
  animation-fill-mode:forwards;
}
@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }
  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* 右から */
.fadeRight{
  opacity:0;
  animation-name:fadeRightAnime;
  animation-duration: 1s;
  animation-fill-mode:forwards;
}
@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }
  to {
    opacity: 1;
  transform: translateX(0);
  }
}

.delay-1{
  animation-delay: 1s;
}

@media (min-width: 768px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: text;
    text-decoration: none;
  }
}

@media screen and (max-width: 768px) {

.fadeUp.active{
	animation: none;
	opacity: 1;
}
	
img {
    image-rendering: auto;
}

}