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


/* その場でfadeIn */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/* fadeUp */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeUpTrigger{
    opacity: 0;
}

/* modal */

.modal{
	display: none;
	height: 100vh;
	position: fixed;
	top: 0;
	width: 100%;
}
.modal__bg{
	background: rgba(0,0,0,0.8);
	height: 100vh;
	position: absolute;
	width: 100%;
}
.modal__content{
	background: #fff;
	left: 50%;
	padding: 2em;
	position: absolute;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 90%;
	max-width: 750px;
	max-height: 80%;
	overflow: scroll;
	text-align: center;
}
.modal__content p {
	margin: 1em 0;
}
.modal__content p span {
	display: inline-block;
}
.js-modal-close-btn, .js-modal-btn {
	cursor: pointer;
	display: block;
	background: black;
	color: white;
	padding: 0;
	transition: 0.3s;
}
.js-modal-close-btn {
	width: 150px;
	height: 35px;
	line-height: 35px;
	border-radius: 18px;
	margin: 2em auto 0;
}
.js-modal-btn {
	width: 280px;
	height: 45px;
	line-height: 45px;
	border-radius: 23px;
	margin: 1em auto 0.5em;
	padding-left: 20px;
	position: relative;
}
.js-modal-btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 25px;
  margin: auto;
  transform: rotate(45deg);
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  transition: 0.3s;
}
.js-modal-btn:hover, .js-modal-btn:active, .js-modal-close-btn:hover, .js-modal-close-btn:active {
	background: #eb4c88;
}

@media (min-width: 520px) {
	.modal{
		display: none;
		height: 100vh;
		position: fixed;
		top: 0;
		width: 100%;
	}
	.modal__bg{
		background: rgba(0,0,0,0.8);
		height: 100vh;
		position: absolute;
		width: 100%;
	}
	.modal__content{
		background: #fff;
		left: 50%;
		padding: 2.5em;
		position: absolute;
		top: 50%;
		transform: translate(-50%,-50%);
		max-height: 80%;
		overflow: scroll;
	}
}