@charset "UTF-8";

/*---------------------------------------------

Each Page CSS

coded by d-spica at 2018-12-03

---------------------------------------------*/

section ol {
	list-style: none;
}

section .balloonC {
	display: block;
	position: absolute;
	width: 5.1rem;
	height: 3.3rem;
	display: none;
}

section .balloonI {
	display: block;
	position: absolute;
	width: 4rem;
	height: 2.7rem;
	display: none;
}

section .balloonA {
	display: block;
	position: absolute;
	width: 8.15rem;
	height: 4.35rem;
	display: none;
}

section.smartphone {
	position: absolute;
	top: 0;
	left: 6.93rem;
	padding: 1.45rem 1.4rem 0.8rem;
	background: url("img/f01-bg-frame.png") no-repeat 0 0 / 100% auto;
	width: 16.4rem;
	height: 24.4rem;
	font-size: 0.75rem;
}

section.comment {
	position: absolute;
	top: 1.45rem;
	left: 37.25rem;
	width: 10.6rem;
	line-height: 1.4;
	font-size: 0.75rem;
}

section.comment p {
	margin-bottom: 1.4em;
}

section .comment em {
	color: #E50012;
}

section .text {
	position: absolute;
	bottom: 0;
	left: 0;
	visibility: hidden;
	height: 0;
}


#f01 {
	background: url("img/f01-bg.png") no-repeat 0 0;
	background-size: 100% auto;
}

#f01 .name {
	position: absolute;
	top: 16.3rem;
	left: 3.2rem;
	width: 12.7rem;
}

#f01 .name input {
	box-sizing: border-box;
	border: none;
	outline: none;
	background: rgba(0,0,0,0.5);
	padding: 0.2em 0.5em;
	width: 100%;
	font-size: 1rem;
	color: #FFF;
}

#f01 .name .balloonI {
	top: -2rem;
	right: -2rem;
}

#f01 .name i {
	position: absolute;
	top: -0.8rem;
	left: 0.4rem;
	width: 2rem;
}

#f01 .button1 {
	position: absolute;
	bottom: 4.1rem;
	left: 3rem;
	width: 13.2rem;
}

#f01 .button1.GO {
	display: none;
	cursor: pointer;
}

#f01 .button1.GO [src*="-o.png"] {
	display: none;
}

#f01 .button1.GO:hover [src*="-c.png"] {
	display: none;
}

#f01 .button1.GO:hover [src*="-o.png"] {
	display: inline-block;
}

#f01 .button1 .balloonC {
	top: -1.4rem;
	right: -2.5rem;
}

#f01 .rule {
	position: absolute;
	top: 2rem;
	left: -6.5rem;
	width: 33.1rem;
	display: none;
}

#f01 .button2 {
	position: absolute;
	bottom: 1.6rem;
	left: 10rem;
	width: 13.2rem;
}

#f01 .button2 a:hover {
	opacity: 1;
}

#f01 .button2 a [src*="-o.png"] {
	display: none;
}

#f01 .button2 a:hover [src*="-c.png"] {
	display: none;
}

#f01 .button2 a:hover [src*="-o.png"] {
	display: inline-block;
}

#f01 .button2 .balloonC {
	top: -1.4rem;
	right: -2.5rem;
}

#f01 .comment2 {
	display: none;
}

#f02 {
	background: url("img/f01-bg.png") no-repeat 0 0;
	background-size: 100% auto;
}

#f02 .monster-in li {
	position: absolute;
	display: none;
}

#f02 .monster-in .capsule {
	top: 13.2rem;
	left: 8.1rem;
	width: 3rem;
	height: 3.5rem;
}

#f02 .monster-in .capsule::before {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	border-radius: 50%;
	background: rgba(0,0,0,0.2);
	width: 3rem;
	height: 1rem;
}

#f02 .monster-in .monster {
	top: 11.6rem;
	left: 6.1rem;
	width: 7rem;
}

#f02 .monster-in .aurora {
	bottom: 6.7rem;
	left: 1.9rem;
	width: 15.5rem;
}

#f02 .monster-in .message {
	top: 3.3rem;
	left: 2.9rem;
	width: 13.5rem;
}
		
#f02 .button {
	position: absolute;
	bottom: 2.5rem;
	left: 3rem;
	width: 13.2rem;
	display: none;
}

#f02 .button a:hover {
	opacity: 1;
}

