@charset "utf-8";
/* CSS Document */
/* 
-------------------------------------------------- */
body {
	position: relative;
	margin:0;
	text-align: center;
	font-size:10px;
	line-height: 1;
	
	font-family: "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	color: #333;
}

img {
	width:100%; height:auto;	
}
a { text-decoration: none;}
a:hover img { opacity: .85;}

.wrapper {
	width:min(100%, 640px); margin: 0 auto;
	border:1px solid #ff3e83;
	background: url("../img/bg_01.png") center top repeat-y;
	background-size: 100% auto;
}
.inner { position: relative; margin-top: -7%; padding-bottom:10%; z-index: 0;}
.inner::before { content:'';
	position: absolute;	top:0; left: 5%;
	width:90%; height: 100%;
	background:#fff; border-radius: 25px; z-index: -1;
	
}

@media (min-width: 769px) {
/* tablet+PC用 */
	.pc { display: block;}
	.sp { display: none;}
}
@media (max-width: 768px) {
/* SP用 */
	.pc { display: none;}
	.sp { display: block;}
	
	body { width:100%;}
}
@media (max-width: 480px) {
/* SP用 */
}


/* header
-------------------------------------------------- */
.header .kv_03 {
	margin-top:-56%;
    animation:starsAnime01 .65s ease-out forwards;
	animation-iteration-count:1;
}
@keyframes starsAnime01 {
	0% { 
		opacity: 0;
		visibility: hidden;
		transform:scale(0.5);
	}
	100% { 
		opacity: 1;
		visibility: visible;
		transform:scale(1);
	}
}


/* 
-------------------------------------------------- */
.sec_02 { margin:8% 0 0;}

.inner .btn a {
	display: block; margin:0% 9% 3%;
}

.img_ttl { position: relative; z-index: 2;}

