@charset "utf-8";
html,
body {
	height: auto;
}

body {
	/*
	font-family: 'Noto Sans JP', sans-serif; */
	font-family: 'Noto Serif JP', serif;
	font-size: 16px;
	line-height: 1.4em;
	color: #ffffff;
	position: relative;
	z-index: 0;
}

.bg02 {
	background-color: #27293a;
}

.bg03 {
	background-color: #ffffff;
}
.bg04 {
	background-color: #000000;
}
.bg05 {
	background: -moz-linear-gradient(50% 127.08% 90deg, rgba(31, 46, 85, 1) 0%, rgba(0, 0, 14, 1) 55.17%, rgba(0, 0, 0, 1) 86.66%);
	background: -webkit-linear-gradient(90deg, rgba(31, 46, 85, 1) 0%, rgba(0, 0, 14, 1) 55.17%, rgba(0, 0, 0, 1) 86.66%);
	background: -webkit-gradient(linear, 50% 127.08%, 50% -17.1%, color-stop(0, rgba(31, 46, 85, 1)), color-stop(0.5517, rgba(0, 0, 14, 1)), color-stop(0.8666, rgba(0, 0, 0, 1)));
	background: -o-linear-gradient(90deg, rgba(31, 46, 85, 1) 0%, rgba(0, 0, 14, 1) 55.17%, rgba(0, 0, 0, 1) 86.66%);
	background: -ms-linear-gradient(90deg, rgba(31, 46, 85, 1) 0%, rgba(0, 0, 14, 1) 55.17%, rgba(0, 0, 0, 1) 86.66%);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1F2E55', endColorstr='#000000' ,GradientType=0)";
	background: linear-gradient(0deg, rgba(31, 46, 85, 1) 0%, rgba(0, 0, 14, 1) 55.17%, rgba(0, 0, 0, 1) 86.66%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#1F2E55', GradientType=0);
}
.bg06 {
	background: none;
}
.bg07 {
	background-image: -moz-linear-gradient(90deg, rgb(199, 199, 211) 0%, rgb(53, 53, 56) 100%);
	background-image: -webkit-linear-gradient(90deg, rgb(199, 199, 211) 0%, rgb(53, 53, 56) 100%);
	background-image: -ms-linear-gradient(90deg, rgb(199, 199, 211) 0%, rgb(53, 53, 56) 100%);
}
.bg08 {
	background-color: #e5fffc;
}
.bg09 {
	background-color: #202028;
}
.bg10 {
	background-color: #ffffff;
	background-image: url(../character/img/bg01.jpg);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: auto 100%;
}
.bg11 {
	background-image: -moz-linear-gradient(90deg, rgb(0, 0, 14) 0%, rgb(31, 46, 85) 100%);
	background-image: -webkit-linear-gradient(90deg, rgb(0, 0, 14) 0%, rgb(31, 46, 85) 100%);
	background-image: -ms-linear-gradient(90deg, rgb(0, 0, 14) 0%, rgb(31, 46, 85) 100%);
}

.bg12 {
	background-color: #2b2b2b;
	background-image: url(../character/img/bg_zero.png);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: auto 100%;
}
.bg13 {
	background-color: #f1f1f1;
}
/**key visual*/
.key_silde {
	position: relative;
	background-color: #27293a;
}

.key_silde .key_box {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.key_silde .key_box .detail {
	background-color: #ffffff;
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	padding: 0 0 0 3%;
	box-sizing: border-box;
}

.key_silde .key_box .detail.bg02 {
	background-color: #000000;
}

.key_silde .key_box .detail .img_logo {
	margin-top: 33%;
	margin-bottom: 7%;
}

.key_silde .key_box .detail .btn_check {
	margin-bottom: 13%;
}

.key_silde .key_box .detail .thumb {
	margin-bottom: 5%;
	margin-top: auto;
	display: flex;
	gap: 2%;
}

/*news section*/
.sec_news {
	position: relative;
	font-family: 'Noto Sans JP', sans-serif;
}

.sec_news .news_box {
	display: flex;
	justify-content: space-between;
}

.sec_news .news_box .top_news {
	width: 32%;
	border: 1px solid #b3b3b3;
	box-sizing: border-box;
	padding: 2%;
}
.sec_news .news_box a {
	display: block;
	color: #e6e6e6;
}

.sec_news .news_box .img {
	margin-bottom: 10px;
}

.sec_news .news_box .date {
	margin-top: 10px;
	font-size: 90%;
}

.sec_news .news_box .resend_news {
	width: 66%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 2%;
}

.sec_news .news_box .resend_news .sub {
	width: 49%;
	border: 1px solid #b3b3b3;
	box-sizing: border-box;
}

.sec_news .news_box .resend_news .sub .img img {
	width: 100%;
}

.sec_news .news_box .resend_news .sub .detail {
	padding: 2%;
}

.sec_news .news_box .resend_news .sub .date {
	padding: 2%;
}
.sec_news .news_box .resend_news .sub .detail .date {
	display: none;
}

/**story*/
.sec_story {
	position: relative;
}

.sec_story .story_box {
	background: url(../img/bg_story.jpg) top center no-repeat;
	background-size: cover;
}

.sec_story .story_box .story {
	width: 20%;
	color: #30303f;
	margin-left: auto;
	margin-right: 19%;
}

.sec_story .story_box .story .title {
	font-size: 26px;
	text-align: right;
	padding-top: 40px;
	margin-bottom: 40px;
}

.sec_story .story_box .story .detail {
	margin-bottom: 40px;
	line-height: 1.6em;
}

/** story zero*/
.sec_storyzero {
	position: relative;
}

.sec_storyzero .story_box {
	background: url(../img/bg_storyzero.jpg) top center no-repeat;
	background-size: cover;
}

.sec_storyzero .story_box .story {
	width: 20%;
	color: #e6e6e6;
	margin-left: 19%;
	margin-right: auto;
}

.sec_storyzero .story_box .story .title {
	font-size: 26px;
	text-align: left;
	padding-top: 40px;
	margin-bottom: 40px;
}

.sec_storyzero .story_box .story .detail {
	margin-bottom: 40px;
	line-height: 1.6em;
}
/** char*/
.sec_char {
	position: relative;
}

.sec_char .char_wrap {
	background: url(../img/bg_char.jpg) top center no-repeat;
	background-size: cover;
}
/** novel*/

.sec_novel {
	background: url(../img/bg_novel.jpg) top center no-repeat;
	background-size: cover;
}

.sec_storyzero .story_box .story {
	width: 20%;
	color: #e6e6e6;
	margin-left: 19%;
	margin-right: auto;
}

.sec_storyzero .story_box .story .title {
	font-size: 26px;
	text-align: left;
	padding-top: 40px;
	margin-bottom: 40px;
}

.sec_storyzero .story_box .story .detail {
	margin-bottom: 40px;
	line-height: 1.6em;
}
.sec_novel {
	position: relative;
	color: #534741;
}

.sec_novel h2 img {
	width: 100%;
}

.sec_novel .novel_wrap {
	margin-top: -230px;
}

.sec_novel .novel_wrap .title {
	font-size: 26px;
	font-weight: bold;
	line-height: 1.2em;
	margin-bottom: 20px;
}

.sec_novel .novel_wrap .author {
	font-size: 16px;
	line-height: 1.2em;
	margin-bottom: 5px;
}

.sec_novel .novel_wrap .date {
	font-size: 16px;
	line-height: 1.2em;
	padding-bottom: 5px;
}

.sec_novel .booksflex {
	padding: 2%;
	background: #ffffff;
	border-radius: 20px;
}
.booksflex .slick-slide {
	padding: 0 5px; /* 各スライドの左右に5pxの余白を追加 */
}

/* slickのトラック部分の左右の余白を打ち消す */
.booksflex .slick-list {
	margin: 0 -5px;
}
.sec_novel .booksflex .slick-prev,
.sec_novel .booksflex .slick-next {
	top: 44%;
}

.sec_novel .booksflex .slick-prev:before,
.sec_novel .booksflex .slick-next:before {
	display: none;
}

.hr_before {
	padding-bottom: 10vw;
}

.hr_after {
	padding-top: 15vw;
}

.hr01 {
	position: absolute;
    bottom: -21vw;
    width: 100%;
    z-index: 1;
    pointer-events: none;
}

.hr01 img {
	width: 100%;
}

.sec_linestamp {
	padding-top: 40px;
}
@media screen and (max-width: 768px) {
	/*Common*/
	* {
		box-sizing: border-box;
		word-wrap: break-word;
	}
	img {
		max-width: 100%;
		vertical-align: middle;
	}
	.pconly {
		display: none !important;
	}
	/*  .sp_only {
        display: block !important;
    } */
	.sp_mt {
		margin-top: 10px;
	}
	.sp_mb {
		margin-bottom: 10px;
	}
	.sp_p {
		padding: 0 2%;
	}
	.spbr {
		display: block;
	}
	.spleft {
		text-align: left;
	}
	/*header*/
	html,
	body {
		width: 100%;
	}
	nav,
	#wrap,
	#content,
	#line_header,
	#line_footer footer {
		box-sizing: border-box;
	}
	#wrap {
		width: 100%;
		background-image: none;
	}
	.inner {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
	}

	.inner_big {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
	}

	.inner02 {
		width: 96%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
	}

	.inner03 {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
	}
	.spw60 {
		width: 60%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
	}
	.spinner {
		padding-left: 4%;
		padding-right: 4%;
	}
	.key_box {
		flex-wrap: wrap;
	}
	.key_box .w50 {
		width: 100%;
	}
	.key_box .w50.detail {
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.key_box .w50.detail > img {
		order: 2;
	}
	.key_box .w50.detail > a {
		order: 3;
		margin-bottom: 10%;
	}
	.key_silde .key_box .detail .btn_check {
		margin-bottom: 13%;
		width: 60%;
		margin-left: auto;
		margin-right: 5%;
	}
	.key_silde .key_box .detail .img_logo {
		margin-top: 2%;
		margin-bottom: 7%;
		width: 90%;
	}
	.key_box .w50.detail .thumb {
		order: 1;
		margin-top: 4%;
		margin-bottom: 4%;
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}

	.sec_news {
		position: relative;
		font-family: 'Noto Sans JP', sans-serif;
		padding-bottom: 0;
	}
	.sec_news .inner {
		padding-left: 4%;
		padding-right: 4%;
	}
	.sec_news .news_box {
		display: block;
		justify-content: space-between;
	}
	.sec_news .news_box .top_news {
		width: 100%;
		border: 1px solid #b3b3b3;
		box-sizing: border-box;
		padding: 2%;
		margin-bottom: 20px;
	}
	.sec_news .news_box .resend_news {
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 2%;
	}
	.sec_news .news_box .resend_news .sub {
		width: 100%;
		border: 1px solid #b3b3b3;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
	}
	.sec_news .news_box .resend_news .img {
		margin-bottom: 0px;
		width: 47%;
	}
	.sec_news .news_box .resend_news .sub .detail {
		padding: 5px 2% 0 2%;
		width: 65%;
		font-size: 12px;
		line-height: 1.2em;
	}
	.sec_news .news_box .resend_news .sub .date {
		display: none;
	}
	.sec_news .news_box .resend_news .sub .detail .date {
		display: block;
	}
	.sec_story .story_box {
		background: url(../img/bg_story_sp.jpg) top center no-repeat;
		background-size: cover;
		background-attachment: initial;
		padding-top: 0px;
		padding-bottom: 0px;
	}
	.sec_story .story_box .story {
		width: 53%;
		margin-left: auto;
		margin-right: 4%;
		padding-top: 20px;
		font-size: 13px;
	}
	.sec_story .story_box .story .title {
		font-size: 26px;
		text-align: right;
		padding-top: 10px;
		margin-bottom: 20px;
	}
	.sec_story .story_box .story .detail {
		margin-bottom: 0px;
		line-height: 1.6em;
	}
	.sec_story .story_box .story .right {
		padding-top: 10px;
		padding-bottom: 10px;
		margin-bottom: 0px;
	}
	.sec_storyzero .story_box {
		background: url(../img/bg_storyzero_sp.jpg) top center no-repeat;
		background-size: cover;
		background-attachment: initial;
		padding-top: 0px;
		padding-bottom: 0px;
	}
	.sec_storyzero .story_box .story {
		width: 53%;
		color: #e6e6e6;
		margin-left: 4%;
		margin-right: auto;
		font-size: 13px;
	}
	.sec_storyzero .story_box .story .title {
		font-size: 26px;
		text-align: left;
		padding-top: 10px;
		margin-bottom: 20px;
	}
	.sec_storyzero .story_box .story .detail {
		margin-bottom: 0px;
		line-height: 1.6em;
	}
	.sec_storyzero .story_box .story .left {
		padding-top: 10px;
		padding-bottom: 10px;
		margin-bottom: 0px;
	}

	.sec_char .char_wrap {
		background: none;
		background-size: 100% auto;
		background-attachment: initial;
		padding-top: 0;
		padding-bottom: 0;
	}
	.sec_char .char_wrap .inner {
		padding-top: 0;
		padding-bottom: 0;
	}
	.sec_char .char_wrap .flexb {
		display: block;
	}
	.sec_char .char_wrap .flexb .w50 {
		width: 100%;
		padding-left: 4%;
		padding-right: 4%;
	}
	.sec_char .char_wrap .flexb .w50.char01 {
		background: url(../img/bg_char_sp01.jpg) top left no-repeat;
		background-size: cover;
		background-attachment: initial;
		padding-bottom: 40px;
	}
	.sec_char .char_wrap .flexb .w50.char01 img {
		width: 80%;
		padding-top: 40px;
		margin-bottom: 0;
	}
	.sec_char .char_wrap .flexb .w50.char02 {
		background: url(../img/bg_char_sp02.jpg) top left no-repeat;
		background-size: cover;
		background-attachment: initial;
		padding-bottom: 40px;
	}
	.sec_char .char_wrap .flexb .w50.char02 img {
		width: 80%;
		padding-top: 40px;
		margin-bottom: 0;
	}

	.sec_novel .spmb {
		margin-bottom: 20px;
		width: 80%;
		padding-left: 4%;
		padding-right: 4%;
	}

	.sec_novel {
		background: url(../img/bg_novel_sp.jpg) top left no-repeat;
		background-size: cover;
		background-attachment: initial;
	}
	.sec_novel .bg06 {
		background: none;
	}
	.sec_novel .novel_wrap {
		margin-top: -110px;
	}
	.sec_novel .novel_wrap .inner {
		padding-left: 4%;
		padding-right: 4%;
	}
	.sec_novel .novel_wrap .flexb {
		display: block;
	}
	.sec_novel .novel_wrap .flexb .w50 {
		width: 100%;
	}
	.sec_comicarize h2 {
		padding-left: 4%;
	}
	.sec_comicarize .inner {
		padding-left: 4%;
		padding-right: 4%;
	}
	.sec_linestamp .inner02 {
		padding-left: 4%;
		padding-right: 4%;
	}
}