@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
#main .mainImg {
	position: relative;
}
#main .mainImg img {
	width: 100%;
}
#main .comSec01 {
	padding-top: 1.257rem;
	/* background: linear-gradient(183deg, rgba(230,221,255,0.8) 1.39%, rgba(255,216,253,0.8) 99.35%); */
	/* background: url(../img/index/img_bg_pattern_01.png); */
	/* background: url(../img/index/img_bg_pattern_01.png); */

	position: relative;
	background:repeating-linear-gradient(
		135deg,
		#fffee3,
		#fffee3 10px,
		#fff 0,
		#fff 20px
	);
}
#main .comSec01 .character {
	padding: 1.214286rem 0.285714rem 0;
}
#main .comPhoto .headLine01 {
	position: absolute;
	top: 1.371429rem;
	left: 0;
	width: 100%;
	text-align: center;
	color: var(--color_06);
}
#main .comPhoto .subSpan {
	top: 4.171429rem;
	right: 1.08571rem;
	width: 6.071429rem;
}
#main.page4 .comPhoto .subSpan {
	top: 4.171429rem;
	right: 1.08571rem;
	width: 5.8rem;
	height: auto;
}
#main .comSec01 .comPhoto {
	box-shadow: 0 0 2.857143rem 0 rgba(156, 93, 219, 0.35); 
}
#main.page2 .comSec01 .comPhoto {
	/* box-shadow: 0 0 2.857143rem 0 #BB87A6;  */
	box-shadow: 0 0 1.2rem 0 rgba(255, 105, 195, 0.35); 
}
#main.page3 .comSec01 .comPhoto {
	/* box-shadow: 0 0 2.857143rem 0 #BB87A6;  */
	box-shadow: 0 0 1.2rem 0 rgba(119, 181, 232, 0.35); 
}
#main.page4 .comSec01 .comPhoto {
	/* box-shadow: 0 0 2.857143rem 0 #BB87A6;  */
	box-shadow: 0 0 1.2rem 0 rgba(137, 102, 89, 0.35); 
}
#main .comSec01 .subUl {
	margin: -0.142857rem 0 0.357143rem;
	display: flex;
	justify-content: center;
}
#main .comSec01 .subUl li {
	width: 6.5rem;
}
#main .comSec01 .subUl li img {
	transition: all ease 0.5s;
}
#main .comPhoto .name {
	margin-right: -1rem;
	margin-left: -1rem;
}
#main .comPhoto .name img {
	width: 12.285714rem;
}
#main .info {
	padding: 2.642857rem 1.071429rem 3rem;
	background: url(../img/common/bg02.png) repeat left top;
	background-size: 26.785714rem auto;
}
#main.page2 .info {
	/* padding: 2.642857rem 1.071429rem 3rem; */
	background: url(../img/shigodeki_02/pattern_02.png) repeat left top;
	/* background-size: 26.785714rem auto; */
}
#main.page3 .info {
	background: url(../img/shigodeki_03/pattern_03.png) repeat left top;
}
#main.page4 .info {
	background: url(../img/shigodeki_04/pattern.png) repeat left top;
}
#main .info .headLine01 {
	margin-bottom: 1.571429rem;
}
#main .infoBox {
	margin: 0 0.142857rem 2.357143rem 0;
	/* padding: 2.142857rem; */
	padding: 24px 16px;
	background-color: var(--color_06);
	/* border-radius: 1.428571rem;  */
	/* box-shadow: 0 0 1.428571rem 0 rgba(156, 93, 219, 0.35);  */
}
#main.page2 .infoBox {
	margin: 0 0.142857rem 2.357143rem 0;
	padding: 2.142857rem;
	background-color: var(--color_06);
	border-radius: 1.428571rem; 
	/* box-shadow: 0 0 1.428571rem 0 rgba(255, 105, 195, 0.35); */
}
#main.page3 .infoBox {
	margin: 0 0.142857rem 2.357143rem 0;
	padding: 2.142857rem;
	background-color: var(--color_06);
	border-radius: 1.428571rem; 
	/* box-shadow: 0px 4px 25px 8px rgba(119, 181, 232, 0.31); */
}
#main.page4 .infoBox {
	margin: 0 0.142857rem 2.357143rem 0;
	padding: 2.142857rem;
	background-color: var(--color_06);
	border-radius: 1.428571rem; 
	/* box-shadow: 0px 4px 25px 8px rgba(255, 170, 72, 0.35); */
}
#main .info p {
	letter-spacing: 0;
	padding-bottom: 50px;
}
#main .infoBox .photo {
	margin-bottom: 1.071429rem;
}
#main .infoBox .photo img {
	width: 100%;
}
#main .infoBox figure {
	margin: 0;
}
#main .infoBox .list {
	margin-bottom: 1.071429rem;
	display: flex;
	justify-content: space-between;
}
#main .infoBox .list li {
	width: 50%;
	padding: 0.571429rem 0 1.071429rem;
	font-size: 0.857143rem;
	text-align: center;
	letter-spacing: 0;
	font-weight: 700;
	box-sizing: border-box;
	background: linear-gradient(102deg, #E384B3 0.1%, #A27CC8 78.58%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; 
}
#main.page2 .infoBox .list li {
	width: 50%;
	padding: 0.571429rem 0 1.071429rem;
	font-size: 0.857143rem;
	text-align: center;
	letter-spacing: 0;
	font-weight: 700;
	box-sizing: border-box;
	background: linear-gradient(102deg, #FFBD5A 23%, #FF8383 50.21%, #FF41B3 150%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; 
}
#main.page3 .infoBox .list li {
	width: 50%;
	padding: 0.571429rem 0 1.071429rem;
	font-size: 0.857143rem;
	text-align: center;
	letter-spacing: 0;
	font-weight: 700;
	box-sizing: border-box;
	background: linear-gradient(102deg, #80E2F7 23%, #6DBBFA 40.33%, #5991FE 79.22%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; 
}
#main.page4 .infoBox .list li {
	width: 100%;
	padding: 0.571429rem 0 1.071429rem;
	font-size: 0.857143rem;
	text-align: center;
	letter-spacing: 0;
	font-weight: 700;
	box-sizing: border-box;
	background: linear-gradient(102deg, #FFE665 23%, #FF4004 79.22%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; 
}
#main .infoBox .list li:not(:last-child) {
	border-right: 0.071429rem solid #C5B5D6;
}
#main.page2 .infoBox .list li:not(:last-child) {
	border-right: 0.071429rem solid #ffb4e1;
}
#main.page3 .infoBox .list li:not(:last-child) {
	border-right: 0.071429rem solid #52AEF9;
}
#main.page4 .infoBox .list li:not(:last-child) {
	border-right: 0.071429rem solid #FFAA48;
}
#main .infoBox .list li span {
	word-break: break-all;
	margin-top: 0.142857rem;
	background: linear-gradient(108deg, #E384B3 40.53%, #A27CC8 108.98%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; 
	font-size: 1.39rem;
	letter-spacing: 0.078571rem;
	line-height: 1;
	display: block;
}
#main.page2 .infoBox .list li span {
	word-break: break-all;
	margin-top: 0.142857rem;
	background: linear-gradient(108deg, #FFBD5A 38%, #FF8383 44.56%, #FF41B3 150%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; 
	font-size: 1.39rem;
	letter-spacing: 0.078571rem;
	line-height: 1;
	display: block;
}
#main.page3 .infoBox .list li span {
	word-break: break-all;
	margin-top: 0.142857rem;
	background: linear-gradient(108deg, #80E2F7 15.33%, #6DBBFA 39.56%, #5991FE 98.22%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; 
	font-size: 1.39rem;
	letter-spacing: 0.078571rem;
	line-height: 1;
	display: block;
}
#main.page4 .infoBox .list li span {
	word-break: break-all;
	margin-top: 0.142857rem;
	background: linear-gradient(108deg, #FFE665 15.33%, #FF4004 98.22%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; 
	font-size: 1.39rem;
	letter-spacing: 0.078571rem;
	line-height: 1;
	display: block;
}
#main .infoBox .list li:first-child {
	padding-right: 1.428571rem;
}
#main .infoBox .list li:last-child {
	padding-left: 1.428571rem;
}
#main .infoBox dl {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	letter-spacing: 0;
}
#main .infoBox dt {
	padding-right: 1.071429rem;
	width: 45%;
	box-sizing: border-box;
	text-align: right;
	font-weight: 700;
	color: var(--color_01);
}
#main.page2 .infoBox dt {
	padding-right: 1.071429rem;
	width: 45%;
	box-sizing: border-box;
	text-align: right;
	font-weight: 700;
	color: var(--color_07);
}
#main.page3 .infoBox dt {
	padding-right: 1.071429rem;
	width: 45%;
	box-sizing: border-box;
	text-align: right;
	font-weight: 700;
	color: var(--color_14);
}
#main.page4 .infoBox dt {
	padding-right: 1.071429rem;
	width: 45%;
	box-sizing: border-box;
	text-align: right;
	font-weight: 700;
	color: var(--color_16);
}
#main .infoBox dd {
	width: 55%;
}
#main .info .headLine02 {
	margin-bottom: 0.214286rem;
}
#main .info iframe {
	vertical-align: top;
    max-width: 100%;
	padding-top: 35px;
}
#main .info .textList {
	margin-bottom: 1.714286rem;
	letter-spacing: 0;
	line-height: 2;
	counter-reset: num;
}
#main .info .textList li {
	position: relative;
	counter-increment: num;
}
#main .info .textList li::before {
	margin-right: 0.142857rem;
	content: counter(num)".";
}
#main .info .textList li span {
	margin-left: 0.428571rem;
	display: inline-block;
	vertical-align: 0.071429rem;
}
#main .info .textList li a {
	display: inline-block;
	text-align: center;
	width: 4.5rem;
	height: 1.571429rem;
	border-radius: 2.142857rem; 
	font-size: 0.714286rem; 
	font-weight: 700; 
	padding-top: 0.07rem;
	box-sizing: border-box;
	color: var(--color_06);
	background: linear-gradient(106deg, #E384B3 8.02%, #8C6BAD 94.78%); 
}
/* 特典音声の視聴ボタン */
/* 唯兎 */
#main .bonus .textList li a {
	display: inline-block;
	text-align: center;
	width: 4.5rem;
	height: 1.481429rem;
	border-radius: 2.142857rem; 
	font-size: 0.714286rem; 
	font-weight: 700; 
	padding-top: 0.07rem;
	box-sizing: border-box;
	color: var(--color_06);
	background: linear-gradient(106deg, #E384B3 8.02%, #8C6BAD 94.78%); 
	vertical-align: text-bottom;
    margin-left: 0.3rem;
}
/* 環 */
#main.page2 .bonus .textList li a {
	display: inline-block;
	text-align: center;
	width: 4.5rem;
	height: 1.481429rem;
	border-radius: 2.142857rem; 
	font-size: 0.714286rem; 
	font-weight: 700; 
	padding-top: 0.07rem;
	box-sizing: border-box;
	color: var(--color_06);
	background: linear-gradient(106deg, #FFB35A 8.02%, #FF41B3 94.78%); 
	vertical-align: text-bottom;
    margin-left: 0.3rem;
}
/* 健介 */
#main.page3 .bonus .textList li a {
	display: inline-block;
	text-align: center;
	width: 4.5rem;
	height: 1.481429rem;
	border-radius: 2.142857rem; 
	font-size: 0.714286rem; 
	font-weight: 700; 
	padding-top: 0.07rem;
	box-sizing: border-box;
	color: var(--color_06);
	background: linear-gradient(106deg, #80E2F7 8.02%, #5991FE 94.78%); 
	vertical-align: text-bottom;
    margin-left: 0.3rem;
}

