@charset "utf-8";

.mangaartist {
	width: 100%;
	position: relative;
	overflow: hidden;
}

.mangaartist .box {
	width: min(100%, 1240px);
	margin: 0 auto;
	padding: 40px 20px;
}

.mangaartist .box h2 {
	display: block;
	font-size: var(--font-xxl);
	line-height: 175%;
	margin: 0 auto 50px auto;
	text-align: center;
	font-weight: bold;
	color: #171d5a;
	padding: 0.4em 0 0.3em;
	border-top: solid 1px#CCCCCC;
	border-bottom: solid 1px #CCCCCC;
}

@media screen and (max-width: 768px) {
	.mangaartist .box h2 {
		margin: 0 auto 25px auto;
	}
}

/*最上部コメント*/
.mangaartist .read {
	max-width: 1000px;
	margin: 25px auto 50px auto;
}

@media screen and (max-width: 768px) {
	.mangaartist .read {
		margin-top: 10px;
	}
}

/*
@media screen and (max-width: 768px) {
	.mangaartist .read  h2 {
		margin-top: 10px;
	}
}
*/

.mangaartist .read .wrap {
	display: flex;
	align-items: center;
}

@media screen and (max-width: 768px) {
	.mangaartist .read .wrap {
		flex-flow: column;
	}
}

.mangaartist .read .txtarea {
	flex: 1;
	padding-right: 40px;
}

@media screen and (max-width: 768px) {
	.mangaartist .read .txtarea {
		padding-right: 0;
	}
}

.mangaartist .read .frame {
	background-color: #0bb1ef;
	width: fit-content;
	padding: 0.3em 0.8em;
	margin: 0 auto 1em auto;
	font-size: var(--font-xl);
	font-weight: bold;
	color: #FFFFFF;
}

.mangaartist .read h2 {
	font-size: calc(var(--font-xxxl)*1);
	line-height: 1.4;
	width: fit-content;
	margin: 0 auto 1em auto;
	border: none;
	padding: 0;
}

.mangaartist span.blue {
	color: #0bb1ef;
}

.mangaartist span.red {
	color: #ee0000;
}

.mangaartist .read .txtarea p {
	font-size: var(--font-l);
}

.mangaartist .btn a {
	display: block;
	width: fit-content;
	margin: 1.5em auto 0 auto;
	padding: 1em 2em;
	text-decoration: none;
	font-size: var(--font-l);
	font-weight: bold;
	color: #000000;
	border: 3px solid #000000;
	background-color: #FFFFFF;
	border-radius: 999px;
	box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.3);
	transition: all .2s ease;
}

.mangaartist .btn.mail {
	margin-bottom: 2em;
}

.mangaartist .btn a:hover {
	color: #FFFFFF;
	background-color: #0099ff;
	transform: scale(1.05);
}

.mangaartist .read img {
	width: 45%;
	object-fit: contain;
	height: auto;
	margin: 0 auto;
}

@media screen and (max-width: 768px) {
	.mangaartist .read img {
		width: 95%;
		max-width: 400px;
		margin-top: 40px;
	}
}

/*ポイント*/
.mangaartist .point {
	max-width: 1000px;
	margin: 100px auto 0 auto;
}

@media screen and (max-width: 768px) {
	.mangaartist .point {
		margin: 25px auto 50px auto;
	}
}

.mangaartist .point .item {
	display: flex;
	align-items: center;
	margin: 50px auto 100px auto;
}

@media screen and (max-width: 768px) {
	.mangaartist .point .item {
		margin: 20px auto 40px auto;
		flex-flow: column;
	}
}

.mangaartist .point .txtarea {
	flex: 1;
}

.mangaartist .point .item:nth-of-type(2n-1) .txtarea {
	padding-left: 40px;
}

.mangaartist .point .item:nth-of-type(2n) .txtarea {
	padding-right: 40px;
}

@media screen and (max-width: 768px) {
	.mangaartist .point .item:nth-of-type(2n-1) .txtarea {
		padding-left: 0;
	}

	.mangaartist .point .item:nth-of-type(2n) .txtarea {
		padding-right: 0;
	}
}

.mangaartist .point .txtarea .num {
	color: #0bb1ef;
	font-size: var(--font-u);
	font-weight: bold;
	margin-bottom: 0.25em;
	margin-right: 0.25em;
}

