/* A Modern CSS Reset */
*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
*{
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 900;
}
a{
	transition: all .3s;
}
a:hover{
	opacity: .7;
}
ul{
	list-style: inside none;
	padding: 0;
}
img{
	display: block;
	max-width: 100%;
	vertical-align: bottom;
	width: 100%;
}
p{
	font-size: 18px;
	line-height: 2em;
}
.center{
	text-align: center;
}
.center img{
	margin: 0 auto;
	text-align: center;
}
#wrapper{
	margin: 0 auto;
	max-width: 640px;
	overflow: hidden;
	width: 100%;
}
.ul{
	background: linear-gradient(transparent 50%, #fff100 50%);
}
.delay1{
	animation-delay: 0.1s;
}
.delay2{
	animation-delay: 0.2s;
}
.delay3{
	animation-delay: 0.3s;
}
.delay4{
	animation-delay: 0.4s;
}
.delay5{
	animation-delay: 0.5s;
}
.delay6{
	animation-delay: 0.6s;
}
.delay7{
	animation-delay: 0.7s;
}
.delay8{
	animation-delay: 0.8s;
}
.delay9{
	animation-delay: 0.9s;
}
.delay10{
	animation-delay: 1.0s;
}
/*===============================================
 * header
===============================================*/
header{
	padding: 0;
	position: relative;
}
.header_title{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}
header h1 img{
	margin: 0;
	width: 100%;
}
header{
	position: relative;
}
header > img{
	position: relative;
	top: 0;
	left: 0;
	z-index: 0;
}
.header_inner{
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: 1;
}
.header_inner img{
	width: 100%;
}
.header_inner h1{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
}
.header_inner p,
.header_inner span{
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
}
.header_inner > img{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}
section{
	padding: 0;
}
h2{
	font-size: 30px;
	letter-spacing: 2px;
	text-align: center;
}

.pre-first-btn_area {
  position: absolute;
  bottom: -1%;
  left: 5%;
  transform: translateX(-50%);
  width: 90%; /* ボタンサイズ調整 */
  max-width: none; /* スマホ表示でも大きすぎないよう制限 */
  z-index: 10;
  text-align: center;
}

.pre-first-btn_area img {
  width: auto;
  max-width:　none;
  height: auto;
  display: block;
}
.intro{
	background: #eff;
	padding: 0;
	position: relative;
	z-index: 0;
}
.intro > p{
	margin: 0;
}
.intro > p > img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}
#cta1 {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  overflow: hidden;
}

#cta1 > img {
  width: 100%;
  height: auto;
  display: block;
}

#cta1 ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 2;
}

#cta1 ul li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  line-height: 0;
}

#cta1 ul li img {
  position: static;
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}
.first-btn_area {
  position: absolute;
  bottom: 8%;
  left: 5%;
  transform: translateX(-50%);
  width: 90%; /* ボタンサイズ調整 */
  max-width: none; /* スマホ表示でも大きすぎないよう制限 */
  z-index: 10;
  text-align: center;
}

.first-btn_area img {
  width: 100%;
  height: auto;
  display: block;
}
#point {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin-top: -20px;
  overflow: hidden;

}

#point > img {
  width: 100%;
  height: auto;
  display: block;
}

#point ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 2;
}

#point ul li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  line-height: 0;
}

#point ul li img {
  position: static;
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}
#cta2 {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
 margin-top: -23px;
  overflow: hidden;
}

#cta2 > img {
  width: 100%;
  height: auto;
  display: block;
}

#cta2 ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 2;
}

#cta2 ul li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  line-height: 0;
}

#cta2 ul li img {
  position: static;
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}
.second-btn_area {
  position: absolute;
  bottom: 8%;
  left: 5%;
  transform: translateX(-50%);
  width: 90%; /* ボタンサイズ調整 */
  max-width: none; /* スマホ表示でも大きすぎないよう制限 */
  z-index: 10;
  text-align: center;
}

.second-btn_area img {
  width: 100%;
  height: auto;
  display: block;
}
#sp {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin-top: -47px;
  overflow: hidden;

}

#sp > img {
  width: 100%;
  height: auto;
  display: block;
}

#sp ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 2;
}

#sp ul li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  line-height: 0;
}

#sp ul li img {
  position: static;
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}
#cta3 {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
 margin-top: -23px;
  overflow: hidden;
}

#cta3 > img {
  width: 100%;
  height: auto;
  display: block;
}