/* 2巻 12/5MTG */
#main.page2 .info .textList li a {
	background: linear-gradient(106deg, #FFB35A 8.02%, #FF41B3 94.78%); 
}
/* 3巻 */
#main.page3 .info .textList li a {
	background: linear-gradient(106deg, #80E2F7 8.02%, #5991FE 94.78%); 
}
#main .info .textList li a .ico {
	font-size: 0.514286rem;
	margin-left: 0;
}
#main .bonus {
	padding: 2.714286rem 1.142857rem 2.642857rem;
	background: linear-gradient(185deg, #E6DDFF 1.42%, #FFD8FD 98.99%); 
}
#main.page2 .bonus {
	padding: 2.714286rem 1.142857rem 2.642857rem;
	background: linear-gradient(185deg, #FFE2F3 1.42%, #FFDED3 98.99%); 
}
#main.page3 .bonus {
	padding: 2.714286rem 1.142857rem 2.642857rem;
	background: linear-gradient(185deg, #C9E2FF 1.42%, #FAF4DF 98.99%); 
}
#main.page4 .bonus {
	padding: 2.714286rem 1.142857rem 2.642857rem;
	background: linear-gradient(185deg, #FFE1BF 1.42%, #FFEEC2 98.99%); 
}
#main .bonus p {
	margin-bottom: 1.142857rem;
	letter-spacing: 0;
}
#main .bonus .inner {
	/* margin: 3rem 0 0; */
	margin: 1.5rem 0 0;
}
#main .bonus .inner a {
	/* padding: 0.714286rem; */
	box-sizing: border-box;
	min-height: 7.642857rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	/* background-color: #D9D9D9; */
}
#main .bonus .inner p {
	color: #000;
	font-size: 1.142857rem;
	font-weight: 700;
	line-height: 1.5;
}
#main .bonus p:last-child {
	margin-bottom: 0;
}
#main .bonus .inner p span {
	display: block;
	font-size: 1rem;
	color: #8B8B8B;
}
#main .bonus h3 {
	margin-bottom: 0.571429rem;
	padding: 0.172857rem 0.571429rem 0.185714rem;
	border-radius: 0.285714rem; 
	background-color: rgba(255, 255, 255, 0.7);
}
#main .bonus h3 span {
	display: block;
	font-size: 1.142857rem; 
	font-weight: 700; 
	letter-spacing: 0.057143rem; 
	background: linear-gradient(95deg, #E384B3 -7.75%, #8C6BAD 91.63%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; 
}
#main.page2 .bonus h3 span {
	display: block;
	font-size: 1.142857rem; 
	font-weight: 700; 
	letter-spacing: 0.057143rem; 
	background: linear-gradient(95deg, #FFBD5A -7%, #FF41B3 50%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; 
}
#main.page3 .bonus h3 span {
	display: block;
	font-size: 1.142857rem; 
	font-weight: 700; 
	letter-spacing: 0.057143rem; 
	background: linear-gradient(95deg, #80E2F7 -7.333%, #5991FE 49.456%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; 
}
#main.page4 .bonus h3 span {
	display: block;
	font-size: 1.142857rem; 
	font-weight: 700; 
	letter-spacing: 0.057143rem; 
	background: linear-gradient(95deg, #FFE665 -7.333%, #FF4004 49.456%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; 
}
#main .bonus .h3Ttl span {
	background: linear-gradient(98deg, #E384B3 5.66%, #8C6BAD 56.69%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; 
}
#main .comLink {
	width: auto;
	margin-top: 20px;
}
#main .comLink a {
	padding: 0.357rem 1.714286rem;
	/* background-image: url(../img/common/icon02.png);
	background-position: right 1.642857rem center;
	background-size: 0.5rem auto; */
}
#main.page2 .bonus .sub {
	padding-bottom: 2.142857rem;
	margin-bottom: 2.142857rem;
	border-bottom: 0.071429rem dashed var(--color_08);
}
#main .bonus .sub {
	padding-bottom: 2.142857rem;
	margin-bottom: 2.142857rem;
	border-bottom: 0.071429rem dashed var(--color_01);
}
#main.page3 .bonus .sub {
	padding-bottom: 2.142857rem;
	margin-bottom: 2.142857rem;
	border-bottom: 0.071429rem dashed var(--color_15);
}
#main.page4 .bonus .sub {
	padding-bottom: 2.142857rem;
	margin-bottom: 2.142857rem;
	border-bottom: 0.071429rem dashed var(--color_17);
}
#main .bonus .sub:last-child {
	border: none;
	margin-bottom: 0;
	padding-bottom: 0;
}
#main .bonus .txt {
	/* padding-top: 2rem; */
	/* padding-top: 1rem; */
	text-align: center;
}
#main .bonus .txt a {
	font-weight: 700; 
	text-decoration: underline;
	color: var(--color_01);
}
#main.page2 .bonus .txt a {
	font-weight: 700; 
	text-decoration: underline;
	color: var(--color_07);
}
#main.page3 .bonus .txt a {
	font-weight: 700; 
	text-decoration: underline;
	color: var(--color_14);
}
#main.page4 .bonus .txt a {
	font-weight: 700; 
	text-decoration: underline;
	color: var(--color_16);
}
#main .special {
	padding: 2.714286rem 1.071429rem 2.857143rem;
	background: linear-gradient(183deg, #E6DDFF 1.39%, #FFD8FD 99.35%); 
}
#main.page2 .special {
	padding: 2.714286rem 1.071429rem 2.857143rem;
	background: linear-gradient(183deg, #FFE2F3 1.39%, #FFDED3 99.35%); 
}
#main.page3 .special {
	padding: 2.714286rem 1.071429rem 2.857143rem;
	background: linear-gradient(183deg, #C9E2FF 1.39%, #FAF4DF 99.35%); 
}
#main.page4 .special {
	padding: 2.714286rem 1.071429rem 2.857143rem;
	background: linear-gradient(183deg, #FFE1BF 1.39%, #FFEEC2 99.35%); 
}
#main .special .headLine01 {
	margin-bottom: 2rem;
}
#main .special .sub:not(:last-child) {
	padding-bottom: 1.642857rem;
	margin-bottom: 1.642857rem;
	border-bottom: 0.071429rem dashed var(--color_01);
}
#main.page2 .special .sub:not(:last-child) {
	padding-bottom: 1.642857rem;
	margin-bottom: 1.642857rem;
	border-bottom: 0.071429rem dashed var(--color_08);
}
#main.page3 .special .sub:not(:last-child) {
	padding-bottom: 1.642857rem;
	margin-bottom: 1.642857rem;
	border-bottom: 0.071429rem dashed var(--color_15);
}
#main .special p {
	letter-spacing: 0;
}
#main .special .ttl {
	cursor: pointer;
	border-radius: 2.857143rem; 
	min-height: 3.428571rem;
	font-weight: 700;
	/* padding: 0.357143rem 2.642857rem 0.357143rem 1.642857rem; */
	padding: 0.357143rem 1.642857rem;
	display: flex;
	align-items: center;
	/* color: var(--color_06); */
	/* background: url(../img/common/icon03.png) no-repeat right 1.428571rem center var(--color_01); */
	box-sizing: border-box;
	background-size: 0.928571rem auto;
	/* border: 0.071429rem solid var(--color_01); */
	margin: 15px 0;
	background: #0C87E1;
	justify-content: space-between;
	transition: all ease 0.5s;
}
#main .toggle {
	width: 24px;
	height: auto;
}
#main .special .ttl.on .toggle {
	transform: rotate(180deg);
}

