@charset "UTF-8";

html {
  font-size: 62.5%;
}

body {
  font-size: clamp(1.5rem, 1.6vw, 1.8rem);
  font-family:
    "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
  /* font-family: 'NotoSansJP', sans-serif; */

  letter-spacing: 0.04em;
  background: #262626;
  color: #262626;
	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, 96vw, 960px);
  display: block;
  margin: 0 auto;
}

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

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

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

/* ****** gif-anm用追加 ****** */
.swiper-slide div img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

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

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

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

.ctr1 .txt,
.ctr2 .txt,
.ctr1 .atn,
.ctr2 .atn {
	padding: 12px 18px 8px;
}

/*
.lft1 .txt,
.lft2 .txt,
*/
.ctr1 .txt,
.ctr2 .txt {
	color: #262626;
	background: rgba(234, 234, 234, 0.72);/*#eaeaea*/
}

/*
.lft1 .atn,
.lft2 .atn,
*/
.ctr1 .atn,
.ctr2 .atn {
  color: #262626;
  background: rgba(255, 204, 0, 0.72);/*#ffcc00*/
}
/*  */

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

.lft2,
.ctr2 {
	top: 84%;
}
/*  */
.swiper-slide div.slide16-9 {
  margin-bottom: 144px;
}

.swiper-slide div.slide16-9 .ctr1 {
  top: 100%;
}

.swiper-slide div.slide16-9 .ctr2 {
  top: 120%;
}
/*  */
.swiper-slide div.contrast_05 {
  margin-bottom: 72px;
}

.swiper-slide div.contrast_05 .ctr1 {
  top: 114%;
}

.swiper-slide div.contrast_05 .ctr2 {
  top: 144%;
}



/*  */

/*
.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 #727272;
}

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

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