#cta3 ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 2;
}

#cta3 ul li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  line-height: 0;
}

#cta3 ul li img {
  position: static;
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}
.third-btn_area {
  position: absolute;
  bottom: 8%;
  left: 5%;
  transform: translateX(-50%);
  width: 90%; /* ボタンサイズ調整 */
  max-width: none; /* スマホ表示でも大きすぎないよう制限 */
  z-index: 10;
  text-align: center;
}

.third-btn_area img {
  width: 100%;
  height: auto;
  display: block;
}
#spt {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin-top: -24px;
  overflow: hidden;

}

#spt > img {
  width: 100%;
  height: auto;
  display: block;
}

#spt ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 2;
}

#spt ul li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  line-height: 0;
}

#spt ul li img {
  position: static;
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}
#voice {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin-top: 6px;
  overflow: hidden;

}

#voice > img {
  width: 100%;
  height: auto;
  display: block;
}

#voice ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 2;
}

#voice ul li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  line-height: 0;
}

#voice ul li img {
  position: static;
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}
#cta4 {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
 margin-top: 0px;
  overflow: hidden;
}

#cta4 > img {
  width: 100%;
  height: auto;
  display: block;
}

#cta4 ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 2;
}

#cta4 ul li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  line-height: 0;
}

#cta4 ul li img {
  position: static;
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}
.forth-btn_area {
  position: absolute;
  bottom: 8%;
  left: 5%;
  transform: translateX(-50%);
  width: 90%; /* ボタンサイズ調整 */
  max-width: none; /* スマホ表示でも大きすぎないよう制限 */
  z-index: 10;
  text-align: center;
}

.forth-btn_area img {
  width: 100%;
  height: auto;
  display: block;
}
footer {
  height: 20px; /* 好きなサイズに */
	margin-top: -20px;
}
@keyframes bounce-in-top-tighter {
  0% {
    transform: translateY(-80px);
    opacity: 0;
  }
  60% {
    transform: translateY(0);
    opacity: 1;
  }
  80% {
    transform: translateY(-6px);
  }
  100% {
    transform: translateY(0);
  }
}