#f02 .button [src*="-o.png"] {
	display: none;
}

#f02 .button a:hover [src*="-c.png"] {
	display: none;
}

#f02 .button a:hover [src*="-o.png"] {
	display: inline-block;
}

#f02 .button .balloonC {
	top: -1.5rem;
	right: -2.5rem;
}


#f03 {
	background: url("img/f01-bg.png") no-repeat 0 0;
	background-size: 100% auto;
}

#f03 .message {
	position: absolute;
	top: 2.1rem;
	left: 2rem;
	width: 9.4rem;
}

#f03 .message img:nth-of-type(n+2) {
	display: none;
}

#f03 .stage {
	position: absolute;
	top: 2.1rem;
	right: 2rem;
	width: 4.2rem;
}

#f03 .battle .icons {
	position: absolute;
	bottom: 1.1rem;
	left: 8.1rem;
	width: 3.1rem;
}

#f03 .battle .icons i {
	display: block;
	position: relative;
	cursor: pointer;
}

#f03 .battle .icons .balloonC {
	top: -1.8rem;
	right: -3rem;
}

#f03 .battle .treasure i {
	position: absolute;
	top: 16rem;
	left: 8.3rem;
	z-index: 1;
	width: 2.6rem;
}

#f03 .battle .enemy {
	position: absolute;
	top: 7.4rem;
	left: 7.5rem;
	width: 4.1rem;
}

#f03 .battle .barM {
	position: absolute;
	top: 12.6rem;
	left: 1.5rem;
	width: 16.1rem;
}

#f03 .battle .barM img:nth-of-type(n+2) {
	display: none;
}

#f03 .battle .barM span {
	display: block;
	position: absolute;
	top: -0.1rem;
	left: 5.6rem;
	width: 4.8rem;
	display: none;
}
	
#f03 .battle .barE {
	position: absolute;
	top: 11rem;
	left: 6.2rem;
	width: 6.8rem;
}

#f03 .battle .barE img:nth-of-type(n+2) {
	display: none;
}

#f03 .battle .fire {
	position: absolute;
	top: 8.5rem;
	left: 6.1rem;
	width: 3.6rem;
	display: none;
}

#f03 .battle .damage i {
	display: block;
	position: absolute;
	width: 2.6rem;
	display: none;
}

#f03 .battle .damage i:nth-of-type(1) {
	top: 6.4rem;
	left: 6.9rem;
}

#f03 .battle .damage i:nth-of-type(2) {
	top: 8.8rem;
	left: 10.2rem;
}

#f03 .battle .damage span {
	display: block;
	position: absolute;
	top: 6rem;
	left: 10rem;
	width: 4rem;
	display: none;
}

#f03 .battle .damage span img:nth-of-type(n+2) {
	display: none;
}

#f03 .button {
	position: absolute;
	top: 1.45rem;
	left: 1.4rem;
	z-index: 1;
	width: 16.4rem;
	height: 24.4rem;
	display: none;
}

#f03 .button a {
	display: block;
	background: rgba(0,0,0,0.3);
	width: 100%;
	height: 100%;
}

#f03 .button .balloonC {
	top: -1.5rem;
	right: -3.5rem;
}

#f03 .comment2 {
	display: none;
}


#f04 {
	background: url("img/f01-bg.png") no-repeat 0 0;
	background-size: 100% auto;
}

#f04 .message {
	position: absolute;
	top: 2.1rem;
	left: 2rem;
	width: 9.4rem;
}

#f04 .message img:nth-of-type(n+2) {
	display: none;
}

#f04 .stage {
	position: absolute;
	top: 2.1rem;
	right: 2rem;
	width: 4.2rem;
}

#f04 .battle .icons {
	position: absolute;
	bottom: 1.1rem;
	left: 8.1rem;
	width: 3.1rem;
}

#f04 .battle .icons i {
	display: block;
	position: relative;
	cursor: pointer;
}

#f04 .battle .icons .balloonC {
	top: -1.8rem;
	right: -3rem;
}

#f04 .battle .treasure i {
	position: absolute;
	top: 16rem;
	left: 8.3rem;
	z-index: 1;
	width: 2.6rem;
}

#f04 .battle .enemy {
	position: absolute;
	top: 3.6rem;
	left: 4.6rem;
	width: 11rem;
}

#f04 .battle .barM {
	position: absolute;
	top: 12.6rem;
	left: 1.5rem;
	width: 16.1rem;
}