.inner p { margin:12px 9%; font-size:12px; line-height: 1.3; text-align: left;}
.inner p .attention { color: #de0020;}
.inner .notice { margin:12px 9% 0; font-size:10px; line-height: 1.3; text-align: left;}
.inner p + .notice { padding-top: 12px; border-top:1px solid #333;}

@media (min-width: 769px) {
/* tablet+PC用 */
}
@media (max-width: 768px) {
/* SP用 */
}
@media (max-width: 480px) {
/* SP用 */
}


/* footer
-------------------------------------------------- */
.footer {
	margin-top: 8%; padding-top: 1%;
	background: #fff;}
.footer .cv { padding: 2em 0 6em; text-align: center;}
.footer .cv p a { position: relative; padding-right:0.85em; font-size:min(8vw, 24px); font-weight: bold; color: #000;}
.footer .cv p a::before { content:''; position: absolute; right: 0; top:50%; transform: translateY(-50%) rotate(45deg);
	width:14px; height:14px;
	border-top: 2px solid #ff3e83; border-right:2px solid #ff3e83;
}
footer .add { margin: 0 4.5%; padding:.9em 1.1em; font-size:14px; line-height: 1.5; text-align: left; background: #f7d9e5;}
.footer--attention_01 { margin:7% 5%; text-align: left; line-height: 1.4; font-size:13px;}
.footer--attention_01 strong { color: #f00; }
.copyright { padding:0 0 1.5em; font-size:12px;}
@media (min-width: 769px) {
/* tablet+PC用 */
}
@media (max-width: 768px) {
/* SP用 */
}
@media (max-width: 480px) {
/* SP用 */
}



/* 
-------------------------------------------------- */
@media (min-width: 769px) {
/* tablet+PC用 */
}
@media (max-width: 768px) {
/* SP用 */
}
@media (max-width: 480px) {
/* SP用 */
}


/* 
-------------------------------------------------- */
@media (min-width: 769px) {
/* tablet+PC用 */
}
@media (max-width: 768px) {
/* SP用 */
}
@media (max-width: 480px) {
/* SP用 */
}


/* 
-------------------------------------------------- */
@media (min-width: 769px) {
/* tablet+PC用 */
}
@media (max-width: 768px) {
/* SP用 */
}
@media (max-width: 480px) {
/* SP用 */
}



/* 
-------------------------------------------------- */
@media (min-width: 769px) {
/* tablet+PC用 */
}
@media (max-width: 768px) {
/* SP用 */
}
@media (max-width: 480px) {
/* SP用 */
}


/* 
-------------------------------------------------- */
@media (min-width: 769px) {
/* tablet+PC用 */
}
@media (max-width: 768px) {
/* SP用 */
}
@media (max-width: 480px) {
/* SP用 */
}

/* 
-------------------------------------------------- */
@media (min-width: 769px) {
/* tablet+PC用 */
}
@media (max-width: 768px) {
/* SP用 */
}
@media (max-width: 480px) {
/* SP用 */
}



/* 
-------------------------------------------------- */
@media (min-width: 769px) {
/* tablet+PC用 */
}
@media (max-width: 768px) {
/* SP用 */
}
@media (max-width: 480px) {
/* SP用 */
}


/* 
-------------------------------------------------- */
@media (min-width: 769px) {
/* tablet+PC用 */
}
@media (max-width: 768px) {
/* SP用 */
}
@media (max-width: 480px) {
/* SP用 */
}

/* animation
-------------------------------------------------- */
.slideup {
	opacity : 0;
	transform: translateY(60px);
	transition: all 1000ms ;
}
.fromleft {
	opacity : 0;
	transform: translateX(-100%);
	transition: all 1250ms ;
}
.fromright {
	opacity : 0;
	transform: translateX(100%);
	transition: all 1250ms ;
}

.fadeIn {
	opacity: 0;
	animation-delay: 0;
	animation-name: fadeIn01;
	animation-duration:1.5s;
	animation-fill-mode: forwards;
}
@keyframes fadeIn01 {
	0% { opacity : 0;}
	100% {
		opacity : 1;
		transform: translate(0);
	}
}

.fuwa01 {
	animation: fuwa01 2s ease-in-out infinite;
}
@keyframes fuwa01 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px); /* 上に10px移動 */
  }
  100% {
    transform: translateY(0);
  }
}

.fuwa02 {
	animation: fuwa02 2.6s ease-in-out infinite;
}
@keyframes fuwa02 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px); /* 上に10px移動 */
  }
  100% {
    transform: translateY(0);
  }
}

.fuwa03 {
	animation: fuwa03 3.2s ease-in-out infinite;
}
@keyframes fuwa03 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px); /* 上に10px移動 */
  }
  100% {
    transform: translateY(0);
  }
}

.dt01 { transition-delay:0.1s;}
.dt02 { transition-delay:0.2s;}
.dt03 { transition-delay:0.3s;}
.dt04 { transition-delay:0.4s;}
.dt05 { transition-delay:0.5s;}
.dt08 { transition-delay:0.8s;}
.dt10 { transition-delay:1.0s;}
.dt12 { transition-delay:1.2s;}

.ad01 {	animation-delay:0.1s;}
.ad02 {	animation-delay:0.2s;}
.ad03 {	animation-delay:0.3s;}
.ad04 {	animation-delay:0.4s;}
.ad05 {	animation-delay:0.5s;}
.ad06 {	animation-delay:0.6s;}
.ad07 {	animation-delay:0.7s;}
.ad08 {	animation-delay:0.8s;}
.ad09 {	animation-delay:0.9s;}

.ad10 {	animation-delay:1.0s;}
.ad11 {	animation-delay:1.1s;}
.ad16 {	animation-delay:1.6s;}

.ad20 {	animation-delay:2.0s;}
.ad30 {	animation-delay:3.0s;}


@media (min-width: 769px) {
/* tablet+PC用 */
}
@media (min-width: 1024px) {
/* PC用 */
}
@media (min-width: 1400px) {
/* PC-wide用 */
}
@media (min-width: 769px) and ( max-width: 1023px) {
/* tablet用 */
}
@media (max-width: 768px) {
/* tablet用 */
}
@media (max-width: 480px) {
/* SP用 */
}