.bounce-in-top-tighter {
  animation: bounce-in-top-tighter 0.6s ease-out both;
}
@keyframes tada-tight {
  0% {
    transform: scale(1) rotate(0deg);
  }
  10%, 20% {
    transform: scale(0.95) rotate(-2deg);
  }
  30%, 50%, 70%, 90% {
    transform: scale(1.05) rotate(2deg);
  }
  40%, 60%, 80% {
    transform: scale(1.05) rotate(-2deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

.tada-tight {
  animation: tada-tight 0.8s ease both;
}
@keyframes soft-flash-3x {
  0%, 100% { opacity: 1; }
  15%, 45%, 75% { opacity: 0.3; }
  30%, 60%, 90% { opacity: 1; }
}

.soft-flash-3x {
  animation: soft-flash-3x 2.4s ease-in-out both;
}
@keyframes bounce-animista {
  0%, 20%, 53%, 80%, 100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  40% {
    transform: translateY(-30px);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  }

  70% {
    transform: translateY(-15px);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  }

  90% {
    transform: translateY(-4px);
  }
}

.bounce-animista {
  animation: bounce-animista 1s both;
  transform-origin: center bottom;
}
@keyframes bounce-scale-in {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  70% {
    transform: scale(0.95);
  }
  85% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.bounce-scale-in {
  animation: bounce-scale-in 0.6s ease-out both;
}
@keyframes pop-scale-up {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
  }
  70% {
    transform: scale(0.98);
  }
  85% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

.pop-scale-up {
  animation: pop-scale-up 0.5s ease-out both;
}
.delay1s { animation-delay: 0.1s; }
.delay2s { animation-delay: 0.2s; }
.delay3s { animation-delay: 0.3s; }
.delay4s { animation-delay: 0.4s; }
.delay5s { animation-delay: 0.5s; }
.delay10s { animation-delay: 10s; }
@keyframes head-shake {
  0% {
    transform: translateX(0);
  }
  6.5% {
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    transform: translateX(0);
  }
}

.head-shake {
  animation: head-shake 0.8s ease-in-out both;
  transform-origin: center;
}
@keyframes zoom-in-fall {
  0% {
    transform: scale(0.3) translateY(-100px);
    opacity: 0;
  }
  60% {
    transform: scale(1.05) translateY(10px);
    opacity: 1;
  }
  100% {
    transform: scale(1) translateY(0);
  }
}
.zoom-in-fall {
  animation: zoom-in-fall 0.6s ease-out both;
}

@keyframes fade-left-soft {
  0% {
    transform: translateX(-40px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.fade-left-soft {
  animation: fade-left-soft 0.5s ease-out both;
}

@keyframes fade-right-soft {
  0% {
    transform: translateX(40px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.fade-right-soft {
  animation: fade-right-soft 0.5s ease-out both;
}

@keyframes bounce-animista {
  0%, 20%, 53%, 80%, 100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  40% {
    transform: translateY(-30px);
  }
  70% {
    transform: translateY(-15px);
  }
  90% {
    transform: translateY(-4px);
  }
}
.bounce-animista {
  animation: bounce-animista 1s both;
  transform-origin: center bottom;
}

@keyframes soft-flash-loop {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.soft-flash-loop {
  animation: soft-flash-loop 1.2s ease-in-out infinite;
}

@keyframes btn-pulse-loop {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.btn-pulse-loop {
  animation: btn-pulse-loop 1.6s ease-in-out infinite;
}
@keyframes fade-in-left-soft {
  0% {
    transform: translateX(-30px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.fade-in-left-soft {
  animation: fade-in-left-soft 0.5s ease-out both;
}
@keyframes fade-in-soft {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fade-in-soft {
  animation: fade-in-soft 0.6s ease-out both;
}
@keyframes slide-in-sharp-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-sharp-left {
  animation: slide-in-sharp-left 0.35s cubic-bezier(0.5, 1.5, 0.7, 1) both;
}
@keyframes slide-up-sharp {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.slide-up-sharp {
  animation: slide-up-sharp 0.4s cubic-bezier(0.45, 1.5, 0.6, 1) both;
}
@keyframes rotate-pop-in {
  0% {
    transform: rotate(-360deg) scale(0.2);
    opacity: 0;
  }
  60% {
    transform: rotate(15deg) scale(1.2);
    opacity: 1;
  }
  80% {
    transform: rotate(-5deg) scale(0.95);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}

.rotate-pop-in {
  animation: rotate-pop-in 0.6s ease-out both;
}
@keyframes float-fade-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.float-fade-up {
  animation: float-fade-up 0.7s ease-out both;
}
@keyframes fade-in-plain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fade-in-plain {
  animation: fade-in-plain 0.5s ease-out both;
}
@keyframes flash-3x-slow {
  0%, 100% {
    opacity: 1;
  }
  16%, 50%, 84% {
    opacity: 0;
  }
  33%, 66% {
    opacity: 1;
  }
}

.flash-3x-slow {
  animation: flash-3x-slow 2.4s ease-in-out both;
}
.shine-effect {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.shine-effect::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-20deg);
  animation: shine 1s ease-in-out 1;
  pointer-events: none;
}

@keyframes shine {
  0% { left: -75%; }
  100% { left: 125%; }
}
.shine-effect-delay05s::before { animation-delay: 0.5s; }
.shine-effect-delay1s::before  { animation-delay: 1s; }
.shine-effect-delay15s::before { animation-delay: 1.5s; }
.shine-effect-delay2s::before  { animation-delay: 2s; }
@keyframes wavy-distort {
  0% {
    transform: scale(1) skew(0deg, 0deg);
  }
  20% {
    transform: scale(1.02, 0.98) skew(1deg, -1deg);
  }
  40% {
    transform: scale(0.98, 1.02) skew(-1deg, 1deg);
  }
  60% {
    transform: scale(1.01, 0.99) skew(0.5deg, -0.5deg);
  }
  80% {
    transform: scale(0.99, 1.01) skew(-0.5deg, 0.5deg);
  }
  100% {
    transform: scale(1) skew(0deg, 0deg);
  }
}

@keyframes anxious-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-2px); }
  40% { transform: translateX(2px); }
  60% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
}

.anxious-shake {
  animation: anxious-shake 0.4s linear both;
}
@keyframes slide-fade-left-soft {
  0% {
    transform: translateX(-30px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-fade-left-soft {
  animation: slide-fade-left-soft 0.6s ease-out both;
}
/* 固定ボタン：中央固定 */
.fixed-btn{
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 640px;
  z-index: 1000;
  text-align: center;
}
.fixed-btn img{
  width: 100%;
  height: auto;
  display: block;
}