#f04 .battle .barM img:nth-of-type(n+2) {
	display: none;
}

#f04 .battle .barM span {
	display: block;
	position: absolute;
	top: -0.1rem;
	left: 5.6rem;
	width: 4.8rem;
	display: none;
}
	
#f04 .battle .barE {
	position: absolute;
	top: 11rem;
	left: 6.2rem;
	width: 6.8rem;
}

#f04 .battle .barE img:nth-of-type(n+2) {
	display: none;
}

#f04 .battle .fire {
	position: absolute;
	top: 8.5rem;
	left: 6.1rem;
	width: 3.6rem;
	display: none;
}

#f04 .battle .damage i {
	display: block;
	position: absolute;
	width: 2.6rem;
	display: none;
}

#f04 .battle .damage i:nth-of-type(1) {
	display: none;
}

#f04 .battle .damage i:nth-of-type(2) {
	top: 5.4rem;
	left: 8rem;
}

#f04 .battle .damage span {
	display: block;
	position: absolute;
	top: 6rem;
	left: 10rem;
	width: 4rem;
	display: none;
}

#f04 .battle .damage span img:nth-of-type(n+2) {
	display: none;
}

#f04 .menu {
	position: absolute;
	top: 1.45rem;
	left: 1.4rem;
	z-index: 1;
	width: 16.4rem;
	height: 24.4rem;
	display: none;
}

#f04 .menu .button {
	position: absolute;
	bottom: 1.1rem;
	right: 0.7rem;
	width: 2.8rem;
}

#f04 .menu .button .balloonC {
	top: -3.5rem;
	right: -3.5rem;
}

#f04 .comment2 {
	display: none;
}


#f05 {
	background: url("img/f01-bg.png") no-repeat 0 0;
	background-size: 100% auto;
}

#f05 .button1 {
	position: absolute;
	top: 16.7rem;
	left: 5.9rem;
	width: 7.5rem;
}

#f05 .button1 a:hover {
	opacity: 1;
}

#f05 .button1 [src*="-o.png"] {
	display: none;
}

#f05 .button1 a:hover [src*="-c.png"] {
	display: none;
}

#f05 .button1 a:hover [src*="-o.png"] {
	display: inline-block;
}

#f05 .button1 .balloonC {
	top: -2rem;
	right: -3rem;
}

#f05 .button2 {
	position: absolute;
	bottom: 2rem;
	left: 10rem;
	width: 3.7rem;
}

#f05 .button2 .balloonC {
	top: -3.5rem;
	right: -3.5rem;
}


#f06 {
	background: url("img/f01-bg.png") no-repeat 0 0;
	background-size: 100% auto;
}

#f06 .button {
	position: absolute;
	top: 10.5rem;
	left: 13.1rem;
	width: 3.2rem;
}

#f06 .button a:hover {
	opacity: 1;
}

#f06 .button [src*="-o.png"] {
	display: none;
}

#f06 .button a:hover [src*="-c.png"] {
	display: none;
}

#f06 .button a:hover [src*="-o.png"] {
	display: inline-block;
}

#f06 .button .balloonC {
	top: -2.2rem;
	right: -3.2rem;
}


#f07 {
	background: url("img/f01-bg.png") no-repeat 0 0;
	background-size: 100% auto;
}

#f07 .password {
	position: absolute;
	top: 13.3rem;
	left: 3.7rem;
	width: 11.7rem;
}

#f07 .password input {
	box-sizing: border-box;
	border: none;
	outline: none;
	background: rgba(0,0,0,0.5);
	padding: 0.2em 0.5em;
	width: 100%;
	font-size: 1rem;
	color: #FFF;
}

#f07 .password .balloonI {
	top: -2rem;
	right: -2rem;
}

#f07 .password i {
	position: absolute;
	top: -0.8rem;
	left: 0.4rem;
	width: 2rem;
}

#f07 .button {
	position: absolute;
	top: 16.7rem;
	left: 7rem;
	width: 5.2rem;
}

#f07 .button.NG img {
	filter: grayscale(100%) brightness(100%);
}

#f07 .button.GO {
	display: none;
}

#f07 .button.GO a:hover {
	opacity: 1;
}

#f07 .button.GO [src*="-o.png"] {
	display: none;
}

#f07 .button.GO a:hover [src*="-c.png"] {
	display: none;
}

#f07 .button.GO a:hover [src*="-o.png"] {
	display: inline-block;
}

