.bg-container {
	position: relative;
	width: 100%;
	height: 30vh;
	/* margin-top: 70px; */
	z-index: 3;
}

.bg-slider {
	width: 100%;
	background-position: top;
	background-size: contain;
	display: flex;
	padding-top: 70.75%;
	position: relative;
	top: 70px !important;
	z-index: 2 !important;
}

.logoBox {
	position: absolute;
	width: 60%;
	top: 70.75vw;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	text-align: center;
	padding: 0 15px;
}

.leadBox {
	max-width: 600px;
	/* margin: 0 auto 15%; */
	margin: 54% auto 25%;
	z-index: 3;
}

.setWrap {
	display: flex;
	flex-direction: column;
	margin: 0 20% 200px;
}

.setWrap_b {
	margin: 0 auto 200px;
	padding: 12em 0 1em 0;
	width: 100%;
	/* opacity: 0.9; */
}

.setWrap_c {
	margin: 0 auto 200px;
	padding: 12em 0 14em 0;
	width: 100%;
	/* opacity: 0.9; */
}

.bannerBox {
	width: 400px;
	margin: 0 auto 50px;
}

.txtBox {
	width: 100%;
	font-size: 18px;
	line-height: 1.8;
	z-index: 3;
	opacity: 0.9;
	letter-spacing: 2px;
}

.txtBox p {
	width: 100%;
	margin: 0 auto;
	padding: 0 2rem;
}


/*************************
*newsArea
*************************/

.newsBox {
	width: 100%;
	height: 250px;
	overflow: auto;
	overflow-x: hidden;
	margin: 0 auto 50px;
}

.newsTitle {
	width: 40%;
	margin: 0 auto;
	padding-bottom: 25px;
}

.newsTitle img {
	max-width: 100%;
}

.newsArea {
	padding: 1.5rem;
	margin: 0 20%;
}

.newsWrap {
	display: flex;
	flex-direction: row;
	border-bottom: 1px solid #ffffffad;
	padding: 20px 0;
}

.newsDate {
	font-size: 18px;
	padding-right: 50px;
	line-height: 1.7;
}

.newsLead {
	font-size: 18px;
	line-height: 1.5;
}

.newsLead a {
	color: white;
	text-decoration: none;
}

.newsLead a:hover {
	opacity: 0.5;
}

.scroll_bar {
	scrollbar-width: auto;
	scrollbar-color: black #606060;
}

/*************************
*popup
*************************/

.popup-box {
	position: relative;
	width: 60%;
	max-width: 530px;
	/* background: url(..../images/p_back.webp) center center no-repeat;
	background-size: contain; */
	background-color: black;
	margin: 0 auto;
	color: white;
	display: flex;
	align-items: center;
	padding-top: 5em;
}

.popup-content .date {
	font-family: source-han-serif-jp-variable, sans-serif;
	font-variation-settings: "wght" 400;
	font-size: 18px;
	color: #0086a6;
	letter-spacing: 1px;
}

.popup-content .text {
	font-family: source-han-serif-jp-variable, sans-serif;
	font-variation-settings: "wght" 300;
	/* font-size: 20px; */
	font-size: 2.2rem;
	color: #0086a6;
	margin-bottom: 1em;
}

.popup-box_i {
	position: relative;
	width: 55%;
	background-color: black;
	margin: 0 auto;
	color: white;
	font-family: source-han-serif-jp-variable, sans-serif;
	font-variation-settings: "wght" 400;
}

.popup-box_i a {
	color: white;
	text-decoration: underline;
}


.popup-content,
.popup-box_i {
	color: white;
}

