@charset "UTF-8";

html {
  font-size: 62.5%;
}

body {
  font-size: clamp(1.5rem, 1.6vw, 1.8rem);
  font-family: 'NotoSansJP', sans-serif;
  /* font-feature-settings: "palt"; */
  letter-spacing: 0;
  background: #ddd;
  color: #191919;
	/* color: #f3f3f3; */
	margin: 24px auto 0;
}

/* ========== ========== ========== ========== ========== */
img {
  max-width: 100%;
  height: auto;

  vertical-align: bottom;
}

a:link,
a:visited {
  color: #0d6efd;
  text-decoration: none;
  transition: all .2s;
}

a:hover {
  color: #207afd;
  text-decoration: none;
  opacity: 0.84;
}

a:link img,
a:visited img {
  opacity: 1;
  transition: all .2s;
}

a img:hover {
  opacity: 0.92;
}

/* ========== ========== ========== ========== ========== */

header,
main,
footer {
  width: clamp(280px, 90vw, 960px);
  display: block;
  margin: 0 auto;
}

/* ========== ========== ========== ========== ========== */

.swiper-container {
	padding: 36px 0;
  margin: 0 0 72px;
	background: #ddd;
}

.swiper-slide div {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}

/*  */

.lft1,
.lft2,
.ctr1,
.ctr2 {
	position: absolute;
  width: 100%;
  font-size: clamp(1.5rem, 1.8vw, 2.4rem);
}

.lft1,
.lft2 {
  left: 12px;
	text-align: left;
}

.ctr1,
.ctr2 {
  left: 0;
  text-align: center;
}

.lft1,
.ctr1 {
	top: 72%;
}

.lft2,
.ctr2 {
	top: 84%;
}

.lft1 .txt,
.lft2 .txt,
.lft1 .atn,
.lft2 .atn,
.ctr1 .txt,
.ctr2 .txt,
.ctr1 .atn,
.ctr2 .atn {
  padding: 6px 12px;
	/* padding: 12px 18px 8px; */
}

.lft1 .txt,
.lft2 .txt,
.ctr1 .txt,
.ctr2 .txt {
	color: #191919;
	background: rgba(243, 243, 243, 0.96);
}

.lft1 .atn,
.lft2 .atn,
.ctr1 .atn,
.ctr2 .atn {
  color: #191919;
	background: #fc0;
}


/*  */

.swiper-slide-active .lft1 {
  animation: slideFromRight 1.2s ease 0s 1 normal;
}

.swiper-slide-active .lft2 {
  animation: slideFromRightSub 2.4s ease 0s 1 normal;
}

.swiper-slide-active .ctr1 {
  animation: slideFromTop 1.2s ease 0s 1 normal;
}

.swiper-slide-active .ctr2 {
  animation: slideFromTopSub 2.4s ease 0s 1 normal;
}

@keyframes slideFromRight {
  0%, 25% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes slideFromRightSub {
  0%, 45% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

/*  */

@keyframes slideFromTop {
  0%, 25% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes slideFromTopSub {
  0%, 45% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

/* ========== ========== ========== ========== ========== */

footer {
  border-top: 1px dotted #ccc;
}

footer p {
  padding: 24px 0;
  text-align: center;
  color: #aaa;

  font-weight: 400;
  font-size: 1.3rem;
}