@charset "UTF-8";

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

Each Page CSS

coded by d-spica at 2018-12-03

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


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: 6.65rem;
	height: 4.35rem;
	display: none;
}

section.smartphone {
	position: absolute;
	top: 1.45rem;
	left: 9.35rem;
	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 .button {
	position: absolute;
	bottom: 1.9rem;
	left: 1.3rem;
	width: 13.95rem;
}

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

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

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

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

#f01 .balloonC {
	bottom: 4rem;
	right: -1.5rem;
}

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

#f02 ul {
	position: absolute;
	top: 6rem;
	left: 6.2rem;
	width: 10.2rem;
}

#f02 li {
	position: relative;
	height: 1.95rem;
}

#f02 [type="text"],
#f02 textarea {
	box-sizing: border-box;
	border: none;
	outline: none;
	background: transparent;
	padding: 0.5em;
	width: 100%;
}
	
#f02 [name="name"] {
	background: #C0E4E4;
}

#f02 [name="name"].OK {
	background: transparent;
}

#f02 [name="mail"]:hover {
	background: #F6C7C5;
}
	
#f02 [name="mail"].OK:hover {
	background: transparent;
}
	
#f02 li i {
	position: absolute;
	top: -0.8rem;
	left: 0.3rem;
	width: 1.95rem;
}

#f02 li i {
	position: absolute;
	top: -0.8rem;
	left: 0.3rem;
	width: 1.95rem;
}

#f02 li .balloonI {
	top: -2rem;
	right: -2rem;
}

#f02 li .balloonA {
	top: -3.6rem;
	right: -4rem;
}

#f02 .button {
	position: absolute;
	bottom: 1rem;
	left: 1.2rem;
	width: 13.95rem;
}

#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.GO {
	display: none;
}

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


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

#f03 .button {
	position: absolute;
	bottom: 0.3rem;
	left: 9rem;
}

#f03 .button .balloonC {
	top: -3rem;
	right: -3.2rem;
}

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

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

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

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


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

#f04 .name {
	position: absolute;
	top: 3.4rem;
	left: 3.4rem;
}

#f04 .post {
	position: absolute;
	top: 5.8rem;
	left: 0;
	width: 100%;
	height: 15.9rem;
}

#f04 .post textarea {
	box-sizing: border-box;
	border: none;
	outline: none;
	background: transparent;
	padding: 0.5em;
	width: 100%;
	height: 100%;
}	

#f04 .post .balloonA {
	top: -3.2rem;
	right: -3.2rem;
}

#f04 .post .balloonC {
	top: -2.4rem;
	right: -2.4rem;
	display: none;
}

#f04 .post textarea:hover {
	background: #EEC9C7;
}

#f04 .post textarea.OK:hover {
	background: #EDCD8A;
	cursor: pointer;
}


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

#f05 .name {
	position: absolute;
	top: 8.8rem;
	left: 4.3rem;
	font-size: 0.9rem;
	font-weight: 700;
}
	
#f05 .button {
	position: absolute;
	top: 5.8rem;
	left: 0.75rem;
}

#f05 .button .balloonC {
	top: -3.1rem;
	left: -3.4rem;
}


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

#f06 .name {
	position: absolute;
	top: 3.4rem;
	left: 3.4rem;
}

#f06 .post {
	position: absolute;
	top: 5.8rem;
	left: 0;
	width: 100%;
	height: 15.9rem;
}

#f06 .post textarea {
	box-sizing: border-box;
	border: none;
	outline: none;
	background: transparent;
	padding: 0.5em;
	width: 100%;
	height: 100%;
}	

#f06 .post .balloonA {
	top: -3.2rem;
	right: -3.2rem;
}

#f06 .post .balloonC {
	top: -2.4rem;
	right: -2.4rem;
	display: none;
}

#f06 .post textarea:hover {
	background: #EEC9C7;
}

#f06 .post textarea.OK:hover {
	background: #EDCD8A;
	cursor: pointer;
}


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

#f07 .name {
	position: absolute;
	top: 13.6rem;
	left: 4.3rem;
	font-size: 0.9rem;
	font-weight: 700;
}
	
#f07 .button {
	position: absolute;
	top: 5.8rem;
	left: 0.75rem;
}

#f07 .button .balloonC {
	top: -3.1rem;
	left: -3.4rem;
}


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

#f08 .name {
	position: absolute;
	top: 3.4rem;
	left: 3.4rem;
}

#f08 .post {
	position: absolute;
	top: 5.8rem;
	left: 0;
	width: 100%;
	height: 15.9rem;
}

#f08 .post textarea {
	box-sizing: border-box;
	border: none;
	outline: none;
	background: transparent;
	padding: 0.5em;
	width: 100%;
	height: 100%;
}	