@media screen and (max-width:850px) {
	.popup-box_i {
		width: 80%;
	}
}

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

	.logoBox {
		width: 80%;
		max-width: auto;
		margin: 0 auto 50px;
		padding: 0 10px;
		top: 80vw;
	}

	.leadBox {
		width: 80%;
		/* margin-bottom: 80px; */
		margin: 19em auto 5em;
	}


	.leadBox p {
		font-size: 2.2rem;
	}

	.leadBox p.t04 {
		font-size: 1.8rem;
		letter-spacing: 1px;
	}

	.popup-box_i {
		position: relative;
		width: 90%;
		background-color: black;
		margin: 0 auto;
		color: white;
		font-family: source-han-serif-jp-variable, sans-serif;
		font-variation-settings: "wght" 400;
	}

	.popup-box_i a {
		color: white;
		text-decoration: underline;
	}

	.popup-content,
	.popup-box_i,
	.popup-box_cm {
		color: white;
		padding-top: 1em;
	}

}

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

	.leadBox p {
		font-size: 2.0rem;
		line-height: 1.6;
		font-weight: 600;
	}

	.leadBox p span {
		font-size: 3.2rem;
		line-height: 1.0;
	}


	.leadBox p.t04 {
		font-size: 1.6rem;
		letter-spacing: 1px;
	}

	.leadBox p span.inn {
		font-size: 1.4rem;
	}
}


/* アニメーション用のクラス */
.mfp-fade.mfp-bg {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.mfp-fade.mfp-bg.mfp-ready {
	opacity: 1;
	/* 背景の暗さ */
}

.mfp-fade.mfp-bg.mfp-removing {
	opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
	opacity: 0;
	transform: scale(0.95);
	transition: all 0.3s ease;
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
	transform: scale(1);
}

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
	transform: scale(0.95);
}

/*************************
*newsArea
*************************/

.newsBox {
	width: 100%;
	height: 550px;
	overflow: auto;
	overflow-x: hidden;
	margin: 0 auto 2em;
}

.newsTitle {
	width: 40%;
	margin: 0 auto;
	padding-bottom: 25px;
}

.newsTitle img {
	max-width: 100%;
}

.newsArea {
	padding: 1.5rem;
	margin: 0 20%;
}

.newsWrap {
	display: flex;
	flex-direction: row;
	border-bottom: 1px solid #ffffffad;
	padding: 25px 0;
}

.newsDate {
	font-family: "cormorant-sc", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 2.2rem;
	padding-right: 50px;
	line-height: 1.2;
}

.newsLead {
	font-size: 18px;
	line-height: 1.5;
}

.newsLead a {
	color: white;
	text-decoration: none;
}

.newsLead a:hover {
	opacity: 0.5;
}

@media screen and (max-width:850px) {
	.newsBox {
		width: 100%;
	}

	.newsTitle {
		width: 100%;
		margin: 0;
	}

	.newsTitle img {
		display: block;
		width: 45%;
		margin: 0 auto;
	}

	.newsArea {
		width: 77%;
		padding: 0;
		margin: 0 auto;
	}

	.newsWrap {
		flex-direction: column;
	}

	.newsWrap:last-child {
		border: none;
	}

	.newsDate {
		font-size: 2rem;
		margin-bottom: 5px;
	}

	.newsLead {
		font-size: 1.6rem;
	}
}

h3.title {
	font-family: YakuHanMPs, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;
}

h3.text {
	display: inline;
	/* 背景色をテキストにのみ適用するため */
	text-align: left;
	color: #0086a6;
	font-size: 20px;
	font-family: YakuHanMPs, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;
	line-height: 1.3;
	letter-spacing: 1;
}

.date {
	font-size: 18px;
	color: #0086a6;
	line-height: 2;
}

.box img {
	width: 100%;
	margin-top: 10px;
}

.box {
	margin-top: 2em;
	color: white;
	line-height: 1.67;
	font-size: 1.7rem;
	letter-spacing: 1px;
}

.box a {
	color: white;
	margin: 0 3px;
}

/* .popup-box {
	position: relative;
	background: black;
	padding: 40px;
	width: auto;
	max-width: 800px;
	margin: 20px auto;
	height: auto;
	overflow: auto;
	color: white;
} */

.popup-box_b {
	position: relative;
	background: black;
	width: auto;
	max-width: 500px;
	margin: 0 auto;
	height: auto;
	overflow: auto;
	color: white;
}