#f07 .button .balloonC {
	top: -2.2rem;
	right: -3.2rem;
}

	
#f08 {
	background: url("img/f01-bg.png") no-repeat 0 0;
	background-size: 100% auto;
}

#f08 .button {
	position: absolute;
	bottom: 2rem;
	right: 2rem;
	width: 2.8rem;
}

#f08 .button .balloonC {
	top: -3.5rem;
	right: -3.5rem;
}


#f09 {
	background: url("img/f01-bg.png") no-repeat 0 0;
	background-size: 100% auto;
}

#f09 .raregacha {
	position: absolute;
	top: 12.8rem;
	left: 5.8rem;
	width: 7.5rem;
}

#f09 .button {
	position: absolute;
	top: 10.5rem;
	right: 3rem;
	width: 3.2rem;
}

#f09 .button a:hover {
	opacity: 1;
}

#f09 .button [src*="-o.png"] {
	display: none;
}

#f09 .button a:hover [src*="-c.png"] {
	display: none;
}

#f09 .button a:hover [src*="-o.png"] {
	display: inline-block;
}

#f09 .button .balloonC {
	top: -2.2rem;
	right: -3.2rem;
}


#f10 {
	background: url("img/f01-bg.png") no-repeat 0 0;
	background-size: 100% auto;
}

#f10 .star {
	position: absolute;
	top: 2.4rem;
	right: 2.3rem;
	width: 3.1rem;
}

#f10 .base {
	background: url("img/f10-bg-bg-smartphone.png") no-repeat 0 0 / 100% auto;
}

#f10 .gacha {
	position: absolute;
	top: 6.2rem;
	left: 6rem;
	width: 7.4rem;
	cursor: pointer;
}

#f10 .gacha .balloonC {
	top: 3rem;
	right: -2.5rem;
}

#f10 .monster-in li {
	position: absolute;
	display: none;
}

#f10 .monster-in .capsule {
	top: 13.2rem;
	left: 8.1rem;
	margin-top: -1.6rem;
	width: 3rem;
	height: 3.5rem;
}

#f10 .monster-in .capsule::before {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	border-radius: 50%;
	background: rgba(0,0,0,0.2);
	width: 3rem;
	height: 1rem;
}

#f10 .monster-in .monster {
	top: 11.6rem;
	left: 6.1rem;
	width: 7rem;
}

#f10 .monster-in .aurora {
	bottom: 6.7rem;
	left: 1.9rem;
	width: 15.5rem;
}

#f10 .monster-in .get {
	top: 8.8rem;
	right: 2rem;
	width: 7.3rem;
}

#f10 .monster-in .message {
	top: 6rem;
	left: 2.8rem;
	width: 9.8rem;
}
		
#f10 .button {
	position: absolute;
	top: 17.9rem;
	left: 3rem;
	width: 13.2rem;
	display: none;
}

#f10 .button a:hover {
	opacity: 1;
}

#f10 .button [src*="-o.png"] {
	display: none;
}

#f10 .button a:hover [src*="-c.png"] {
	display: none;
}

#f10 .button a:hover [src*="-o.png"] {
	display: inline-block;
}

#f10 .button .balloonC {
	top: -1.8rem;
	right: -3.2rem;
}

#f10 .comment1 {
	display: none;
}


#f11 {
	background: url("img/f01-bg.png") no-repeat 0 0;
	background-size: 100% auto;
}

#f11 .star {
	position: absolute;
	top: 2.4rem;
	right: 2.3rem;
	width: 3.1rem;
}

#f11 .base {
	background: url("img/f10-bg-bg-smartphone.png") no-repeat 0 0 / 100% auto;
}

#f11 .gacha {
	position: absolute;
	top: 6.2rem;
	left: 6rem;
	width: 7.4rem;
	cursor: pointer;
}

#f11 .gacha .balloonC {
	top: 3rem;
	right: -2.5rem;
}

#f11 .monster-in li {
	position: absolute;
	display: none;
}

#f11 .monster-in .capsule {
	top: 13.2rem;
	left: 8.1rem;
	margin-top: -1.6rem;
	width: 3rem;
	height: 3.5rem;
}

#f11 .monster-in .capsule::before {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	border-radius: 50%;
	background: rgba(0,0,0,0.2);
	width: 3rem;
	height: 1rem;
}

#f11 .monster-in .monster {
	top: 6.9rem;
	left: 2.3rem;
	width: 14.8rem;
}