#main.page2 .special .ttl {
	cursor: pointer;
	border-radius: 2.857143rem; 
	min-height: 3.428571rem;
	font-weight: 700;
	padding: 0.357143rem 2.642857rem 0.357143rem 1.642857rem;
	display: flex;
	align-items: center;
	color: var(--color_06);
	background: url(../img/common/icon03.png) no-repeat right 1.428571rem center var(--color_08);
	box-sizing: border-box;
	background-size: 0.928571rem auto;
	border: 0.071429rem solid var(--color_08);
}
#main.page3 .special .ttl {
	cursor: pointer;
	border-radius: 2.857143rem; 
	min-height: 3.428571rem;
	font-weight: 700;
	padding: 0.357143rem 2.642857rem 0.357143rem 1.642857rem;
	display: flex;
	align-items: center;
	color: var(--color_06);
	background: url(../img/common/icon03.png) no-repeat right 1.428571rem center var(--color_15);
	box-sizing: border-box;
	background-size: 0.928571rem auto;
	border: 0.071429rem solid var(--color_15);
}
#main .special .ttl.on {
	/* color: var(--color_01); */
	/* background-image: url(../img/common/icon04.png); */
	/* background-color: var(--color_06); */
	background: #0C87E1;
}
#main.page2 .special .ttl.on {
	color: var(--color_08);
	background-image: url(../img/shigodeki_02/arrow.png);
	background-color: var(--color_06);
}
#main.page3 .special .ttl.on {
	color: var(--color_14);
	background-image: url(../img/shigodeki_03/arrow_03.png);
	background-color: var(--color_06);
}
#main .special .txt {
	margin: 1.371429rem;
	text-align: center;
	font-size: 0.857143rem;
	font-weight: 700;
	color: var(--color_01);
}
#main.page2 .special .txt {
	margin-bottom: 1.071429rem;
	text-align: center;
	font-size: 0.857143rem;
	font-weight: 700;
	color: var(--color_07);
}
#main.page3 .special .txt {
	margin-bottom: 1.071429rem;
	text-align: center;
	font-size: 0.857143rem;
	font-weight: 700;
	color: var(--color_14);
}
#main .special .txt .subSpan {
	padding: 0 0.714286rem;
	display: inline-block;
	background: url(../img/shigodeki_01/line02.png) no-repeat left bottom,url(../img/shigodeki_01/line03.png) no-repeat right bottom;
	background-size: 0.5rem auto;
}
#main.page2 .special .txt .subSpan {
	padding: 0 0.714286rem;
	display: inline-block;
	background: url(../img/shigodeki_02/Line\ 13.png) no-repeat left bottom,url(../img/shigodeki_02/Line\ 14.png) no-repeat right bottom;
	background-size: 0.5rem auto;
}
#main.page3 .special .txt .subSpan {
	padding: 0 0.714286rem;
	display: inline-block;
	background: url(../img/shigodeki_03/Line1.png) no-repeat left bottom,url(../img/shigodeki_03/Line2.png) no-repeat right bottom;
	background-size: 0.5rem auto;
}
#main .special .txt .subSpan span {
	display: inline-block;
	background: url(../img/shigodeki_01/line01.png) repeat-x left bottom;
	background-size: auto 0.571429rem;
}
#main .special .jsBox {
	display: none;
	margin-top: 1.142857rem;
}
.fiexdLink {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 100;
	width: 10.714286rem;
}
.fiexdLink a {
	display: block;
}
.fiexdLink img {
	transition: all ease 0.5s;
	width: 100%;
}