p.caution {
	font-size: 1.3rem;
	text-indent: -1em;
	padding-left: 1em;
	line-height: 1.47;
	margin-bottom: 10px;
}

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

	h3.text {
		font-size: 1.7rem;
	}

	.date {
		font-size: 2.2rem;
	}

	.contents {
		padding: 0 1.5rem;
	}

	.box {
		font-size: 1.7rem;
		letter-spacing: .85px;
	}

	p.caution {}

	.popup-box {
		position: relative;
		background: black;
		/* padding: 3rem 2rem; */
		padding: 0;
		width: auto;
		/* max-width: 95%; */
		max-width: 60%;
		margin: 0 auto;
	}
}

@media screen and (max-width:500px) {
	.newsBox {
		width: 100%;
	}

	.newsTitle {
		width: 100%;
		margin: 0;
	}

	.newsTitle img {
		display: block;
		width: 45%;
		margin: 0 auto;
	}

	.newsArea {
		width: 90%;
		padding: 0;
		margin: 0 auto;
	}

	.newsWrap {
		flex-direction: column;
	}

	.newsWrap:last-child {
		border: none;
	}

	.newsDate {
		font-size: 2.1rem;
	}

	.newsLead {
		font-size: 1.6rem;
	}
}


/* cast. */
.nWrap {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 5px;
	width: 50%;
	margin: 0 auto;
}

.nWrap2 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

.nWrap-item {
	font-size: 24px;
	padding: 20px 0;
	text-align: center;
	font-weight: 400;
}

.nWrap-item span {
	font-size: 16px;
	text-align: center;
	color: #0086a6;
}

.sWrap {}

.sWrap span {
	font-size: 16px;
}

.sWrap ul {
	display: flex;
	flex-direction: column;
	text-align: center;
	gap: 50px;
}

.sWrap li {
	font-size: 22px;
	font-weight: 400;
}

.sWrap .dummy {
	width: auto;
	height: 0;
}

.oWrap {}

.oWrap span {
	display: block;
	font-size: 16px;
}

.oWrap ul {
	display: flex;
	flex-direction: column;
	text-align: center;
	gap: 10px;
}

.oWrap li {
	font-size: 24px;
	font-weight: 400;
}

.oWrap a {
	color: white;
}

.charaBox {
	display: flex;
	/* flex-direction: row;
	justify-content: space-around; */
	flex-direction: column;
	gap: 50px;
	z-index: 3;
}

.cp {
	width: 300px;
	height: 435px;
	/* border: 1px solid white;
	border-radius: 5%; */
	/* background-size: cover; */
	background-size: cover;
	background-position: top;
}

/* .cpbk {
	border: 2px solid black;
} */


.c1 {
	background-image: url(../images/chara/01.webp);
	/* background-size: cover;
	background-position: top; */
}

.c2 {
	background-image: url(../images/chara/02.webp);
	/* background-size: cover;
	background-position: top; */
}

.c3 {
	background-image: url(../images/chara/03.webp);
}

.c4 {
	background-image: url(../images/chara/04.webp);
}

.c5 {
	background-image: url(../images/chara/05.webp);
}

.c6 {
	background-image: url(../images/chara/06.webp);
}

.c7 {
	background-image: url(../images/chara/07.webp);
}

.c8 {
	background-image: url(../images/chara/08.webp);
}

.c9 {
	background-image: url(../images/chara/09.webp);
}






