/* CSS Document */
#mhb_wap p{
	color: #000;
	line-height: 160%;
}
#mhb_wap img{
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
#mhb_wap a{
	outline: none;
	display: block;
}
#mhb_wap *:focus {
	outline: none;
}

#mhb_wap{
	width: auto;
	height: auto;
	margin: 0 auto;
	text-align: center;
	outline: none;
	font-weight: bold;
}

.shadow{
	border: 2px solid #000;
	border-radius: 10px;
	box-shadow: 3px 3px 2px 2px rgb(0, 0, 0);
}
.w-50{
	width: 50%;
	margin: 0 auto;
}
.w-60{
	width: 60%;
	margin: 0 auto;
}
@media screen and (max-width: 767px) {
	.w-50{
		width: 80%;
	}
	.w-60{
		width: 90%;
	}
}

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


/*****************************************************************************
****************** 共通 ******************************************************
*****************************************************************************/
.mhb_contents{
	padding: 4em 0;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
}
.mhb_contents .box{
	max-width: 1100px;
	width: auto;
	margin: 0 auto;
	text-align: center;
	height: auto;
}
@media screen and (max-width: 1280px) {
	.mhb_contents{
		background-size: cover;
	}
}
@media screen and (max-width: 768px) {
	.mhb_contents{
		padding: 8% 0;
	}
}

.mhb_contents.top{
	background-color: #f2c5d0;
	background-image: url(../img/subpage/miyazaki-human-bank/img_pink-back.png);
}
#mhb_wap .mhb_contents.top p{
	line-height: 300%;
}
#mhb_wap .mhb_contents.top p:not(:last-child) {
	padding-bottom: 1em;
}
.mhb_contents.top p span{
	color: #000;
	font-size: xx-large;
	vertical-align: middle;
}
.mhb_contents.top .video-box,
.mhb_contents.top .book-box{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 1em;
}
.mhb_contents.top .video{
	flex-basis: 48%;
}
.mhb_contents.top .video div{
	width:100%;		/*横幅いっぱいにwidthを指定*/
	padding-bottom: 56.25%;	/*高さをpaddingで指定(16:9)*/
	height:0px;		/*高さはpaddingで指定するためheightは0に*/
	position: relative;
}
.mhb_contents.top .video div iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.mhb_contents.top .video img.title{
	margin-top: 1em;
}
.mhb_contents.top .book-box > img{
	flex-basis: 15%;
	width: 0 !important;
	order: 1;
}
.mhb_contents.top .book-box p{
	order: 2;
}
.mhb_contents.top .book-box > a{
	flex-basis: 20%;
	order: 3;
}
.mhb_contents.top .book-box > a:hover{
	transform: rotate(10deg);
}
@media screen and (max-width: 768px) {
	.mhb_contents.top .book-box{
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.mhb_contents.top .book-box > img{
		flex-basis: 25%;
		order: 2;
	}
	.mhb_contents.top .book-box p{
		flex-basis: 100%;
		order: 1;
	}
	.mhb_contents.top .book-box > a{
		flex-basis: 25%;
	}
}
@media screen and (max-width: 767px) {
	#mhb_wap .mhb_contents.top p{
		font-size: 3vw;
	}
	.mhb_contents.top p span{
		font-size: 4vw;
	}
	.mhb_contents.top .video-box{
		display: block;
	}
	.mhb_contents.top .video{
		width: 90%;
		margin: 0 auto;
	}
	.mhb_contents.top .video:first-of-type{
		margin-bottom: 2em;
	}
	.mhb_contents.top .book-box > a{
		flex-basis: 35%;
	}
}

.mhb_contents.blue{
	background-color: #3eb1de;
	background-image: url(../img/subpage/miyazaki-human-bank/img_blue-back.png);
}
.mhb_contents.blue .point{
	position: relative;
	background-color: #fff;
	width: 80%;
	margin: 0 auto;
	margin-top: 2em;
	font-size: x-large;
	line-height: 160%;
}
.mhb_contents.blue .point p{
	padding: 1em 0;
}
.mhb_contents.blue .point .img{
	position: absolute;
	top: -10%;
	left: -3%;
	width: 15%;
	padding: 0;
}
@media screen and (max-width: 767px) {
	.mhb_contents.blue .point{
		font-size: 4vw;
	}
	.mhb_contents.blue .point .img{
		top: -13%;
		left: -8%;
		width: 22%;
	}
}