@media all and (min-width: 897px) {
	#main .bonus .txt a:hover,
	.fiexdLink a:hover img,
	#main .bonus .inner a:hover,
	#main .info .textList li a:hover,
	#main .comSec01 .subUl a:hover img {
		opacity: 0.6;
	}
	.fiexdLink {
		left: calc(50% + 150px);
		right: auto;
		width: 140px;
	}
}

@media all and (max-width: 374px) {
	#main .comPhoto .subSpan {
		width: 4.4rem;
	}
	#main .infoBox .list li span {
		font-size: 1.271rem;
	}
	#main .special .ttl {
		font-size: 12px;
	}
	#main .infoBox .list li span {
		font-size: 1.2rem;
	}
}


#main .bottomBorder {
    padding-bottom: 1.642857rem;
    margin-bottom: 1.642857rem;
    border-bottom: 0.071429rem solid #0C87E1;
}


/* product */
.navImageUl {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.navImageLi {
	width: calc(50% - 0.5rem);
	background-color: #fff;
	display: flex;
	/* flex: 1; */
	line-height: 1.2;
}

.navImageLi a {
	padding: 0.5rem;
	box-sizing: border-box;
	display: block;
	text-align: center;
	font-weight: 700;

	display: flex;
	flex-direction: column;
	flex: 1;
	font-size: 1em;
	justify-content: space-between;
}
.navImageLi a .vector {
	margin: 0.5rem auto 0;
	width: 16px;
	display: flex;
}

.character_wrapper {
    position: relative;
    background: #EFFCFF;
    /* padding: 2.642857rem 0 1.053rem; */
    padding: 2.642857rem 0 2.642857rem;

}
.character_wrapper_tab {
	display: flex;
	justify-content: space-between;
	gap: 12px;
    padding: 0 1.071429rem;
}
.character_wrapper_tab_btn {
	cursor: pointer;
	transition: 0.5s;
}
.character_wrapper_tab_btn:hover {
	opacity: 0.7;
}
.character_contants_wrapper {
    padding: 0 3rem;
}
.character_heading {
	text-align: center;
	color: #0C87E1;
	font-weight: bold;
	font-size: 0.857rem;
	margin-top: 20px;
}
.character_cv {
	text-align: center;
	font-weight: bold;
	font-size: 1rem;
	margin-bottom: 20px;
}
.character_banner_wrapper {
	margin-top: 20px;
    padding: 0 1.071429rem;
}
.thumb_chara {
	display: none;
}
.thumb_chara.active {
	display: block;
}
#canvas-container {
	position: fixed;
	bottom: 0;
	display: none;
	width: 100%;
}
@media all and (min-width: 897px) {
	#canvas-container {
		display: block;
	}
}

.background {
	background-image:
	linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%),
	url('../img/jujin/bg_note.svg');

background-size:
	auto,
	20px 20px;
background-repeat:
	no-repeat,
	repeat;
background-position:
	top left,
	top left;
min-height: 100vh;
}