@charset "UTF-8";

/* CSS Document */
.container-fluid {
	padding-left: initial;
	padding-right: initial;
}

.row {
	margin-left: initial;
	margin-right: initial;
}

.contents {
	padding-left: 12%;
	padding-right: 12%;
	padding-bottom: 10%;
}

#character {
	background-image: url("/img/obakeidoro2/pc/top/bg_character.jpg");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% auto;
	padding-bottom: 22%;
}

#character_h {
	position: absolute;
	width: 100%;
}

#character_buttons {
	position: absolute;
	padding-top: 5%;
	padding-left: 5%;
	width: 23%;
	z-index: 2;
}

.btn_inactive {
	filter: grayscale(1);
}

.btn_inactive:hover {
	cursor: pointer;
	filter: none;
}

#carousel {
	padding-top: 8%;
}

.character_img {
	position: relative;
	top: 0;
	left: 15%;
	width: 34%;
}

.window {
	position: absolute;
	top: 0;
	left: 41%;
	width: 40%;
	background: url("/img/obakeidoro2/common/character/window_base_01.png") left top no-repeat;
	background-size: contain;
	padding-top: 4%;
	padding-left: 5%;
	padding-right: 3%;
	padding-bottom: 5%;
	margin-top: 15%;
	margin-bottom: 10%;
}

.character_name {
	font-size: 2.0rem;
	margin-bottom: 10%;
}

@media screen and (max-width: 1280px) {
	.character_name {
		font-size: 1.75rem;
	}
}

@media screen and (max-width: 992px) {
	.character_name {
		font-size: 1.5rem;
	}
}

@media screen and (max-width: 768px) {
	.character_name {
		font-size: 1.25rem;
	}
}

.character_text_area {
	margin-top: 0%;
	margin-bottom: 10%;
}

.character_text_area p {
	font-size: 1.5rem;
	line-height: 2.0rem;
}

@media screen and (max-width: 1280px) {
	.character_text_area p {
		font-size: 1.25rem;
		line-height: 1.5rem;
	}
}

@media screen and (max-width: 992px) {
	.character_text_area p {
		font-size: 1.0rem;
		line-height: 1.25rem;
	}
}

@media screen and (max-width: 768px) {
	.character_text_area p {
		font-size: 0.75rem;
		line-height: 1.0rem;
	}
}

@media screen and (max-width: 768px) and (-webkit-device-pixel-ratio:2) {
	.character_text_area p {
		font-size: 0.625rem;
		line-height: 2.0rem;
	}
}

.carousel-control-prev {
	top: 25%;
	opacity: 1;
	animation: anim_prev 1s ease-in infinite;
}

@keyframes anim_prev {
	0% {
		transform: translateX(0px);
	}

	50% {
		transform: translateX(-5px);
	}

	100% {
		transform: translateX(0px);
	}
}

.carousel-control-next {
	top: 25%;
	opacity: 1;
	animation: anim_next 1s ease-in infinite;
}

@keyframes anim_next {
	0% {
		transform: translateX(0px);
	}

	50% {
		transform: translateX(5px);
	}

	100% {
		transform: translateX(0px);
	}
}