.mhb_contents.green{
	background-color: #b0dc33;
	background-image: url(../img/subpage/miyazaki-human-bank/img_green-back.png);
}
.mhb_contents.green .entry-box{
	font-size: larger;
	background-image:
		url(../img/subpage/miyazaki-human-bank/img_entry-mu.png),
		url(../img/subpage/miyazaki-human-bank/img_entry-star.png);
	background-repeat: no-repeat;
	background-size:
		15%,
		5%;
	background-position:
		10% center,
		80% center;
}
#content .mhb_contents.green a,
#content .mhb_contents.orange a,
#content .mhb_contents.pink a{
	color: #000;
	background-color: #ffff00;
	width: 90%;
	margin: 1em auto;
	font-size: xx-large;
	padding: 0.5em 0;
	text-decoration: none;
	position: relative;
}
#content .mhb_contents.green a:hover,
#content .mhb_contents.orange a:hover,
#content .mhb_contents.pink a:hover{
	background-color: #ffb5ff;
}
.triangle{
	position: absolute;
	right: 4%;
  width: 0;
  height: 0;
  border-left: 15px solid black;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
#content .mhb_contents.green .w-60{
	padding-top: 2em;
	text-align: left;
}
@media screen and (max-width: 767px) {
	.mhb_contents.green .entry-box{
		font-size: 4vw;
		background-size: 15%, 10%;
		background-position: 7% bottom, 97% 28%;
	}
	#content .mhb_contents.green a,
	#content .mhb_contents.orange a,
	#content .mhb_contents.pink a{
		font-size: 6vw;
		margin-top: 3%;
		margin-bottom: 10%;
	}
	.triangle{
		top: 28%;
	  border-left: 10px solid black;
	  border-top: 10px solid transparent;
	  border-bottom: 10px solid transparent;
	}
}

.mhb_contents.orange{
	background-color: #ffae00;
	background-image:
		url(../img/subpage/miyazaki-human-bank/img_orange-back-top.png),
		url(../img/subpage/miyazaki-human-bank/img_orange-back-bottom.png);
	background-position:
		top center,
		bottom center;
}
.mhb_contents.orange .title{
	background-image:
		url(../img/subpage/miyazaki-human-bank/img_find-hi.png),
		url(../img/subpage/miyazaki-human-bank/img_find-ka.png);
	background-repeat: no-repeat;
	background-size: 23%;
	background-position:
		7% center,
		96% center;
	padding-bottom: 1em;
}
.mhb_contents.orange .title p{
	width: 35%;
	margin: 0 auto;
}
.mhb_contents.orange .case{
	background-color: #fff;
	width: 80%;
	margin: 2em auto;
	font-size: x-large;
	padding: 0.2em 0.5em;
	text-align: left;
	position: relative;
}
.mhb_contents.orange .case .tag{
	position: absolute;
	left: -1%;
	top: 3%;
	width: 35%;
}
.mhb_contents.orange .case .flow{
	width: 85%;
	margin: 0 auto;
	padding-top: 3em;
}
.mhb_contents.orange .case .flow ul,
.mhb_contents.white ul{
	padding: 2em 0;
	line-height: 160%;
	text-align: justify;
}
.mhb_contents.orange .case .flow ul li,
.mhb_contents.white ul li {
	margin-left: 1em;
	text-indent: -1em;
}
.mhb_contents.orange .entry-box {
	width: 80%;
	margin: 0 auto;
	margin-top: 3em;
	background-image:	url(../img/subpage/miyazaki-human-bank/img_entry-back.png);
	background-repeat: no-repeat;
	background-size: 100%;
	padding-top: 20%;
	padding-bottom: 2%;
}
.mhb_contents.orange .entry-box p {
	width: 63%;
	margin: 0 auto;
}
@media screen and (max-width: 1280px) {
	.mhb_contents.orange{
		background-size: 100%;
	}
}
@media screen and (max-width: 767px) {
	.mhb_contents.orange .title p{
		width: 50%;
	}
	.mhb_contents.orange .case{
		margin: 5% auto;
		font-size: 3vw;
	}
	.mhb_contents.orange .case .tag{
		left: -3%;
		top: 3%;
		width: 40%;
	}
	.mhb_contents.orange .case .flow{
		width: 95%;
	}
	.mhb_contents.orange .case .flow ul,
	.mhb_contents.white ul{
		padding: 8% 5%;
	}
	.mhb_contents.orange .entry-box {
		width: 95%;
		background-image:	url(../img/subpage/miyazaki-human-bank/img_entry-back-sp.png);
		padding-top: 38%;
		padding-bottom: 0;
	}
	.mhb_contents.orange .entry-box p {
		width: 80%;
	}
}

