@charset "UTF-8";

article * {
  box-sizing: border-box;
}
article img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;/* 画像下のスペースを消す */
}

/**
 * ***************************************
 * 文字色
 * ***************************************
 */
.txt-yellow {
	color: #ff71c1;
}


/**
 * ***************************************
 * トップバナー
 * ***************************************
 */
.topbanner h1{
	margin-bottom: 1rem;
}
.topbanner p{
	text-align: left;
	font-size: 1.5rem;
	line-height: 2rem;
	width: 90%;
	margin: 0 auto 2rem auto;
}
@media (min-width: 768px) { /* 画面サイズが768以上の時～の意味 */
  .topbanner p {
    font-size: 2rem;
	line-height: 2.5rem;
  }
}

/**
 * ***************************************
 * タイトル詳細
 * ***************************************
 */
.detail * {
	box-sizing: border-box;
}
.detail {
	margin-bottom: 2rem;
}
.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 {
  border: 1px solid #C7C7C7;
}
@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;
	}
}

/**
 * ***************************************
 * キャラクター紹介
 * ***************************************
 */
.character {
	background: #FFFFFF;
	background: url(https://c.mangaplaza.com/common/special/20220301-queen-oldmaid/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: #edffaf;
	padding: 2rem 0 1rem 0;
	margin-bottom: 2rem;
}
.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 {
		background: url(https://c.mangaplaza.com/common/special/20220301-queen-oldmaid/images/story-bg-3.png) no-repeat;
		background-position: center;
		background-size: 100%;

		padding: 0 95px;
	}
}
.story-img-left {
	padding: 0 4%;
	text-align: left;
	margin-bottom: 2rem;
}
@media (min-width: 768px) {
	.story-img-left {
		background: url(https://c.mangaplaza.com/common/special/20220301-queen-oldmaid/images/story-bg-2.png) no-repeat;
		background-position: center;
		background-size: 100%;

		padding: 0 95px;
	}
}
.story-img-right {
	padding: 0 4%;
	text-align: right;
	margin-bottom: 2rem;
}
@media (min-width: 768px) {
	.story-img-right {
		background: url(https://c.mangaplaza.com/common/special/20220301-queen-oldmaid/images/story-bg-1.png) no-repeat;
		background-position: center;
		background-size: 100%;

		padding: 0 95px;
	}
}
.no-background {
	background: none;
}
.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}
}