@charset "UTF-8";

article * {
  box-sizing: border-box;
}
article img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;/* 画像下のスペースを消す */
}
article.plus-sized {
    background: #fffee5;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}
/**
 * ***************************************
 * 文字色
 * ***************************************
 */
.txt-yellow { olor: #fff478; }


/**
 * ***************************************
 * トップバナー
 * ***************************************
 */
.topbanner { margin-bottom: 2rem; }
.camPeriod { width: 90%; margin: 1rem auto 0; text-align: center; color: #000; font-size: 1rem; font-weight: bold; line-height: 1.2; }
.camPeriod span {font-size: .8rem;}
.mainText { width: 90%; margin: 0 auto 2rem; color: #ef6392; font-size: 1.7rem; font-weight: bold; text-align: center; line-height: 1.2; }
/**
 * ***************************************
 * タイトル詳細
 * ***************************************
 */
.detail * {	box-sizing: border-box; }
.detail { margin: 0 1rem 2rem 1rem; padding: 1rem; border-radius: 1rem; background: #fff; }
.mangaDetail img { width: 100%; height: auto;
  vertical-align: bottom;/* 画像下のスペースを消す */ }
.mangaDetail { width: 45%; margin: 0px auto; margin-bottom: 1rem; }
.cover {}
.title { text-align: center; margin-bottom: 1rem; }
.title h2 { font-size: 1.8rem; line-height: 2.3rem; }
.title h3 { margin-top: 0.5rem; font-size: 1.2rem; line-height: 1.7rem; font-weight: normal; }
.title h2 a,
.title h3 a {text-decoration: underline;}
@media (min-width: 768px) {
	.title h2 { font-size: 2rem; line-height: 2.5rem; }
	.title h3 { font-size: 1.5rem; line-height: 2rem; }
}
.btnBox a {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  width: 60%;
  height: 3em;
  margin: 10px auto;
  border-radius: 1.5em;
  font-size: 1.1em;
  font-weight: bold;
  line-height: 3em;
  text-align: center;
}
.btnBox .btnWhite { background: #fff; border: 1px solid #c7c7c7; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16); }
.saleBox { text-align: center; margin-bottom: 0.5rem; }
.saleBox span:first-child { margin-right: 0.5rem; }
.saleBox span { display: inline-block; padding: 0.15rem 0.2rem;  border: 1px solid #ef3232; background: #ef3232; color: #fff; border-radius: 2px;}
@media (min-width: 480px) {
	.detail { display: flex; margin: 0 3rem 2rem 3rem; }
	.mangaDetail { width: 40%; margin-right: 1.5rem; margin-bottom: 0; }
	.mangaInfo { flex: 1; }
	.title { text-align: left; }
	.btnBox a { width: 100%; margin: 10px 2rem 10px 0px; }
    .saleBox { text-align: left; }
}

/**
 * ***************************************
 * キャラクター紹介
 * ***************************************
 */
.character {
	background: #FFFFFF;
	background: url(../images/chara-bg.png);
	
	padding: 2rem 0;
}
.chara-txt {
	text-align: center;
	padding: 0 4%;
	margin-bottom: 1rem;
}
.chara-img {
	text-align: center;
	padding: 0 4%;
	margin-bottom: 1rem;
}
.chara-img:last-child {
	margin-bottom: 0;
}

/**
 * ***************************************
 * ストーリー
 * ***************************************
 */
.story {
	background: #fff;
	padding: 2rem 0 1rem 0;
	margin-bottom: 2rem;
}
.story-bg {
	background: #fff;
	background-image: url(../images/story-bg.png);
	background-repeat: no-repeat;
	background-position: bottom 100px right 0px;
	background-size: 100%;
	padding: 2rem 0 2rem 0;
	margin-bottom: 0;
}
.story-txt {
	padding: 0 4%;
	text-align: center;
	margin-bottom: 2rem;
}
.story-img-center {
	padding: 0 4%;
	text-align: center;
	margin-bottom: 2rem;
}
@media (min-width: 768px) {
	.story-img-center {
		margin: 0 95px 2rem 95px;
		padding: 0;
	}
}
.story-img-left {
	padding: 0 4%;
	text-align: left;
	margin-bottom: 2rem;
}
@media (min-width: 768px) {
	.story-img-left {
		margin: 0 95px 2rem 95px;
		padding: 0;
	}
}
.story-img-right {
	padding: 0 4%;
	text-align: right;
	margin-bottom: 2rem;
}
@media (min-width: 768px) {
	.story-img-right {
		margin: 0 95px 2rem 95px;
		padding: 0;
	}
}
.copyright {
	color: #000000;
}
.nonmembrtArea .txtArea{width:90%;max-width:990px;margin:0 auto}
.nonmembrtArea .txtArea .appealTxt.main{margin:0 auto 1rem;color:#fff;font-size:1.8rem;font-weight:bold;line-height:1.5rem;text-align:center}
.nonmembrtArea .txtArea .appealTxt.top{margin:0 auto 2rem;color:#fff;font-size:1.2rem;line-height:1.5rem;text-align:center}
.nonmembrtArea .txtArea .appealTxt.bottom{margin:0 auto 2rem;color:#fff;font-size:1.2rem;line-height:1.5rem;text-align:center;}
.nonmembrtArea .txtArea .appealTxt.bottom a {text-decoration:underline;}
.nonmembrtArea .btnArea{width:90%;max-width:990px;margin:0 auto 1rem}
.nonmembrtArea .btnBox a{-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;position:relative;width:50%;height:4rem;margin:0 auto;border-radius:2rem;font-size:1.5rem;font-weight:bold;line-height:4rem;text-align:center}
@media (max-width: 767px){
	.nonmembrtArea .btnBox a{width:100%}
}
@media (max-width: 480px){
	.nonmembrtArea .txtArea .appealTxt.main{font-size:1.6rem}
}
@media (max-width: 374px){
	.nonmembrtArea .txtArea .appealTxt.main{font-size:1.4rem}
	.nonmembrtArea .btnBox a{font-size:1.2rem}
}

/**
 * ***************************************
 * セクションタイトル
 * ***************************************
 */
.titleTxt2 {
	font-weight: bold;
	font-size: 1.8rem;
	line-height: 2rem;
	text-align: center;
	padding: 1rem 0 0;
}


/**
 * ***************************************
 * 動画コンテナー
 * ***************************************
 */
.youtube{
	text-align: center;
	margin: 0rem auto 2rem auto;
	position: relative;
	width: 80%;
	padding-top: 45%; /*90/160 * 幅*/
}
.youtube iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
/**
 * ***************************************
 * アニメ化
 * ***************************************
 */
.animeInfo * {	box-sizing: border-box; }
.animeInfo { margin: 0 1rem 2rem 1rem; padding: 1rem; border-radius: 1rem; background: #fff; }
@media (min-width: 480px) {
	.animeInfo { margin: 0 3rem 2rem 3rem; }
}
.animeInfo p { margin: 0 auto 1rem; font-size: 1.5rem; line-height: 1.2; text-align: center; color: #ef6392; font-weight: bold; }
.animeInfo .animeImg { width: 70%; max-width: 400px; margin: 0 auto; }
.animeInfo .comment { width: 80%; margin: 0 auto; border: 1px solid #ff7692; padding: 1rem; color: #ff7692; font-size: 1.2rem; line-height: 1.5rem; }


.disArea { width: 90%; max-width: 990px; padding: 0.5rem 0.5rem 0.2rem; margin: 2rem auto; border: solid 1px #C7C7C7; line-height: 1.3; }
.disArea a {text-decoration: underline;}