.charaWrap {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding-left: 2em;
	letter-spacing: 1px;
}

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

	.txtBox ul {
		width: 53%;
	}

	.setWrap {
		margin: 0 auto 160px;
		width: 77%;
	}

	.setWrap_b {
		margin: 0 auto 200px;
		padding: 8em 0 1em 0;
		width: 100%;
		/* opacity: 0.9; */
	}

	.setWrap_c {
		margin: 0 auto 200px;
		padding: 8em 0 11em 0;
		width: 100%;
		/* opacity: 0.9; */
	}

	.txtBox {
		width: 100%;
		font-size: 1.7rem;
		line-height: 1.8;
		letter-spacing: 2px;
	}

	.txtBoxB {
		font-size: 1.5rem;
	}

	.bannerBox {
		width: 55%;
		margin: 0 auto 60px;
	}

	.txtBox li {
		font-size: 16px;
	}

	.charaBox {
		display: flex;
		flex-direction: column;
		width: 60%;
		margin: 0 auto;
	}

	.charaWrap {
		/* width: 60.3%; */
		padding-left: 2rem;
	}

	.cp {
		width: 35%;
		height: 350px;
	}

	.charaT01 {
		font-size: 2.3rem;
		line-height: 1.2;
	}

	.ts {
		font-size: 1.8rem;
	}

	.ts2 {
		font-size: 1.8rem;
	}

	.charaT02 {
		font-size: 1.5rem;
		line-height: 1.4;
	}

	.nWrap {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0;
		width: 65%;
		margin: 0 auto 25px;
	}

	.nWrap2 {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 10px;
	}

	.nWrap-item {
		font-size: 1.3em;
		padding: 0;
		text-align: center;
		letter-spacing: 2px;
		margin-bottom: 3em;
	}


	.sWrap ul {
		width: 100%;
		display: flex;
		flex-direction: column;
		text-align: center;
		gap: 20px;
	}

	.sWrap li {
		font-size: 1.1em;
		font-weight: 400;
		letter-spacing: 2px;
		margin-bottom: 2em;
		line-height: 1.3;
	}

	.sWrap span {
		font-size: 0.8em;
	}

	.sWrap .dummy {
		width: auto;
		height: 0;
	}

	.sWrap .fsize {
		font-size: 1.6rem;
		font-weight: 600;
	}

	.sWrap .fsize span {
		display: block;
		font-size: 1.3rem;
		line-height: 1.4;
	}

	.charaBox {
		display: flex;
		/* flex-direction: row;
	justify-content: space-around; */
		flex-direction: column;
		gap: 50px;
		z-index: 3;
	}


	.caution {
		font-size: 1.3rem;
	}

	.caution_b {
		display: block;
		font-size: 1.3rem;
		margin: 0 0 5px 1em;
	}

	.caution_c {
		font-size: 1.3rem;
	}

	.oWrap {}

	.oWrap span {
		font-size: 16px;
	}

	.oWrap ul {
		width: 100%;
		display: flex;
		flex-direction: column;
		text-align: center;
	}

	.oWrap li {
		font-size: 1.1em;
		font-weight: 400;
	}


}

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

	.popup-box {
		max-width: 95%;
	}

	.txtBox ul {
		width: 53%;
	}

	.setWrap_p {
		margin: 0 auto 80px;
		width: 100%;
		position: relative;
	}

	.setWrap {
		margin: 0 auto 160px;
		width: 90%;
	}

	.setWrap_b {
		margin: 0 auto 80px;
		padding: 25px 0 1em;
		width: 100%;
		/* opacity: 0.9; */
	}

	.setWrap_c {
		margin: 0 auto 80px;
		padding: 25px 0 3em;
		width: 100%;
		/* opacity: 0.9; */
	}

	.charaBox {
		display: flex;
		/* flex-direction: row;
	justify-content: space-around; */
		flex-direction: column;
		gap: 50px;
		z-index: 3;
	}


	.txtBox {
		font-size: 1.6rem;
		line-height: 1.8;
		letter-spacing: 1px;
	}

	.txtBoxB {
		font-size: 1.5rem;
	}

	.bannerBox {
		width: 80%;
		margin: 2em auto 3em;
	}

	.txtBox li {
		font-size: 16px;
	}

	.charaBox {
		display: flex;
		flex-direction: column;
		width: 100%;
		margin: 0 auto;
	}


	.charaWrap {
		padding-left: 2rem;
	}

	.cp {
		width: 45%;
		height: 250px;
	}

	.charaT01 {
		font-size: 1.8rem;
		line-height: 1.2;
	}

	.ts {
		font-size: 1.3rem;
	}

	.ts2 {
		font-size: 1.4rem;
	}

	.charaT02 {
		font-size: 1.3rem;
		line-height: 1.4;
	}

	.nWrap {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0;
		width: 85%;
		margin: 0 auto 25px;
	}

	.nWrap2 {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 10px;
	}

	.nWrap-item {
		font-size: 1.2em;
		padding: 0;
		text-align: center;
		letter-spacing: 2px;
		margin-bottom: 3em;
	}

	.ed {
		margin-bottom: 0;
	}

	.sWrap ul {
		width: 100%;
		display: flex;
		flex-direction: column;
		text-align: center;
		gap: 20px;
	}

	.sWrap li {
		font-size: 1.1em;
		font-weight: 400;
		letter-spacing: 2px;
		margin-bottom: 2em;
		line-height: 1.3;
	}

	.sWrap span {
		font-size: 0.8em;
		line-height: 30px;
	}

	.sWrap .dummy {
		width: auto;
		height: 0;
	}

	.sWrap .fsize {
		font-size: 1.4rem;
		font-weight: 600;
	}

	.oWrap {}

	.oWrap span {
		display: block;
		font-size: 0.8em;
		line-height: 1.6;
	}

	.oWrap ul {
		width: 100%;
		display: flex;
		flex-direction: column;
		text-align: center;
		gap: 10px;
	}

	.oWrap li {
		font-size: 1.1em;
		font-weight: 400;
	}


}


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

	.charaWrap {
		padding-left: 1.6rem;
	}

	.cp {
		width: 42.7%;
		height: 220x;
		border-radius: 2%;
	}

	.ts {
		font-size: 1.3rem;
	}

	.ts2 {
		font-size: 1.3rem;
	}

	.sWrap span {
		font-size: 0.8em;
	}

}