#f11 .monster-in .aurora {
	bottom: 6.7rem;
	left: 1.9rem;
	width: 15.5rem;
}

#f11 .monster-in .get {
	top: 8.8rem;
	right: 2rem;
	width: 7.3rem;
}

#f11 .monster-in .message {
	top: 6rem;
	left: 2.8rem;
	width: 9.7rem;
}
		
#f11 .button {
	position: absolute;
	bottom: 2rem;
	left: 2.6rem;
	width: 2rem;
}

#f11 .button .balloonC {
	top: -3.5rem;
	right: -3.5rem;
}

#f11 .comment1 {
	display: none;
}


#f12 {
	background: url("img/f01-bg.png") no-repeat 0 0;
	background-size: 100% auto;
}

#f12 .message {
	position: absolute;
	top: 2.1rem;
	left: 2rem;
	width: 9.4rem;
}

#f12 .message img:nth-of-type(n+2) {
	display: none;
}

#f12 .stage {
	position: absolute;
	top: 2.1rem;
	right: 2rem;
	width: 4.2rem;
}

#f12 .battle .icons {
	position: absolute;
	bottom: 1.1rem;
	left: 4.85rem;
	width: 9.6rem;
}

#f12 .battle .icons i {
	display: block;
	position: relative;
	cursor: pointer;
}

#f12 .battle .icons i > img {
	margin: 0 0.05rem;
	width: 3.1rem;
}

#f12 .battle .icons .balloonC {
	top: -1.8rem;
	right: -3rem;
}

#f12 .battle .treasure i {
	position: absolute;
	top: 16rem;
	left: 5.1rem;
	z-index: 1;
	width: 2.6rem;
}

#f12 .battle .treasure i:nth-of-type(2) {
	left: 8.3rem;
}

#f12 .battle .treasure i:nth-of-type(3) {
	left: 11.5rem;
}

#f12 .battle .enemy {
	position: absolute;
	top: 3.6rem;
	left: 4.6rem;
	width: 11rem;
}

#f12 .battle .barM {
	position: absolute;
	top: 12.6rem;
	left: 1.5rem;
	width: 16.1rem;
}

#f12 .battle .barM img:nth-of-type(n+2) {
	display: none;
}

#f12 .battle .barM span {
	display: block;
	position: absolute;
	top: -0.1rem;
	left: 5.6rem;
	width: 4.8rem;
	display: none;
}
	
#f12 .battle .barE {
	position: absolute;
	top: 11rem;
	left: 6.2rem;
	width: 6.8rem;
}

#f12 .battle .barE img:nth-of-type(n+2) {
	display: none;
}

#f12 .battle .fire {
	position: absolute;
	top: 8.5rem;
	left: 6.1rem;
	width: 3.6rem;
	display: none;
}

#f12 .battle .damage i {
	display: block;
	position: absolute;
	width: 2.6rem;
	display: none;
}

#f12 .battle .damage i:nth-of-type(1) {
	top: 5.3rem;
	left: 8.5rem;
}

#f12 .battle .damage i:nth-of-type(2) {
	top: 7.8rem;
	left: 10.3rem;
}


#f12 .battle .damage i:nth-of-type(3) {
	top: 7.2rem;
	left: 7rem;
}

#f12 .battle .damage span {
	display: block;
	position: absolute;
	top: 6rem;
	left: 10rem;
	width: 4rem;
	display: none;
}

#f12 .battle .damage span img:nth-of-type(n+2) {
	display: none;
}

#f12 .menu {
	position: absolute;
	top: 1.45rem;
	left: 1.4rem;
	z-index: 1;
	width: 16.4rem;
	height: 24.4rem;
	display: none;
}

#f12 .menu .button {
	position: absolute;
	bottom: 0.5rem;
	left: 4.9rem;
	width: 2.8rem;
}

#f12 .menu .button .balloonC {
	top: -3.5rem;
	right: -2.5rem;
}

#f12 .comment2 {
	display: none;
}


#f13 {
	background: url("img/f01-bg.png") no-repeat 0 0;
	background-size: 100% auto;
}

#f13 .message {
	position: absolute;
	top: 2.1rem;
	left: 2rem;
	width: 9.4rem;
}

#f13 .message img:nth-of-type(n+2) {
	display: none;
}

#f13 .stage {
	position: absolute;
	top: 2.1rem;
	right: 2rem;
	width: 4.8rem;
}