.mhb_contents.pink{
	background-image: url(../img/subpage/miyazaki-human-bank/img_pink-back2.jpg);
}
.mhb_contents.pink .support-box{
	width: 80%;
	margin: 0 auto;
}
.mhb_contents.pink .support-box > p{
	background-image: url(../img/subpage/miyazaki-human-bank/img-support-back.png);
	background-size: 100%;
	background-repeat: no-repeat;
	padding-top: 10%;
	font-size: xx-large;
}
.mhb_contents.pink .support-box .support{
	width: 90%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5% 0;
}
.mhb_contents.pink .support-box .support div{
	flex-basis: 48%;
	background-color: #fff;
	padding: 2% 0;
}
.mhb_contents.pink .support-box .support div img{
	width: 50% !important;
}
.mhb_contents.pink .support-box .support div p{
	line-height: 200% !important;
}
.mhb_contents.pink .support-box .support div p span{
	color: #000;
	font-size: xx-large;
	vertical-align: middle;
}
#content .mhb_contents.pink a{
	width: 57%;
	background-image: url(../img/subpage/miyazaki-human-bank/img-link.png);
	background-size: 0.9em;
	background-repeat: no-repeat;
	background-position: 85% center;
}
@media screen and (max-width: 768px) {
	.mhb_contents.pink .support-box > p{
		font-size: x-large;
	}
	#content .mhb_contents.pink a{
		background-size: 0.6em;
		background-position: 97% center;
	}
}
@media screen and (max-width: 767px) {
	.mhb_contents.pink .support-box > p{
		font-size: 3.4vw;
	}
	.mhb_contents.pink .support-box .support{
		display: block;
	}
	.mhb_contents.pink .support-box .support div:first-of-type{
		margin-bottom: 2em;
	}
	.mhb_contents.pink .support-box .support div p span{
		font-size: x-large;
	}
	#content .mhb_contents.pink a{
		width: 87%;
		background-size: 7%;
	}
}

.mhb_contents.white{
	background-color: #fff;
}
.mhb_contents.white .box {
	width: 62%;
	margin: 0 auto;
	text-align: left;
}
.mhb_contents.white .box p:not(:first-of-type){
	margin-bottom: 2em;
}
.mhb_contents.white ul{
	padding: 0;
}
@media screen and (max-width: 767px) {
	.mhb_contents.white .box {
		width: 90%;
	}
}


/************** マンガページ **************/
#mhb_wap.manga {
  max-width: 1100px;
  width: auto;
  margin: 0 auto;
	position: relative;
}
#mhb_wap.manga .mhb_contents{
  padding-top: 0;
}
#mhb_wap.manga .mhb_contents .box{
  margin-bottom: 4em;
}
#mhb_wap.manga a{
	color: #000;
	background-color: #ffff00;
	padding: 0.5em 0;
	text-decoration: none;
}
#mhb_wap.manga a:hover{
	background-color: #ffb5ff;
}
#mhb_wap.manga .mhb_contents a{	/* 前のページへ戻るボタン */
	width: 40%;
	margin: 0 auto;
	font-size: xx-large;
	position: relative;
}
#mhb_wap.manga a.top{	/* 前のページへ戻るボタン */
	display: none;
}
@media screen and (max-width: 768px) {
	#mhb_wap.manga .mhb_contents .box{
	  margin-bottom: 7em;
	}
	#mhb_wap.manga a.top{	/* TOPボタン */
		display: block;
		width: 3.5em;
		margin: 0 auto;
		font-size: large;
		position: absolute;
		bottom: 6em;
		right: 1em;
		padding-top: 1.7em;
	}
	#mhb_wap.manga a.top .triangle {
    top: 2%;
		left: 33%;
		border-right: 10px solid transparent;
		border-bottom: 10px solid black;
		border-left: 10px solid transparent;
	}
}
@media screen and (max-width: 767px) {
	#mhb_wap.manga .mhb_contents a{	/* 前のページへ戻るボタン */
		width: 72%;
		font-size: 6vw;
	}
}