/* charabox 1st */
.chara_box_ft {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
	gap: 40px;
	width: 60%;
	margin: 0 auto;
	padding-top: 50px;
}

.chara_img_ft {
	width: 100%;
	margin-top: 50px;
}

.chara_img_ft img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.chara_img_position_ft {
	object-position: 0 top;
}

.chara_txtWrap_ft {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: left;
	padding: 1em 1em;
}

.chara_name_ft {
	font-family: source-han-serif-jp-variable, sans-serif;
	font-variation-settings: "wght" 400;
	font-size: 4em;
	line-height: 1;
	margin-bottom: 20px;
	letter-spacing: 2px;
}

.chara_name_ft span {
	font-family: source-han-serif-jp-variable, sans-serif;
	font-variation-settings: "wght" 400;
	font-size: 17px;
	letter-spacing: 1px;
}

.chara_name_ft span.beta {
	font-family: source-han-serif-jp-variable, sans-serif;
	font-variation-settings: "wght" 400;
	font-size: 25px;
	letter-spacing: 1px;
}

.chara_name_b_ft {
	font-family: source-han-serif-jp-variable, sans-serif;
	font-variation-settings: "wght" 600;
	font-size: 26px;
	line-height: 1;
	letter-spacing: 1px;
	color: #0086a6;
}

.chara_txt_ft p {
	font-family: source-han-serif-jp-variable, sans-serif;
	font-variation-settings: "wght" 600;
	font-size: 17px;
	line-height: 1.7;
	margin-top: 2em;
	letter-spacing: 1px;
}

.chara_txt_ft p span {
	font-family: source-han-serif-jp-variable, sans-serif;
	font-variation-settings: "wght" 600;
	font-size: 14px;
	line-height: 1.7;
	margin-top: 2em;
	letter-spacing: 1px;
}