#f13 .battle .icons {
	position: absolute;
	bottom: 1.1rem;
	left: 4.85rem;
	width: 9.6rem;
}

#f13 .battle .icons i {
	display: block;
	position: relative;
	cursor: pointer;
}

#f13 .battle .icons i > img {
	margin: 0 0.05rem;
	width: 3.1rem;
}

#f13 .battle .icons .balloonC {
	top: -1.8rem;
	right: -3rem;
}

#f13 .battle .treasure i {
	position: absolute;
	top: 16rem;
	left: 5.1rem;
	z-index: 1;
	width: 2.6rem;
}

#f13 .battle .treasure i:nth-of-type(2) {
	left: 8.3rem;
}

#f13 .battle .treasure i:nth-of-type(3) {
	left: 11.5rem;
}

#f13 .battle .enemy {
	position: absolute;
	top: 5.2rem;
	left: 1.7rem;
	width: 15.6rem;
}

#f13 .battle .barM {
	position: absolute;
	top: 12.6rem;
	left: 1.5rem;
	width: 16.1rem;
}

#f13 .battle .barM img:nth-of-type(n+2) {
	display: none;
}

#f13 .battle .barM span {
	display: block;
	position: absolute;
	top: -0.1rem;
	left: 5.6rem;
	width: 4.8rem;
	display: none;
}
	
#f13 .battle .barE {
	position: absolute;
	top: 11rem;
	left: 1.8rem;
	width: 15.8rem;
}

#f13 .battle .barE img:nth-of-type(n+2) {
	display: none;
}

#f13 .battle .fire {
	position: absolute;
	top: 8.5rem;
	left: 6.1rem;
	width: 3.6rem;
	display: none;
}

#f13 .battle .damage i {
	display: block;
	position: absolute;
	width: 2.6rem;
	display: none;
}

#f13 .battle .damage i:nth-of-type(2) {
	top: 6.1rem;
	left: 6.5rem;
}

#f13 .battle .damage span {
	display: block;
	position: absolute;
	top: 6rem;
	left: 10rem;
	width: 4rem;
	display: none;
}

#f13 .battle .damage span img:nth-of-type(n+2) {
	display: none;
}

#f13 .menu {
	position: absolute;
	top: 1.45rem;
	left: 1.4rem;
	z-index: 1;
	width: 16.4rem;
	height: 24.4rem;
	display: none;
}

#f13 .menu .button {
	position: absolute;
	bottom: 1.1rem;
	left: 8.5rem;
	width: 3.7rem;
}

#f13 .menu .button .balloonC {
	top: -3.5rem;
	right: -3.5rem;
}

#f13 .comment2 {
	display: none;
}


#f14 {
	background: url("img/f01-bg.png") no-repeat 0 0;
	background-size: 100% auto;
}

#f14 .button {
	position: absolute;
	top: 17.1rem;
	left: 13.1rem;
	width: 3.2rem;
}

#f14 .button a:hover {
	opacity: 1;
}

#f14 .button [src*="-o.png"] {
	display: none;
}

#f14 .button a:hover [src*="-c.png"] {
	display: none;
}

#f14 .button a:hover [src*="-o.png"] {
	display: inline-block;
}

#f14 .button .balloonC {
	top: -2.2rem;
	right: -3.2rem;
}


#f15 {
	background: url("img/f01-bg.png") no-repeat 0 0;
	background-size: 100% auto;
}

#f15 .password {
	position: absolute;
	top: 13.3rem;
	left: 3.7rem;
	width: 11.7rem;
}

#f15 .password input {
	box-sizing: border-box;
	border: none;
	outline: none;
	background: rgba(0,0,0,0.5);
	padding: 0.2em 0.5em;
	width: 100%;
	font-size: 1rem;
	color: #FFF;
}

#f15 .password .balloonI {
	top: -2rem;
	right: -2rem;
}

#f15 .password i {
	position: absolute;
	top: -0.8rem;
	left: 0.4rem;
	width: 2rem;
}

#f15 .button {
	position: absolute;
	top: 16.7rem;
	left: 7rem;
	width: 5.2rem;
}

#f15 .button.NG img {
	filter: grayscale(100%) brightness(100%);
}

#f15 .button.GO {
	display: none;
}

#f15 .button.GO a:hover {
	opacity: 1;
}

#f15 .button.GO [src*="-o.png"] {
	display: none;
}

