@charset "UTF-8";

article * {
  box-sizing: border-box;
}
article img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;/* 画像下のスペースを消す */
}
/**
 * ***************************************
 * トップバナー
 * ***************************************
 */
.topbanner h1{}
/**
 * ***************************************
 * ストーリー
 * ***************************************
 */
.story {
	background: #fff;
    background: url(../images/background.png), repeat;
	margin-bottom: 2rem;
    padding: 2rem 0 1rem 0;
}
.story h2 {
    position: relative;
    max-width : 700px;
    width : 80%;
    margin: 0 auto 2rem;
    background: #c5272a;
    box-shadow: 0px 0px 0px 5px #c5272a;
    border: dashed 1px white;
    padding: 0.2em 0.5em;
    color: #fff;
    text-align: center;
    font-family: 'Fredoka', sans-serif;
}
.story h2:after {
    position: absolute;
    content: '';
    left: -7px;
    top: -7px;
    border-width: 0 0 15px 15px;
    border-style: solid;
    border-color: #fff #fff #881b1d;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}
.story h2 a {
    display: inline-block;
    margin: 0.5rem;
    font-size: 1.7rem;
    text-decoration: underline;
    line-height: 2rem;
}
.story .storyText {
    font-family: 'Fredoka', sans-serif;
    color: #c5272a;
    width : 80%;
    font-size: 2rem;
    line-height: 2.3rem;
    text-align: center;
    margin: 0 auto 1.5rem;
    font-weight: bold;
}
.story .storyImage {
    max-width : 800px;
    width : 90%;
    margin: 0 auto 2.5rem;
}
.story .storySepa {
    width : 100%;
    margin: 0 auto 2.5rem;
}
.copyright {
	color: #000;
}
/**
 * ***************************************
 * タイトル詳細
 * ***************************************
 */
.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 {}
.cover p { background: #FF9204; text-align: center; }
.title {
	text-align: center;
	margin-bottom: 1rem;
}
.title h2 {
	font-size: 1.8rem;
	margin-bottom: 0.6rem;
	line-height: 2.3rem;
	text-decoration: underline;
}
.title h3 {
	margin-top: 0.5rem;
	font-size: 1.2rem;
}
@media (min-width: 768px) {
	.title h2 {
		font-size: 2rem;
		line-height: 2.5rem;
	}
	.title h3 {
		font-size: 1.5rem;
	}
}
.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;
  background: #fff;
}
@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;
	}
}
.authorName, .genreBlock {
	margin-bottom: 0.6rem;
}
.authorName a,
.genreBlock a{
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
    font-size: 1.3rem;
	line-height: 1.8rem;
	text-decoration: underline;
}
.genreBlock a {margin-right: 1rem;}
.genreBlock a:before {content:"#";}

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

.mangaInfo .saleBlock {
    display: inline-block;
    padding: 0.3rem;
    background: #c60000;
    color: #fff;
    font-size: 1.2rem;
}

.animeBox { font-family: 'Fredoka', sans-serif; width: 96%; margin: 0 auto 2rem; text-align: center; color: #c5272a; font-size: 2rem; font-weight: bold; line-height: 1.2; }
.animeBox span { font-size: 1.5rem; }

.titleBox { font-family: 'Fredoka', sans-serif; width: 96%; margin: 0 auto 2rem; text-align: center; color: #c5272a; font-size: 2rem; font-weight: bold; line-height: 1.2; }
.titleBox .btnBox { font-size: 1rem; }
.titleBox .btnBox a { width: 60%; }
.pvBox { background: #fff; padding: 1rem; margin: 0 auto 4rem; width: 90%; border-radius: 1rem; border: 1px dotted #c5272a; }
.pvBox p { font-family: 'Fredoka', sans-serif; text-align: center; color: #c5272a; font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem; }
.youtube{ text-align: center; margin: 0rem auto; position: relative; width: 80%; padding-top: 45%; /*90/160 * 幅*/ }
.youtube iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%; }