.mfp-clos {
	top: 0;
}

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

	.menuWrap {
		width: 55%;
		margin: 0 auto;
	}

	.chara_box_ft {
		width: 100%;
		padding-top: 0;
		justify-content: center;
		gap: 20px;
	}

	.chara_img_ft img {
		height: auto;
	}

	.chara_name_ft {
		font-size: 2em;
		line-height: 1.2;
	}

	.chara_name_ft span {
		font-size: 16px;
	}

	.chara_txtWrap_ft {
		padding: 1em 2em;
	}

	.chara_txt_ft p {
		font-size: 17px;
	}

}


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

	.chara_box_ft {
		width: 90%;
	}

	.chara_img_ft img {
		height: auto;
	}

	.chara_name_ft {
		font-size: 2em;
		line-height: 1.2;
	}

	.chara_name_ft span {
		font-size: 16px;
	}

	.chara_txtWrap_ft {
		padding: 1em 2em;
	}

	.chara_txt_ft p {
		font-size: 16px;
	}

}

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

	.chara_box_ft {
		width: 100%;
	}

	.chara_img_ft img {
		height: auto;
	}

	.chara_name_ft {
		font-size: 1.7em;
		line-height: normal;
	}

	.chara_name_ft span {
		font-size: 15px;
	}

	.chara_name_b_ft {
		font-size: 20px;
	}

	.chara_txtWrap_ft {
		padding: 1em 1em;
	}

	.chara_txt_ft p {
		font-size: 15px;
	}

	.chara_txt_ft p span {
		font-size: 13px;
	}

}


/* charaBox */
.chara_box {
	width: 100%;
	/* width: 35%; */
	margin: 0 auto 0;
	display: flex;
	flex-direction: column;
	justify-content: left;
	z-index: 1045;
}

.chara_img {
	width: 100%;
	/* margin-top: 50px; */
}

.chara_img img {
	width: 100%;
	/* height: 350px; */
	height: auto;
	object-fit: cover;
}

.chara_img_position {
	object-position: 0 top;
}

.chara_txtWrap {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: left;
	padding: 1em 1em;
}

.chara_name {
	font-family: source-han-serif-jp-variable, sans-serif;
	font-variation-settings: "wght" 400;
	font-size: 4em;
	line-height: 1;
	margin-bottom: 20px;
	letter-spacing: 2px;
}

.chara_name span {
	font-family: source-han-serif-jp-variable, sans-serif;
	font-variation-settings: "wght" 400;
	font-size: 17px;
	letter-spacing: 1px;
}

.chara_name span.beta {
	font-family: source-han-serif-jp-variable, sans-serif;
	font-variation-settings: "wght" 400;
	font-size: 25px;
	letter-spacing: 1px;
}

.chara_name_b {
	font-family: source-han-serif-jp-variable, sans-serif;
	font-variation-settings: "wght" 400;
	font-size: 26px;
	line-height: 1;
	letter-spacing: 1px;
	color: #0086a6;
}

.chara_name_ft span.beta {
	font-family: source-han-serif-jp-variable, sans-serif;
	font-variation-settings: "wght" 400;
	font-size: 25px;
	letter-spacing: 1px;
}

.chara_txt p {
	font-family: source-han-serif-jp-variable, sans-serif;
	font-variation-settings: "wght" 600;
	font-size: 17px;
	line-height: 1.7;
	margin-top: 2em;
	letter-spacing: 1px;
}

.chara_txt p span {
	font-family: source-han-serif-jp-variable, sans-serif;
	font-variation-settings: "wght" 600;
	font-size: 14px;
	line-height: 1.7;
	margin-top: 2em;
	letter-spacing: 1px;
}


/* comment */

.popup-box_cm {
	position: relative;
	width: 55%;
	background-color: black;
	margin: 0 auto;
	color: white;
	font-family: source-han-serif-jp-variable, sans-serif;
	font-variation-settings: "wght" 400;
	padding-top: 1em;
}

.cm_txt {
	width: 100%;
}

.cm_txt p {
	font-family: source-han-serif-jp-variable, sans-serif;
	font-variation-settings: "wght" 400;
	font-size: 1.8rem;
	line-height: 1.7;
	margin-top: 2em;
	letter-spacing: 1px;
}