#f15 .button.GO a:hover [src*="-c.png"] {
	display: none;
}

#f15 .button.GO a:hover [src*="-o.png"] {
	display: inline-block;
}

#f15 .button .balloonC {
	top: -2.2rem;
	right: -3.2rem;
}

	
#f16 {
	background: url("img/f01-bg.png") no-repeat 0 0;
	background-size: 100% auto;
}

#f16 .button {
	position: absolute;
	bottom: 2rem;
	right: 2rem;
	width: 2.8rem;
}

#f16 .button .balloonC {
	top: -3.5rem;
	right: -3.5rem;
}


#f17 {
	background: url("img/f01-bg.png") no-repeat 0 0;
	background-size: 100% auto;
}

#f17 .raregacha {
	position: absolute;
	top: 12.8rem;
	left: 5.8rem;
	width: 7.5rem;
}

#f17 .button {
	position: absolute;
	top: 17.2rem;
	right: 3rem;
	width: 3.2rem;
}

#f17 .button a:hover {
	opacity: 1;
}

#f17 .button [src*="-o.png"] {
	display: none;
}

#f17 .button a:hover [src*="-c.png"] {
	display: none;
}

#f17 .button a:hover [src*="-o.png"] {
	display: inline-block;
}

#f17 .button .balloonC {
	top: -2.2rem;
	right: -3.2rem;
}


#f18 {
	background: url("img/f01-bg.png") no-repeat 0 0;
	background-size: 100% auto;
}

#f18 .star {
	position: absolute;
	top: 2.4rem;
	right: 2.3rem;
	width: 4.3rem;
}

#f18 .star img:nth-of-type(6) {
	width: 3.1rem;
}

#f18 .star img:nth-of-type(5) {
	width: 3.6rem;
}

#f18 .star img:nth-of-type(n+2) {
	display: none;
}

#f18 .base {
	background: url("img/f10-bg-bg-smartphone.png") no-repeat 0 0 / 100% auto;
}

#f18 .gacha {
	position: absolute;
	top: 8.2rem;
	left: 5.4rem;
	width: 8.5rem;
	cursor: pointer;
}

#f18 .gacha .balloonC {
	top: -0.5rem;
	right: -1.5rem;
}

#f18 .monster-in li {
	position: absolute;
	display: none;
}

#f18 .monster-in .capsule {
	width: 3rem;
	height: 3.5rem;
}

#f18 .monster-in .capsule::before {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	border-radius: 50%;
	background: rgba(0,0,0,0.2);
	width: 3rem;
	height: 1rem;
}

#f18 .monster-in:nth-of-type(-n+3) .capsule {
	top: 16.3rem;
	margin-top: -4.2rem;
}

#f18 .monster-in:nth-of-type(n+4) .capsule {
	top: 13.3rem;
	margin-top: -1.1rem;
}

#f18 .monster-in:nth-of-type(3n+1) .capsule {
	left: 8.1rem;
}

#f18 .monster-in:nth-of-type(3n+2) .capsule {
	left: 4.1rem;
	margin-left: 4rem;
}

#f18 .monster-in:nth-of-type(3n) .capsule {
	left: 12.1rem;
	margin-left: -4rem;
}

#f18 .monster-in .monster {
	z-index: 1;
}

#f18 .monster-in:nth-of-type(2n+1) .monster {
	top: 6.9rem;
	left: 2.1rem;
	width: 14.8rem;
}

#f18 .monster-in:nth-of-type(-2n+4) .monster {
	top: 6.7rem;
	left: 2.1rem;
	width: 15.6rem;
}

#f18 .monster-in:nth-of-type(6) .monster {
	top:4.3rem;
	left: 2.1rem;
	width: 14.8rem;
}


#f18 .monster-in .aurora {
	bottom: 6.7rem;
	left: 1.9rem;
	z-index: 1;
	width: 15.5rem;
}

#f18 .monster-in .get {
	top: 8.8rem;
	right: 2rem;
	z-index: 1;
	width: 7.3rem;
}

#f18 .monster-in .message {
	top: 6rem;
	left: 2.8rem;
	z-index: 1;
	width: 9.7rem;
}
		
#f18 .button {
	position: absolute;
	bottom: 1.4rem;
	left: 6rem;
	width: 2.8rem;
}

#f18 .button .balloonC {
	top: -2.5rem;
	right: -3.5rem;
}