#f08 .post .balloonA {
	top: -3.2rem;
	right: -3.2rem;
}

#f08 .post .balloonC {
	top: -2.4rem;
	right: -2.4rem;
	display: none;
}

#f08 .post textarea:hover {
	background: #EEC9C7;
}

#f08 .post textarea.OK:hover {
	background: #EDCD8A;
	cursor: pointer;
}


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

#f09 .name {
	position: absolute;
	top: 9rem;
	left: 4.3rem;
	font-size: 0.9rem;
	font-weight: 700;
}
	
#f09 .button {
	position: absolute;
	bottom: 0.3rem;
	left: 9rem;
}

#f09 .button .balloonC {
	top: -3rem;
	right: -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;
}


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

#f10 .name {
	position: absolute;
	top: 3.4rem;
	left: 3.4rem;
}

#f10 .button {
	position: absolute;
	top: 3.4rem;
	right: 0.5rem;
	cursor: pointer;
}

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

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

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

#f10 .button .balloonC {
	position: absolute;
	top: -2.8rem;
	right: -2.4rem;
}

#f10 ul {
	position: absolute;
	top: 5.6rem;
	left: -8rem;
	box-sizing: border-box;
	background: url("img/f10-frame.png") no-repeat 50% 0 / 100% auto;
	padding-top: 3.3rem;
	width: 32.4rem;
	height: 13.8rem;
	text-align: center;
	display: none;
}

#f10 li {
	display: inline-block;
	position: relative;
	width: 9.75rem;
}

#f10 li a:hover {
	opacity: 1;
}

#f10 li a:hover::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(251,118,120,0.5);
}

#f10 li .balloonC {
	top: -1.8rem;
	right: -0.6rem;
}

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

#f11 .name {
	position: absolute;
	top: 3.3rem;
	left: 4.3rem;
	font-size: 0.9rem;
	font-weight: 700;
}
	
#f11 ul {
	position: absolute;
	top: 4.8rem;
	left: 4.3rem;
}

#f11 li {
	width: 11.4rem;
	display: none;
}

#f11 ul.photo1 li.photo1,
#f11 ul.photo2 li.photo2,
#f11 ul.photo3 li.photo3 {
	display: block;
}

#f11 .after {
	position: absolute;
	top: 11.1rem;
	right: -4.5rem;
	width: 10.1rem;
	display: none;
}

#f11 .after .balloonC {
	top: -1.5rem;
	right: -3.1rem;
}


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

#f12 .back {
	position: absolute;
	top: 13rem;
	left: 17.5rem;
	margin: -15.5rem 0 0 -15.5rem;
	background: url("img/f12-back.png") no-repeat 50% 50%;
	background-size: 50% auto;
	width: 31rem;
	height: 31rem;
	opacity: 0.7;
}

#f12 .posts {
	overflow: hidden;
	position: absolute;
	top: 2.5rem;
	left: 0;
	width: 100%;
	height: 19.2rem;
}

#f12 .posts div {
	position: relative;
	margin-top: -8.8rem;
}

#f12 .posts div .name {
	position: absolute;
	bottom: 3.1rem;
	left: 4.3rem;
	font-size: 0.9rem;
	font-weight: 700;
}
	
#f12 .posts div .name2 {
	position: absolute;
	top: 3.15rem;
	left: 7.5rem;
	width: 5em;
	text-align: center;
	font-size: 0.65rem;
}
	
#f12 .posts div ul {
	position: absolute;
	bottom: 0.9rem;
	left: 4.3rem;
}

#f12 .posts div li {
	display: none;
}

#f12 .posts div ul.photo1 li.post1,
#f12 .posts div ul.photo2 li.post2,
#f12 .posts div ul.photo3 li.post3 {
	display: block;
}

#f12 .fire li {
	position: absolute;
	display: none;
}

#f12 .fire li:nth-child(1) {
	top: 9.2rem;
	right: -9.6rem;
	width: 7.6rem;
}

#f12 .fire li:nth-child(2) {
	top: 0;
	left: -8.7rem;
	width: 7.6rem;
}

#f12 .fire li:nth-child(3) {
	top: 18.2rem;
	right: -8.5rem;
	width: 6.1rem;
	transform: rotate(35deg)
}

#f12 .fire li:nth-child(4) {
	top: 9.1rem;
	left: -7.2rem;
	width: 5.8rem;
	transform: rotate(35deg)
}

#f12 .fire li:nth-child(5) {
	top: 0;
	right: -9rem;
	width: 8.4rem;
	transform: rotate(35deg)
}

#f12 .fire li:nth-child(6) {
	top: 15.6rem;
	left: -8.6rem;
	width: 9rem;
}

#f12 .result {
	position: absolute;
	top: 4.3rem;
	left: -8rem;
	width: 33.5rem;
	display: none;
}