/*------------------------------------------------
storyArea
-------------------------------------------------*/

.storyWrap {
	width: 100%;
	display: flex;
	flex-direction: column;
	margin: 0 auto 250px;
}

.storyWrap a {
	color: #ffffff;
	text-decoration: none;
}

.bnTxt {
	width: 100%;
	font-family: source-han-serif-jp-variable, sans-serif;
	font-variation-settings: "wght" 300;
	font-size: 18px;
	letter-spacing: 1px;
	margin-bottom: 50px;
	text-align: center;
}

.bnArea {
	width: 100%;
}

.bnArea ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: 1em;
}

.bnArea li {
	width: 32%;
	font-family: source-han-serif-jp-variable, sans-serif;
	font-variation-settings: "wght" 300;
	font-size: 18px;
	letter-spacing: 1px;
	margin-bottom: 20px;
}

.bnArea li a {
	color: #ffffff;
	text-decoration: none;
	display: block;
}

.bnArea p {
	font-size: 20px;
	color: #0086a6;
	margin-bottom: 1em;
}

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

	.headbox {
		position: fixed;
		width: 100%;
		height: 70px;
		background-color: #000;
		z-index: 101;
	}

	.bg-container {
		position: relative;
		width: 100%;
		/* height: 30vh; */
		/* ヘッダー分引く */
		margin-top: 70px;
		/* ヘッダー分下げる */
	}

	.headbox {
		position: fixed;
		width: 100%;
		height: 70px;
		background-color: #000;
		/* 通常時は黒い背景 */
		z-index: 2000;
		/* gnavより高いz-indexに変更 */
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20px;
		transition: background-color 0.3s ease;
		/* 背景色の変化にアニメーション */
	}

	/* メニューが開いている時はheadboxの背景を透明に */
	.headbox.menu-open {
		background-color: transparent;
	}

	.menuWrap {
		width: 45%;
		margin: 0 auto;
	}

	/* charaBox */

	.popup-box_b {
		position: relative;
		background: black;
		/* padding: 3rem 2rem; */
		width: 100%;
		margin: 0 auto;
		/* height: 80%; */
	}

	.chara_box {
		width: 100%;
		margin: 20px auto 0;
		display: flex;
		flex-direction: column;
		justify-content: left;
	}


	.chara_img {
		width: 100%;
		margin-top: 30px;
	}

	.chara_img img {
		width: 100%;
		height: auto;
		object-fit: cover;
	}

	.chara_img_position {
		object-position: 0 top;
	}

	.chara_txtWrap {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: left;
		padding: 1em 1em;
	}

	.chara_name {
		font-family: source-han-serif-jp-variable, sans-serif;
		font-variation-settings: "wght" 400;
		font-size: 2em;
		line-height: 1.3;
		margin-bottom: 15px;
		letter-spacing: 2px;
	}

	.chara_name span {
		font-family: source-han-serif-jp-variable, sans-serif;
		font-variation-settings: "wght" 400;
		font-size: 15px;
		letter-spacing: 1px;
	}

	.chara_name_b {
		font-family: source-han-serif-jp-variable, sans-serif;
		font-variation-settings: "wght" 600;
		font-size: 26px;
		line-height: 1;
		letter-spacing: 1px;
		color: #0086a6;
	}

	.chara_name span.beta {
		font-family: source-han-serif-jp-variable, sans-serif;
		font-variation-settings: "wght" 400;
		font-size: 25px;
		letter-spacing: 1px;
	}

	.chara_txt p {
		font-family: source-han-serif-jp-variable, sans-serif;
		font-variation-settings: "wght" 600;
		font-size: 17px;
		line-height: 1.7;
		margin-top: 2em;
		letter-spacing: 1px;
	}

	.chara_txt p span {
		font-family: source-han-serif-jp-variable, sans-serif;
		font-variation-settings: "wght" 600;
		font-size: 13px;
		line-height: 1.7;
		margin-top: 2em;
		letter-spacing: 1px;
	}

	.popup-box_cm {
		position: relative;
		width: 90%;
		background-color: black;
		margin: 0 auto;
		color: white;
		font-family: source-han-serif-jp-variable, sans-serif;
		font-variation-settings: "wght" 400;
	}

	.cm_txt {
		width: 100%;
		padding-top: 2em;
	}

	.cm_txt p {
		font-family: source-han-serif-jp-variable, sans-serif;
		font-variation-settings: "wght" 400;
		font-size: 1.7rem;
		line-height: 1.7;
		margin-top: 0;
		letter-spacing: 1px;
	}