@media screen and (max-width: 768px) {
	.mangaartist .point .txtarea .num {
		font-size: var(--font-xu);
		display: inline-block;
	}
}

.mangaartist .point .txtarea h3 {
	color: #0bb1ef;
	font-size: calc(var(--font-xxl));
	margin-bottom: 1em;
	line-height: 1.2;
}

@media screen and (max-width: 768px) {
	.mangaartist .point .txtarea h3 {
		display: inline-block;
		font-size: calc(var(--font-u)*1);
	}
}

.mangaartist .point .txtarea p {
	font-size: var(--font-m);
}

@media screen and (max-width: 768px) {
	.mangaartist .point .txtarea p {
		font-size: var(--font-l);
	}
}

/*ポイントの中のエントリー*/
.mangaartist .entry {
	margin: 0 auto 100px auto;
	padding: 50px 50px;
	background: #e3f7ff;
	background: #fff9ed;
	border-radius: 10px;
}

.mangaartist .entry .txtarea {
	width: fit-content;
	margin: 0 auto;
}

.mangaartist .entry .txtarea h3 {
	color: #222222;
	font-size: calc(var(--font-xxl));
	line-height: 1.2;
	width: fit-content;
	margin: 0 auto;
}

.mangaartist .entry .txtarea .precautions p {
	margin-top: 2em;
	color: #DD0000;
}

.mangaartist .point .txtarea ul {
	padding-left: 1em;
	margin-left: 1em;
}

.mangaartist .point .txtarea ul li {
	width: 100%;
	font-size: var(--font-m);
	margin-bottom: 1em;
	padding-left: 0px;
	list-style: disc;
}

@media screen and (max-width: 768px) {
	.mangaartist .point .txtarea ul li {
		font-size: var(--font-l);
	}
}

.mangaartist .point .txtarea ul li::marker {
	color: #0bb1ef;
}

.mangaartist .point .item img {
	width: 52%;
	margin: 0 auto;
	border-radius: 10px;
	box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.15);
	object-fit: contain;
	height: auto;
}

@media screen and (max-width: 768px) {
	.mangaartist .point .item img {
		width: 95%;
		max-width: 400px;
		margin-top: 10px;
	}
}

.mangaartist .point .item:nth-of-type(2n) img {
	order: 1;
}

@media screen and (max-width: 768px) {
	.mangaartist .point .item img {
		order: 1;
	}
}

/*インフォメーション*/
.mangaartist .info {
	max-width: 1000px;
	margin: 0 auto 50px auto;
}

@media screen and (max-width: 768px) {
	.mangaartist .info {
		margin: 25px auto 25px auto;
	}
}

.mangaartist .info p {
	font-size: var(--font-l);
	text-align: center;
}

.mangaartist .info a {
	color: #000;
	text-align: center;
}

.mangaartist .info a:hover {
	color: #0099ff;
	text-align: center;
}

/*アロー付きのリンク*/
.mangaartist .arrowlink {
	margin: 20px 0 0 0;
}

.mangaartist .arrowlink a {
	position: relative;
	display: inline-block;
	text-decoration: none;
	font-size: var(--font-l);
	color: #000000;
	font-weight: bold;
	text-align: center;
	padding-right: 0;
	transition: all .2s ease;
}

.mangaartist .arrowlink a::after {
	content: '';
	width: 9px;
	height: 9px;
	border: 0;
	border-top: solid 3px #000;
	border-right: solid 3px #000;
	position: absolute;
	top: 50%;
	right: 0;
	margin-top: -8px;
	margin-right: -12px;
	transform: rotate(45deg);
}

.mangaartist .arrowlink a:hover {
	color: #0099ff;
	transform: scale(1.1);
}

.mangaartist .arrowlink a:hover::after {
	border-color: #0099ff;
}

@media screen and (max-width: 768px) {
	.mangaartist .arrowlink a:after {
		content: '';
		width: 6px;
		height: 6px;
		border: 0;
		border-top: solid 2px #333;
		border-right: solid 2px #333;
		position: absolute;
		top: 50%;
		right: 0;
		margin-top: -3px;
		margin-right: -8px;
		transform: rotate(45deg);
	}
}