/**************************
* MANGA
**************************/
.manga-layoutset {
	width: 100%;
	min-width: unset;
}
#hpb-container.manga-container {
  background-image: none;
}

.manga-container #hpb-inner {
  width: 100%;
}

.manga-container #hpb-main {
  width: 100%;
}

.manga_mv {
  width: 100%;
  height: 480px;
  position: relative;
  background: url(pic01_manga/pic_manga.png) no-repeat center / cover;
}
.manga_mv_ttl {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.manga_mv_ttl::after {
  content: attr(data-en);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

#manga {
  padding: 80px 0 20px;
  background: linear-gradient(0deg, #92A7E1 0%, #5161B3 100%);
}

#manga .manga_catch {
  width: min(1112px, 90%);
  margin: 0 auto;
}

#manga .__ttl {
  font-size: clamp(1.25rem, 0.946rem + 0.63vw, 1.5rem);
  font-weight: 700;
  line-height: 2;
  text-align: center;
  color: #fff;
  margin: 0 0 40px;
}

#manga .__txt {
  font-size: clamp(0.938rem, 0.862rem + 0.16vw, 1rem);
  font-weight: 700;
  line-height: 2;
  text-align: center;
  color: #fff;
  margin: 0 0 70px;
}

.manga_slider_scroll {
	width: 128px;
	aspect-ratio: 128/96;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: 1;
	transition: all 0.2s;
	opacity: 1;
	visibility: visible;
}
.manga_slider_scroll.is-hidden {
	opacity: 0;
	visibility: hidden;
}

@media screen and (max-width:768px) {
	#manga {
		padding: 45px 0 20px;
	}
	#manga .__ttl {
		margin: 0 0 30px;
	}
	#manga .__txt {
		margin: 0 0 60px;
	}
	.manga_mv {
		height: 240px;
	}
	.manga_mv_ttl {
		font-size: 24px;
		flex-direction: column;
	}
	.manga_mv_ttl::after {
		font-size: 18px;
	}
}

/**************************
* SLIDER
**************************/
#manga .manga_slider {
  position: relative;
  width: min(1204px, 90%);
  margin: 0 auto;
}

.manga_slider_inner {
  width: 100%;
}

.manga_slider_list {
  width: 100%;
}

.manga_slider_item {
  width: 100%;
}

.manga_slider_item .__img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width:1280px) {
	#manga .manga_slider {
		width: min(900px, 85%);
	}
}

/**************************
* SIDE ARROW
**************************/
.manga_slider_side_arrow {
  position: absolute;
  top: 50%;
  z-index: 10;
  width: 30px;
  height: 50px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateY(-50%);
  cursor: pointer;
}

.manga_slider_side_arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  border-top: 4px solid #fff;
  border-right: 4px solid #fff;
}

.manga_slider_side_arrow_left {
  left: 20px;
}

.manga_slider_side_arrow_left::before {
  left: -60px;
  transform: translateY(-50%) rotate(-135deg);
}

.manga_slider_side_arrow_right {
  right: 20px;
}

.manga_slider_side_arrow_right::before {
  right: -60px;
  transform: translateY(-50%) rotate(45deg);
}

.manga_slider_side_arrow:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

@media screen and (max-width:768px) {
	.manga_slider_side_arrow {
		display: none;
	}
}


/**************************
* CONTROLLER
**************************/
.manga_slider_controller {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

.manga_slider_controller_before {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.manga_slider_controller_before.is-hidden {
  display: none;
}

.manga_slider_controller_after {
  display: none;
  width: 100%;
  max-width: 600px;
  align-items: flex-end;
  justify-content: center;
  gap: 20px;
}

.manga_slider_controller_after.is-show {
  display: flex;
}


/**************************
* PREV / NEXT
**************************/
.manga_slider_prev,
.manga_slider_next {
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.manga_slider_prev:disabled,
.manga_slider_next:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}


/**************************
* BAR
**************************/
.manga_slider_controller_bar {
  position: relative;
  flex: 1;
  height: 32px;
}

.manga_slider_controller_bar .__border {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 8px;
  background: #B7CAE6;
  border-radius: 100vmax;
}

.manga_slider_controller_bar .__current {
  position: absolute;
  left: 100%;
  bottom: 0;
  transform: translateX(-50%);
  transition: left .5s ease;
}

.manga_slider_controller_bar .__number {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  background: #17266d;
  color: #fff;
  padding: 8px 12px;
  border-radius: 2px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.manga_slider_controller_bar .__number::after {
	content: "";
	width: 12px;
	aspect-ratio: 125/280;
	margin: auto;
	background: url(pic01_manga/pic_fukidashi.svg) no-repeat center / 100%;
	position: absolute;
	bottom: -15px;
	right: 0;
	left: 0;
}

.manga_slider_controller_bar .__point {
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 24px;
  height: 24px;
  transform: translateX(-50%);
  background: #17266d;
  border-radius: 50%;
}

@media screen and (max-width:768px) {
	.manga_slider_controller_bar .__point {
		width: 18px;
		height: 18px;
		bottom: -2px;
	}
	.manga_slider_controller_bar .__border {
		height: 6px;
	}
	.manga_slider_controller_bar .__number {
		bottom: 25px;
	}
}


/**************************
* PC / SP
**************************/
#pc_slider {
  display: block;
}

#sp_slider {
  display: none;
}

@media screen and (max-width: 768px) {

  #pc_slider {
    display: none;
  }

  #sp_slider {
    display: block;
  }

}

/**************************
* bottom link
**************************/
.manga_bottom {
	padding: 80px 0 20px;
	background: #fff;
	border-bottom: 1px solid #333;
}
.manga_bottom_home {
	width: 240px;
	display: block;
	margin: 0 auto 80px;
	border: 1px solid #ccc;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	color: #666 !important;
	text-decoration: none !important;
	padding: 14px 15px 9px 40px;
	background: linear-gradient(180deg, #FFF 0%, #F0F0F0 100%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 45px;
	position: relative;
	opacity: 1;
	transition: all 0.2s;
}
.manga_bottom_home:hover {
	opacity: 0.7;
}
.manga_bottom_home::before {
	content: "";
	width: 16px;
	aspect-ratio: 1;
	margin: auto;
	position: absolute;
	left: 16px;
	top: 0;
	bottom: 0;
	background: url(pic01_manga/pic_dots.svg) no-repeat center / 100%;
}
.manga_bottom_home::after {
	content: "";
	width: 28px;
	height: 20px;
	background: url(pic01_manga/ico_arrow_right.svg) no-repeat center / 100%;
}
#pagetop {
	width: min(900px,90%);
	margin: 0 auto;
}

@media screen and (max-width:768px) {
	.manga_bottom {
		padding: 40px 0 20px;
	}
	.manga_bottom_home {
		margin: 0 auto 40px;
	}
}

/**************************
* other
**************************/
.br_sp {
  display: none;
}

@media screen and (max-width:768px) {
  .br_sp {
    display: block;
  }
}