@charset "UTF-8";
article * { box-sizing: border-box; }
article { background: #abe4ff; background-image: url(../images/background.jpg); background-size: 100%; background-repeat: repeat-y; 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; }
.end-txt { font-size: 1.3rem; font-weight: bold; text-align: center; color: #EF3232; }
/***********************************************/
.animeBlock { width: 90%; margin: 0 auto 4rem; }
.animeBlock p { padding: 1rem; color: #be2e73; 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: #be2e73; 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; }
/***********************************************/
.bubbleBg { padding-bottom: 0.5rem; border-radius: 0.5rem; background-color: #fff; background-repeat: repeat-y; background-size: 12%;
    background-image: url(../images/bg-left.png), url(../images/bg-right.png); background-position: top left, top right; }
/***********************************************/
.charaBlock { width: 90%; margin: 0 auto 4rem; }
.charaBlock p { padding: 1rem; color: #be2e73; font-size: 1.3rem; font-weight: bold; line-height: 1.5; text-align: center; }
/*タブ切り替え全体のスタイル*/
.tabs { width: 90%; margin: 0 auto 3rem; text-align: center; }
/*タブのスタイル*/
.tab_item { display: inline-block; width: 40%; margin: 0 0.5rem; transition: all 0.2s ease; cursor: pointer; opacity: 0.5; }
.tab_item:hover { opacity: 1; }
/*ラジオボタンを全て消す*/
input[name="tab_item"] { display: none; }
/*タブ切り替えの中身のスタイル*/
.tab_content { display: none; margin-top: 1rem; border-radius: 0.5rem; padding: 1rem; }
.tab_content .name { text-align: left; font-size: 1.5rem; line-height: 1.2; padding: 0 0 1rem; }
.tab_content .name span { display: block; margin-bottom: 0.2rem; font-size: 1rem; }
.tab_content .text { text-align: left; font-size: 1.1rem; font-weight: normal; line-height: 1.2; padding: 0; color: #1f1f1f; }
#julius_content .name { color : #0075a9; }
#elsa_content { background: #ffecf0; }
#julius_content { background: #e5f7ff; }
/*選択されているタブのコンテンツのみを表示*/
#elsa:checked ~ #elsa_content,
#julius:checked ~ #julius_content { display: block; }
/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item { opacity: 1; }

/**
 * ***************************************
 * ストーリー
 * ***************************************
 */
/*.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: 98%; margin: 0 auto 4rem; }
.storyBg { padding: 0.1rem 0 2rem; background-color: #fff; background-repeat: repeat-y; background-size: 12%; background-image: url(../images/bg-left.png), url(../images/bg-right.png); 
    background-position: top left, top right; border-radius: 0.5rem; }
.story .textCenter { width: 90%; margin: 2rem auto 0; color: #be2e73; text-align: center; font-size: 1.5rem; font-weight: bold; line-height: 1.5; }
.story .textLeft { width: 90%; margin: 2rem auto 0; color: #064a83; text-align: left; font-size: 1.2rem; font-weight: bold; line-height: 1.5; }
.story .colorBrown { color: #9f7134; }
.story .colorBrown span { color: #d51614; }
.story .line { width: 90%; margin: 2rem auto 0; text-align: center; }
.story .image { width: 95%; margin: 2rem auto 0; text-align: center; }
.story .image img { max-width: 940px; 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 .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; }
.copyright { width: 98%; text-align: center; font-size: 0.8rem; line-height: 1.2; color: #3D3C3C; margin: 2rem auto; }
/**
 * ***************************************
 * タイトルリスト
 * ***************************************

.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; }
.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: 2rem auto 0; display: flex; }
.detail .textCenter { margin-bottom: 1rem; font-size: 1.5rem; font-weight: bold; padding-bottom: 0.5rem; border-bottom: double #be2e73; }
.mangaDetail img { width: 100%; height: auto; vertical-align: bottom;/* 画像下のスペースを消す */ }
.mangaDetail { width: 45%; margin: 0px auto; margin-bottom: 1rem; }
.mangaDetail .cover { margin-right: 1rem; position: relative; }
.mangaDetail .cover .sale { position: absolute; top: 0; right: 0; display: inline-block; padding: 0.17rem 0.17rem 0.07rem; border: 1px solid #ef3232; border-radius: 2px; background: #ef3232;
    color: #fff; font-feature-settings: "palt"; font-size: 1rem; line-height: 1; text-align: center; }
.title { text-align: center; }
.title h2 { color: #be2e73; font-size: 1.5rem; line-height: 1.2; text-decoration: underline; }
.author { text-align: center; font-size: 1rem; line-height: 1.2; font-weight: normal; margin-top: 0.5rem; }
.author a { 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){
    .detail { display: block; }
    .mangaDetail .cover { margin-right: 0; }
    .btnBox a { width: 90%; }
}
.btnBox .btnRed { border: 1px solid #c7c7c7; background: #be2e73; color: #fff; }
.btnBox p { font-weight: bold; font-size: 1.5rem; margin-bottom: 0.5rem; color: #064a83; line-height: 1.2; }
.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";f ont-size: 1.1rem; font-weight: bold;text-align: center; border: 1px solid #c7c7c7; }
.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: 15rem;
               font-size: 1.2rem; font-weight: bold; background: #fff;  border: 1px solid #c7c7c7; border-radius: 2rem; }
@media (max-width: 568px){
    .linkBox a { width: 45%; }
}