@charset "UTF-8";

article * { box-sizing: border-box; }
article { background: #ffede7; padding-bottom: 0.1rem; }
article img {
    max-width: 100%;
    height: auto;
    /*vertical-align: bottom; 画像下のスペースを消す */
}
.libre-baskerville-regular {
    font-family: "Libre Baskerville", serif;
    font-weight: 400;
    font-style: normal;
}
/**
 * ***************************************
 * トップバナー
 * ***************************************
 */
.topbanner {
	margin-bottom: 2rem;
}
.topbanner h1{
	margin-bottom: 1rem;
}
.camPeriod { width: 90%; margin: 0 auto; font-size: 1rem; line-height: 1.2; font-weight: bold; text-align: center;}
.camPeriod span {font-size: .8rem;}
.camTextArea { width: 80%; margin: 2rem auto 0; padding: 1rem; text-align: center; border: 1px dotted #d51614; background: #fff;
    color: #d51614; font-size: 1.5rem; line-height: 1.2; }
.camTextArea span { font-size: 2rem; font-weight: bold; }
/**
 * ***************************************
 * ストーリー
 * ***************************************
 */
.prologue {width: 90%; margin: 0 auto 2rem; }
.prologue p { padding: 1rem; color: #d51614; font-size: 1.5rem; font-weight: bold; line-height: 1.2; text-align: center; }
.story { width: 95%; margin: 0 auto 4rem; }
.storyBg { border: 2px solid #e1d1b9; background-image: url(../images/background.jpg); }
.story .textCenter { width: 90%; margin: 2rem auto 0;
    color: #d51614; text-align: center; font-size: 1.2rem; font-weight: bold; line-height: 1.5; }
.story .colorBrown { color: #9f7134; }
.story .colorBrown span { color: #d51614; }
.story .image { width: 90%; margin: 2rem auto 0; text-align: center; }
.story .image img { max-width: 891px; width: 100%; }
.story .textMain { width: 90%; margin: 2rem auto 0; text-align: center; }
.story .textMain p { padding: 1rem; color: #d51614; font-size: 1.5rem; font-weight: bold; line-height: 1.2; text-align: center; }
.story .copyright { text-align: center; font-size: 0.8rem; line-height: 1.2; color: #3D3C3C; margin: 2rem auto; }
.story .commentBox { margin: 2rem auto; width: 80%; padding: 1rem; line-height: 1.2; border: solid 1px #d51614; border-radius: 1rem; font-size: 1rem; color: #d51614; }
.story .commentBox .boxTitle { font-size: 1.2rem; font-weight: bold; margin-bottom: 0.5rem; }
/**
 * ***************************************
 * タイトルリスト
 * ***************************************
 */
.listArea { width: 95%; margin: 0 auto 3rem; }
.listBg { border: 2px solid #e1d1b9; background: #fff; padding: 1rem 1rem 3rem; }
.listTitle { color: #d51614; font-size: 1.5rem; font-weight: bold; text-align: center; }
.listBox { margin: 3rem 2% 0; }
.listBox .titleDetail .titleName { -webkit-box-orient: vertical; -webkit-line-clamp: 2; display: -webkit-box; overflow: hidden; word-break: normal; font-size: 1.2rem; }
.titleList { display: grid; grid-template-columns: 1fr 1fr; align-items: start; grid-column-gap: 2rem; grid-row-gap: 3rem; }
.titleDetail { max-width: 650px; margin: 0 auto;}
.titleDetail .cover { max-width: 250px; width: 80%; margin: 0 auto; }
.titleDetail .titleName { max-width: 650px; width: 90%; margin: 0.5rem auto 0;
                          text-align: center; font-size: 1.2rem; font-weight: bold; text-decoration: underline; line-height: 1.2;
                          -webkit-box-orient: vertical; -webkit-line-clamp: 2; display: -webkit-box; overflow: hidden; word-break: normal; }
.titleDetail .camInfo { text-align: center; margin: 0.5rem auto 0; }
.titleDetail .camInfo span { display: inline-block; padding: 0.2rem 0.5rem; font-size: 1.2rem; border: solid 1px #ef3232; background-color: #ef3232; color: #fff; }
.titleDetail .camInfo .rating { border: solid 1px #C7C7C7; background-color: #F7FF07; color: #1F1F1F; }
.titleDetail .viewBtn { max-width: 250px; width: 80%; text-align: center; margin: 1rem auto 0; }
.titleDetail .viewBtn a { display: block; padding: 1rem;
                          font-size: 1.2rem; font-weight: bold; color: #fff;
                          background-color: #d51614; border-radius: 3.2rem;
                          border: 1px solid #c7c7c7; /*box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);*/ }
.titleList.column6 { margin-top: 4rem; grid-template-columns: repeat(6, 1fr); grid-column-gap: 1rem; }
.titleList.column6 .titleDetail .cover { width: 100%; }
.titleList.column6 .titleDetail .camInfo span { font-size: 0.8rem; }
.titleList.column6 .titleDetail .viewBtn { width: 100%; margin: 0.5rem auto 0; }
.titleList.column6 .titleDetail .viewBtn a { padding: 0.7rem; font-size: 1rem; }
.titleList.column6 .titleDetail .titleName { font-size: 0.9rem; }
@media (max-width: 767px){
    .titleList.column6 { grid-template-columns: repeat(3, 1fr); grid-column-gap: 2rem; }
}

.titleList figure { position: relative; }
.titleList figure a { display: block; position: relative; background: #f7f9fa; }
.titleList figure a::before { display: block; padding-top: 150%; content: ""; }
.titleList figure img { -o-object-fit: contain; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; word-break: break-word; }

/**
 * ***************************************
 * タイトル詳細
 * ***************************************
 */
.detail { width: 90%; margin: 0 auto; }
.detail .textCenter { margin-bottom: 1rem; font-size: 1.5rem; font-weight: bold; padding-bottom: 0.5rem; border-bottom: double #d51614; }
.mangaDetail img {
  width: 100%;
  height: auto;
  vertical-align: bottom;/* 画像下のスペースを消す */
}
.mangaDetail {
	width: 45%;
	margin: 0px auto;
	margin-bottom: 1rem;
}
.title { text-align: center; }
.title h2 {
    color: #ea1938;
	font-size: 1.5rem;
	line-height: 1.2;
	text-decoration: underline;
}
.image + .btnBox { margin: 2rem auto 0; }
.btnBox { margin: 1rem auto 0; }
.btnBox a {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    width: 60%;
    height: 3em;
    border-radius: 1.5em;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 3em;
    text-align: center;
}
@media (max-width: 568px){
    .btnBox a { width: 90%; }
}
.btnBox .btnRed {
    border: 1px solid #c7c7c7;
    background: #d51614;
    color: #fff;
    /*box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);*/
}
.btnBox p { font-weight: bold; font-size: 1.5rem; margin-bottom: 0.5rem; color: #9f7134; }
.mangaInfo .saleBlock {
    margin: 0.6rem 0 0;
    display: inline-block;
    padding: 0.3rem;
    background: #c60000;
    color: #fff;
    font-size: 1.2;
}
/**
 * ***************************************
 * 動画コンテナー
 * ***************************************
 */
.youtube{ text-align: center; margin: 2rem auto 0; position: relative; width: 80%; padding-top: 45%; /*90/160 * 幅*/ }
.youtube iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%; }
.story .movieComment { width: 90%;  margin: 1rem auto 0; line-height: 1.5; font-size: 1rem; font-weight: bold; color: #d51614; text-align: center; }
/**
 * ***************************************
 * キャンペーン情報
 * ***************************************
 */
.disArea { width:90%; max-width:990px; padding:0.5rem 0.5rem 0.2rem; margin: 3rem auto; border:solid 1px #d51614; line-height: 1.3; }
.disArea a {text-decoration: underline;}
.color_rd {color: #d51614;}
.w_b { font-weight: bold; }
/**
 * ***************************************
 * 終了ページ
 * ***************************************
 */
.endArea {width:90%;max-width:990px;margin: 0 auto 1rem;}
.endTitle {text-align: left;font-weight: bold;font-size: 1.5rem;line-height: 1.7rem;margin-bottom: 1rem}
.endtxt {text-align: left;font-size: 1.5rem;line-height: 1.7rem;}

.resArea * {-webkit-box-sizing: border-box;box-sizing: border-box;}
.resArea p{margin-bottom: 0.5rem}
.linkArea {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: 1fr;grid-column-gap: 10px;grid-row-gap: 10px;}
.endlinkArea {display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: 1fr;grid-column-gap: 10px;grid-row-gap: 10px;}
@media screen and (max-width: 550px) {
	.linkArea {grid-template-columns: 1fr;}
	.endlinkArea {grid-template-columns: 1fr;}
}
.linkArea .btnBlock a,
.endlinkArea .btnBlock a{-webkit-font-feature-settings: "palt";display: block;padding: 1rem 1.6rem;border-radius: 2rem;background: #fff; font-feature-settings: "palt";font-size: 1.1rem;font-weight: bold;text-align: center; border: 1px solid #c7c7c7; /*box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);*/}
.linkArea .btnBlock a span,
.endlinkArea .btnBlock a span{display: inline-block;}
.linkArea .btnBlock a:hover,
.endlinkArea .btnBlock a:hover{opacity: .7;}

.linkBox { text-align: center; margin: 0 auto 3rem; width: 95%; display: flex; justify-content: center; flex-wrap: wrap; }
.linkBox a { display: inline-block; margin: 0.5rem; padding: 1rem; width: 30%;
               font-size: 1.2rem; font-weight: bold; background: #fff; 
               border: 1px solid #c7c7c7; /*box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);*/ border-radius: 1.6rem; }
@media (max-width: 568px){
    .linkBox a { width: 45%; }
}
/***********************************************/
.animeBlock { width: 95%; margin: 0 auto 4rem; }
.animeBlock p { padding: 1rem; color: #d51614; font-size: 1.3rem; font-weight: bold; line-height: 1.5; text-align: center; }
.animeBlock .youtube { margin: 0 auto 2rem; }

.anchorBlock { width: 95%; margin: 0 auto 4rem; text-align: center; }
.anchorBlock a { display: inline-block; position: relative; width: 15rem; padding: 1rem; margin: 0.5rem; border-radius: 0.5rem; font-size: 1.1em; font-weight: bold; text-align: center; 
    border: 1px solid #c7c7c7; background: #9f7134; color: #fff; }
.anchorBlock a::after { content: ''; position: absolute; bottom: 0.3rem; right: 0.3rem; width: 0; height: 0; border-radius: 0.1rem; border-style: solid; border-width: 0 0 0.7rem 0.7rem;
    border-color: transparent transparent #fff transparent; }
.anchorBlock a::hover { opacity: 0.8; }