#f18 .comment1 {
	display: none;
}


#f19 {
	background: url("img/f01-bg.png") no-repeat 0 0;
	background-size: 100% auto;
}

#f19 .message {
	position: absolute;
	top: 2.1rem;
	left: 2rem;
	width: 9.4rem;
}

#f19 .message img:nth-of-type(n+2) {
	display: none;
}

#f19 .stage {
	position: absolute;
	top: 2.1rem;
	right: 2rem;
	width: 4.8rem;
}

#f19 .battle .icons {
	position: absolute;
	bottom: 1.1rem;
	left: 1.65rem;
	width: 16rem;
}

#f19 .battle .icons i {
	display: block;
	position: relative;
	cursor: pointer;
}

#f19 .battle .icons i > img {
	margin: 0 0.05rem;
	width: 3.1rem;
}

#f19 .battle .icons .balloonC {
	top: -1.8rem;
	right: -3rem;
}

#f19 .battle .treasure i {
	position: absolute;
	top: 16rem;
	left: 1.9rem;
	z-index: 1;
	width: 2.6rem;
}

#f19 .battle .treasure i:nth-of-type(2) {
	left: 5.1rem;
}

#f19 .battle .treasure i:nth-of-type(3) {
	left: 8.3rem;
}

#f19 .battle .treasure i:nth-of-type(4) {
	left: 11.5rem;
}

#f19 .battle .treasure i:nth-of-type(5) {
	left: 14.7rem;
}

#f19 .battle .enemy {
	position: absolute;
	top: 5.2rem;
	left: 1.7rem;
	width: 15.6rem;
}

#f19 .battle .barM {
	position: absolute;
	top: 12.6rem;
	left: 1.5rem;
	width: 16.1rem;
}

#f19 .battle .barM img:nth-of-type(n+2) {
	display: none;
}

#f19 .battle .barM span {
	display: block;
	position: absolute;
	top: -0.1rem;
	left: 5.6rem;
	width: 4.8rem;
	display: none;
}
	
#f19 .battle .barE {
	position: absolute;
	top: 11rem;
	left: 1.8rem;
	width: 15.8rem;
}

#f19 .battle .barE img:nth-of-type(n+2) {
	display: none;
}

#f19 .battle .fire {
	position: absolute;
	top: 5.6rem;
	left: 5.3rem;
	width: 9.7rem;
	display: none;
}

#f19 .battle .damage i {
	display: block;
	position: absolute;
	top: 8.4rem;
	left: 4.1rem;
	width: 2.6rem;
	display: none;
}

#f19 .battle .damage i:nth-of-type(2) {
	top: 5.8rem;
	left: 6.5rem;
}

#f19 .battle .damage i:nth-of-type(3) {
	top: 8.4rem;
	left: 9.6rem;
}

#f19 .battle .damage i:nth-of-type(4) {
	top: 5.4rem;
	left: 12.3rem;
}

#f19 .battle .damage i:nth-of-type(5) {
	top: 7.9rem;
	left: 13rem;
}

#f19 .battle .damage span {
	display: block;
	position: absolute;
	top: 9.6rem;
	left: 7.3rem;
	width: 4.9rem;
	display: none;
}

#f19 .menu {
	position: absolute;
	top: 1.45rem;
	left: 1.4rem;
	z-index: 1;
	width: 16.4rem;
	height: 24.4rem;
	display: none;
}

#f19 .after {
	position: absolute;
	top: 13.1rem;
	left: 12.6rem;
	z-index: 1;
	width: 9.1rem;
	display: none;
}

#f19 .after .balloonC {
	top: -1.5rem;
	right: -3rem;
}

#f19 .comment2 {
	display: none;
}


#f20 {
	background: url("img/f01-bg.png") no-repeat 0 0;
	background-size: 100% auto;
}

#f20 .invoice {
	position: relative;
	width: 35.5rem;
}

#f20 .message {
	position: absolute;
	top: 1.5rem;
	left: 2.1rem;
	width: 100%;
}

#f20 .message img:nth-child(1) {
	width: 3.5rem;
	transform: scale(0, 0);
	
}

#f20 .message img:nth-child(2) {
	position: absolute;
	top: 0.4rem;
	left: 1rem;
	width: 28.5rem;
	display: none;
}

#f20 .box {
	position: absolute;
	top: 22.05rem;
	left: 3.6rem;
	width: 32rem;
	display: none;
}