@charset "utf-8";
/* CSS Document */

body {
  margin: 0;
  padding: 0;

}
.scroll-area {
  width: 100%;
  height: 100vh;
  overflow: auto;
  -webkit-scroll-behavior: smooth;
  scroll-behavior: smooth;
  -webkit-scroll-snap-type: mandatory;
  scroll-snap-type: mandatory;
  -webkit-scroll-snap-points-y: repeat(100%);
  scroll-snap-points-y: repeat(100%);
	
	
}
.box {
  width: 100%;
  /*height: 100vh;*/
  color: #080808;
  display: flex;
  align-items: center; /* 縦方向中央揃え */
  justify-content: center; /* 横方向中央揃え */
  flex-direction: column;
   font-weight: bold;
	font-size: 50px;

}
.inner{
  position: relative;
  text-align: left;

}
.inner img{
  width: 100%;
}

.ac{
  text-align: center;
}


.bt-area{
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translate(-50%, -50%);
}








.bt-next{
	background-color: blue;
	color: #FFF;
	border-radius: 20px;
	text-decoration: none;
	padding: 0.2em 1em 0.2em 1em;
  font-size: clamp(18px,3.0vw,38px);
  margin: 0 10px;

}
.bt-back{
	background-color: rgb(108, 108, 113);
	color: #FFF;
	border-radius: 20px;
	text-decoration: none;
	padding: 0.2em 1em 0.2em 1em;
  font-size: clamp(18px,3.0vw,38px);
  margin: 0 10px;
}

.bt-top{
	background-color: rgb(255, 0, 0);
	color: #FFF;
	border-radius: 20px;
	text-decoration: none;
	padding: 0.2em 1em 0.2em 1em;
  font-size: clamp(18px,3.0vw,38px);
  margin: 0 10px;
}







.bt-translation{
  position: absolute;
  top: 10%;
  right: 1%;
  transform: translate(-50%, -50%);
}
.bt-en{
	background-color: rgb(144, 144, 144);
	color: #FFF;
	border-radius: 20px;
	text-decoration: none;
	padding: 0.25em 1em 0.2em 1em;
  font-size: clamp(18px,3.0vw,28px);
  margin: 0 10px;

}




@media screen and (max-width: 559px) {
/* ここに横幅が559px以下の時に発動するスタイルを記述 */

.bt-area{
  position: absolute;
  bottom: -3%;
  left: 25%;
  transform: translate(-5%, -50%);
}

}