/*------------------------------------------------
storyArea
-------------------------------------------------*/

.storyWrap {
	margin-bottom: 100px;
}

.bnTxt {
	margin-bottom: 30px;
	font-size: 16px;
}

.bnArea p {
	font-size: 16px;
}

.bnArea ul {
	gap: 0.5em;
}

.bnArea li {
	width: 30%;
	font-size: 16px;
}

footer {
	padding-top: 0;
}

}


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

	.headbox {
		position: fixed;
		width: 100%;
		height: 70px;
		background-color: #000;
		z-index: 101;
	}

	.bg-container {
		position: relative;
		width: 100%;
		/* height: 30vh; */
		/* ヘッダー分引く */
		margin-top: 70px;
		/* ヘッダー分下げる */
	}

	.headbox {
		position: fixed;
		width: 100%;
		height: 70px;
		background-color: #000;
		/* 通常時は黒い背景 */
		z-index: 2000;
		/* gnavより高いz-indexに変更 */
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20px;
		transition: background-color 0.3s ease;
		/* 背景色の変化にアニメーション */
	}

	/* メニューが開いている時はheadboxの背景を透明に */
	.headbox.menu-open {
		background-color: transparent;
	}

	.menuWrap {
		width: 55%;
		margin: 0 auto;
	}


	/*************************
     *charaBox
     *************************/

	.popup-box_b {
		position: relative;
		background: black;
		/* padding: 3rem 2rem; */
		width: 100%;
		margin: 0 auto;
		/* height: 80%; */
	}

	.chara_box {
		width: 100%;
		margin: 2.5em auto;
		display: flex;
		flex-direction: column;
		justify-content: left;
	}

	.chara_img {
		width: 100%;
		/* margin-top: 50px; */
		margin-top: 0;
	}

	.chara_img img {
		width: 100%;
		/* height: 350px; */
		height: auto;
		object-fit: cover;
	}

	.chara_img_position {
		object-position: 0 top;
	}

	.chara_txtWrap {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: left;
		padding: 1em 1em;
	}

	.chara_name {
		font-family: source-han-serif-jp-variable, sans-serif;
		font-variation-settings: "wght" 400;
		font-size: 2em;
		line-height: 1.2;
		margin-bottom: 20px;
		letter-spacing: 2px;
	}

	.chara_name span {
		font-family: source-han-serif-jp-variable, sans-serif;
		font-variation-settings: "wght" 400;
		font-size: 16px;
		letter-spacing: 1px;
	}

	.chara_name_b {
		font-family: source-han-serif-jp-variable, sans-serif;
		font-variation-settings: "wght" 600;
		font-size: 26px;
		line-height: 1;
		letter-spacing: 1px;
		color: #0086a6;
	}

	.chara_txt p {
		font-family: source-han-serif-jp-variable, sans-serif;
		font-variation-settings: "wght" 600;
		font-size: 16px;
		line-height: 1.7;
		margin-top: 2em;
		letter-spacing: 1px;
	}

	.chara_txt p span {
		font-family: source-han-serif-jp-variable, sans-serif;
		font-variation-settings: "wght" 600;
		font-size: 13px;
		line-height: 1.7;
		margin-top: 2em;
		letter-spacing: 1px;
	}

}

.chara_box_ft img {
	pointer-events: initial;
}