@charset "utf-8";

@import url('https://fonts.googleapis.com/earlyaccess/notosansjapanese.css');
@import url('https://fonts.googleapis.com/css?family=Sawarabi+Mincho');

/* reset css */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }body { line-height: 1; }article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }nav ul { list-style: none; }blockquote, q { quotes: none; }blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }/* change colours to suit your needs */ins { background-color: #ff9; color: #000; text-decoration: none; }/* change colours to suit your needs */mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }del { text-decoration: line-through; }abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }table { border-collapse: collapse; border-spacing: 0; }/* change border colour to suit your needs */hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; }input, select { vertical-align: middle; }


/*
 * defaut style
 */
html { height: 100%; overflow-y: scroll; font-size:16px; letter-spacing:-0.03rem; }
body { /* min-height:100%; */  font-size: 100%; color: #333333; background:#000; min-width: 1000px; overflow: hidden; word-wrap: break-word; -webkit-text-size-adjust: 100%;  }
body { font-family:'Noto Sans JP',	"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
table { word-break: break-word; }
img { max-width: 100%; height: auto; width: auto; vertical-align: bottom; border: none; }
li { list-style-type: none; }
ol { margin-bottom:1.5em; }
ol li {  margin-left:20px; padding-left:5px; list-style-type:decimal; margin-bottom:0.5em; }
p { margin-bottom: 2em; line-height:160%; }
p:last-child { margin-bottom:0; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
sup { position: relative; font-size: 100%; top: -5px; }
sub { position: relative; font-size: 100%; bottom: -5px; }
.clearfix { *zoom: 1; }
.clearfix:after { content: ''; display: block; clear: both; height: 0; margin-top: -1px; }
.sp { display: none!important; }
.center { text-align:center; }
.pc-center { text-align:center; }
.right { text-align:right; } 
.pc-right { text-align:right; } 
strong { /* color:#C00; */ }
em { /* color:#960; */ font-weight:bold; font-style:normal; }
* { box-sizing:border-box; }


#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #fff;
  z-index: 999;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 29px;
  height: 29px;
  margin-top: -14px;
  margin-left: -14px;
  text-align: center;
  color: #333;
  z-index: 1000;
}


/*
 * header & footer
 */
#container {}
.scroll-bg { background:url(../img/bg_earth.jpg) no-repeat; background-size:cover; content:""; display:block; position:fixed; left:0; top:0; min-width:2000px; width:100%; height:100%; }

body.loading #container { visibility:hidden; }


#header { }
#header > .inner { max-width:960px; margin:0 auto; position:relative; }
#header .logo { width:20.2%; position:relative; top:-2px; }
#header #gnav { position:absolute; right:2%; top:0; margin-top:2rem; }
#header #gnav li { display:inline-block; border-left:1px solid #88602c; padding-left:2rem; margin-left:2rem; }
#header #gnav li:first-child { border-left:none; padding-left:0; }
#header #gnav a { color:#76491b; font-size:1.5rem; }


#footer { background:#e60012; position:relative; padding:34px 0 60px; color:#fff; font-size:14px; line-height:160%; }
#footer .pagetop { text-align:center;  }
#footer .pagetop:hover { opacity:0.7; }
#footer .sns { text-align:center; margin:20px 0 20px; }
#footer .prize { text-align:center; margin-bottom:20px; }
#footer .logo { text-align:center; margin:20px 0 20px; }
#footer .copyright { text-align:center; }



/*
 * contents
 */
.contents { }
.content-wrapper { }
.main-content {  }


/* anime */
.zoomInEx { animation:_zoomInEx 0.3s ease 0s forwards!important; transform-origin:left; }
.slideInEx { animation:_slideInEx 0.2s ease 0s forwards!important; }

@keyframes _zoomInEx {
    0% { opacity:0; transform:scale(2,2); }
  100% { opacity:1; transform:scale(1,1); }
}

@keyframes _slideInEx {
    0% { opacity:1; transform:scale(0,1); transform-origin:left; }
  100% { opacity:1; transform:scale(1,1); transform-origin:left; }
}



/* 汎用 */
.red { color:#e71f19; }
.green { color:#009d42; }
.blue { color:#0099ff; }
.note { line-height:140%; }
.underline { text-decoration:underline; }
.underline:hover { text-decoration:none; }
.btn01 a { display:block; width:62.2%; margin:0rem auto 1.8rem; border:2px solid #76491b; background:#fff; color:#76491b; border-radius:50px; font-size:1.875rem; padding:2rem; position:relative; text-align:center; }
.btn01 a:after { display:block; content:""; background:url(../img/ico_arrow01.png) no-repeat left top; background-size:cover; width:20px; height:22px; position:absolute; right:3.89408099688474%; top:50%; transform:translateY(-50%);	}
.btn01 a:hover { text-decoration:none; opacity:0.7; }

.ruby { position:relative; display:inline-block; }
.ruby .rt { position:absolute; top:-20px; text-align:center; font-size:14px; letter-spacing:0; white-space:nowrap; left:50%; transform:translateX(-50%); }




/* content */
.sns ul {font-size: 0;}
.sns ul li {display: inline-block;}
.sns ul li:not(:last-of-type) {margin-right: 10px;}
#header .sns {position: absolute;top: 15px;right: 20px;z-index: 15;}
#footer .sns ul li > * { vertical-align:bottom; }

.visual-area { margin-bottom:0px; z-index:1; position:relative; overflow:hidden; background:url(../img/img_main_keyvisual.png) no-repeat 50% top fixed #fff; }
.visual-area > .inner { max-width:1000px; margin:0 auto; position:relative; height:1116px; background:url(../img/bg_main02.png) no-repeat left top; }
.visual-area .title01 { position:absolute; left:710px; top:0px; width:316px; z-index:3; }
.visual-area .title02 { position:absolute; left:-20px; top:210px; width:314px;  z-index:3; }
.visual-area .title03 { position:absolute; left:15px; top:700px; z-index:3; overflow:hidden; }
.visual-area .title04 { position:absolute; left:15px; top:700px; z-index:4; }
.visual-area .visual { position:fixed; left:50%; transform:translateX(-50%); margin-left:110px; top:0px; width:1283px; }
.visual-area .book { position:absolute; left:640px; top:748px; z-index:10; background:url(../img/img_main_book_bg.png) no-repeat; width:340px; height:252px; }
.visual-area .book .thumb { position:absolute; left:9px; top:9px; width:167px;  }
.visual-area .book .date { position:absolute; left:181px; top:9px; width:153px; z-index:-1; }
.visual-area .book .buy { position:absolute; left:181px; top:142px; }
.visual-area .book .buy a:hover { opacity:0.7; }
.visual-area .book .trial { position:absolute; left:181px; top:196px; }
.visual-area .book .trial a:hover { opacity:0.7; }
.visual-area .book .trial.off {opacity: 0.7;}
.visual-area .author { position:absolute; left:10px; top:40px; z-index:10; }
.visual-area .twitter { position:absolute; left:613px; top:38px; z-index:10; }
.visual-area .twitter:hover { opacity:0.7; }
.visual-area .catch { position:absolute; left:-166px; bottom:0px; width:1247px; z-index:5; }
.visual-area .pop { position:absolute; left:528px; bottom:370px; z-index:5; }
.visual-area .pop a:hover { opacity: 0.8; }


.visual-area .title01,
.visual-area .title02,
.visual-area .title03,
.visual-area .title04,
.visual-area .visual,
.visual-area .author,
.visual-area .book,
.visual-area .pop,
.visual-area .catch { opacity:0; }

.menu-area { position:fixed; width:100%; left:0; top:0; z-index:100; background:rgba(255,255,255,0.85); box-shadow:0 0 10px 0 rgba(0,0,0,0.2); transform:translateY(-100%); transition:0.2s ease-in-out; }
.menu-area.show { transform:translateY(0%); }
.menu-area ul { display:block; width:732px; margin:0 auto; position:relative; padding:25px 0; }
.menu-area ul li { float:left; border-left:1px solid #393170; margin-left:4px; padding-left:5px; }
.menu-area ul li:first-child { border-left:none; margin-left:0px; padding-left:0px; }
.menu-area ul li a:hover { opacity:0.7; }


.comic-area { margin:0 auto; padding-bottom: 35px; position:relative; z-index:2; background:url(../img/bg_comic.png) no-repeat left top; background-size:cover; }
.comic-area > .wrapper > .inner { max-width:960px; margin:0 auto; position:relative; z-index:4; }
.comic-area .title { text-align:center; padding-top:40px; margin-bottom:10px; }
.comic-area .txt01 { margin-bottom: 0;}
.comic-area .txt02 { margin-top: -25px; text-align: center;}
.comic-area .btn ul {font-size: 0; margin-top: -45px; margin-bottom: 30px; text-align: center;}
.comic-area .btn ul li { display: inline-block; margin: 0 25px;}
.comic-area .btn ul li a:hover {opacity: 0.8;}

.store-area { margin:0 auto; position:relative; z-index:2; background:url(../img/bg_store.jpg) repeat left top fixed; background-size:cover; }
.store-area > .wrapper { background:url(../img/bg_store02.png) no-repeat 50% top fixed; background-size:auto; }
.store-area > .wrapper > .inner { max-width:960px; margin:0 auto; position:relative; z-index:4; }
.store-area .title { text-align:center; padding-top:40px; margin-bottom:40px; }
.store-area .title02 { margin-bottom:12px; }
.store-area .store-list ul { margin-bottom:0px;}
.store-area .store-list li { float:left; margin-left:40px; margin-bottom:40px; box-shadow:0 0 10px 3px rgba(230,21,194,0.5); }
.store-area .store-list li:nth-child(2n+1) { margin-left:0px; }

.movie-area { margin:0 auto; padding-bottom:50px; position:relative; z-index:2; background:rgba(0,0,0,0.5); background-size:cover; }
.movie-area  > .inner { max-width:960px; margin:0 auto; position:relative; z-index:4; }
.movie-area .title { text-align:center; padding-top:40px; margin-bottom:40px; }
.movie-area .item { width:402px; margin: 0 20px;  }
.movie-area .movie-list .item { float:left; }
.movie-area .movie-list .item:hover { opacity:0.7; }
.movie-area .movie-list .item a { pointer-events: none; outline: none;}
.movie-area .item .ttl { color:#fde692; font-size:18px; font-weight:300; text-align:center; margin-top:15px; line-height:140%; }
.movie-area .item .thumb { position:relative; }
.movie-area .item .thumb:after { content:""; background:url(../img/img_movie_btn.png) no-repeat; background-size:78px 77px; width:78px; height:77px; display:block; position:absolute; left:50%; margin-left:-39px; top:50%; margin-top:-39px; transition:0.2s ease-in-out; }
.movie-area .item:hover .thumb:after { transform:scale(1.1,1.1); }
.movie-modal .bg { position:fixed; left:0; top:0; width:100%; height:100%; z-index:-1; pointer-events:none; background:#000; opacity:0.8; }
.movie-area .slick-slider { position: relative; display: flex; }
.movie-area .slick-arrow {  position: absolute; width: 40px; height: 68px; outline: none; font-size: 0; cursor: pointer; border: none; background-color: unset; }
.movie-area .slick-disabled { opacity: 0.5; cursor: default;}
.movie-area .slick-prev { top: 78px; left: 0; background: url(../img/btn_movie01.png) no-repeat; background-size: contain; margin-right: 20px;}
.movie-area .slick-next { top: 78px; right: 0; background: url(../img/btn_movie02.png) no-repeat; background-size: contain; margin-left: 20px;}
.movie-area .slick-list { width: 845px; margin: 0 auto;}

.twitter-area { margin:0 auto; padding-bottom:50px; position:relative; z-index:2; background:url(../img/bg_twitter.png) no-repeat center top; background-size:cover; }
.twitter-area  > .inner { max-width:960px; margin:0 auto; position:relative; z-index:4; }
.twitter-area .title { text-align:center; padding-top:40px; margin-bottom:40px; position:relative; z-index:2; }
.twitter-area .summary { margin-top:-75px; margin-bottom:20px; }
.twitter-area .box { background:#e2f919; padding:20px; position:relative; }
.twitter-area .box h3 { text-align:center; margin-bottom:22px; }
.twitter-area .box .present-list { margin-bottom:25px; }
.twitter-area .box .present-list .item:nth-child(1) { float:left; }
.twitter-area .box .present-list .item:nth-child(2) { float:right; }
.twitter-area .box .outline { position:relative; }
.twitter-area .box .outline p { margin-bottom:0; }
.twitter-area .box .btn { position:absolute; left:663px; top:176px; }
.twitter-area .box .btn:hover { opacity:0.7; }


.cover-area { margin:0 auto; padding-bottom:35px; position:relative; z-index:2; background:url(../img/bg_cover.png) no-repeat center top; background-size:cover; }
.cover-area  > .inner { max-width:960px; margin:0 auto; position:relative; z-index:4; }
.cover-area .title { text-align:center; padding-top:40px; margin-bottom:40px; }

.story-area { margin:0 auto; padding-bottom:50px; position:relative; z-index:2; background:url(../img/bg_story02.png) no-repeat center top, url(../img/bg_story.png) no-repeat center bottom; background-size:cover,cover; }
.story-area  > .inner { max-width:960px; margin:0 auto; position:relative; z-index:4; }
.story-area .title { text-align:center; padding-top:40px; margin-bottom:40px; }

.character-area { margin:0 auto; padding-bottom:90px; position:relative; z-index:2; }
.character-area  > .inner { max-width:960px; margin:0 auto; position:relative; z-index:4; }
.character-area .title { text-align:center; padding-top:0px; margin-bottom:40px; }
.character-area .character-list li { margin-bottom:28px; }

.keyword-area { margin:0 auto; padding-bottom:35px; position:relative; z-index:2;  background:url(../img/bg_keyword.png) no-repeat center top; background-size:cover; }
.keyword-area:before { background:url(../img/bg_keyword02.png) repeat-x; content:""; display:block; position:absolute; left:0; top:-38px; min-width:2000px; width:100%; height:38px; box-shadow:0 0 18px rgba(255,255,255,0.4); }
.keyword-area:after { background:url(../img/bg_keyword02.png) repeat-x; content:""; display:block; position:absolute; left:0; bottom:-38px; min-width:2000px; width:100%; height:38px; box-shadow:0 0 18px rgba(255,255,255,0.4); }
.keyword-area  > .inner { max-width:960px; margin:0 auto; position:relative; z-index:4; }
.keyword-area .title { text-align:center; padding-top:40px; margin-bottom:40px; }
.keyword-area .keyword-list { font-family:"游明朝","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size:18px; color:#896a3f; }
.keyword-area .keyword-list .item { position:relative; background:rgba(246,236,236,0.7); border:2px solid #a58b52; margin-bottom:20px; padding:2px; }
.keyword-area .keyword-list .item > .inner { border:1px solid #a58b52; background:url(../img/bg_keywords_box.png) no-repeat left top; padding:32px 24px 20px; }
.keyword-area .keyword-list .item .ttl { font-size:32px; text-align:center; margin-bottom:10px; font-weight:bold; }
.keyword-area .keyword-list .item p { line-height:180%;}
.keyword-area .keyword-list .item p:last-child { margin-bottom:0; }


.chronology-area { margin:38px auto 0; padding-bottom:21rem; position:relative; z-index:2;  background:url(../img/bg_chronology.jpg) no-repeat center bottom; background-size:cover; min-height:1781px; }
.chronology-area  > .inner { max-width:960px; margin:0 auto; position:relative; z-index:4; }
.chronology-area .title { text-align:center; padding-top:40px; margin-bottom:40px; }
.chronology-area .chronology-list li { margin-bottom:8px; }
.chronology-area .chronology-list li:nth-child(3) { margin-bottom:28px; }


.information-area { margin:-2px auto 0; padding:45px 20px; position:relative; background:#fff; z-index:2; }
.information-area > .inner { width:960px; margin:0 auto; }
.information-area .title { text-align:center; margin-bottom:35px; margin-top:-80px }
.information-area p { line-height:180%; }
.book-box { margin-bottom:50px; }
.book-box .box-left { float:left; width:269px; }
.book-box .box-right { float:right; width:625px; }
.book-box .thumb { position:relative; }
.book-box .release { position:absolute; left:-32px; top:-32px; }
.book-box .ttl { font-size:30px; font-weight:bold; margin-bottom:20px; line-height:120%; }
.book-box .ttl span { font-size:20px; }
.book-box .author { font-size:24px; margin-bottom:20px; }
.book-box .author span { font-size:14px; margin-left:25px; }
.book-box .lead { font-size:22px; color:#e60012; font-weight:bold; line-height:160%; margin-bottom:0.5em; }
.book-box p { font-size:16px; }
.book-box .btns { margin-top:-5px; }
.book-box .btns a:hover { opacity:0.7; }
.book-box .btns .buy { display:inline-block; margin-right:25px; }
.book-box .btns .trial { display:inline-block; }
.book-box .btns .trial.off { opacity: 0.7; }
.information-area h3 { text-align: center; padding-top: 100px; margin-bottom: 35px;}


.char-modal .bg { position:fixed; left:0; top:0; width:100%; height:100%; z-index:-1; pointer-events:none; background:rgba(255,255,255,0.9);}
.mfp-close-btn-in .mfp-close { color:#aaa; }
/*
#char-modal01 .bg { background:rgba(25,162,196,0.7); }
#char-modal02 .bg { background:rgba(205,9,21,0.7); }
#char-modal03 .bg { background:rgba(253,95,119,0.7); }
#char-modal04 .bg { background:rgba(85,71,122,0.7); }
#char-modal05 .bg { background:rgba(33,121,161,0.7); }
#char-modal06 .bg { background:rgba(230,140,20,0.7); }
#char-modal07 .bg { background:rgba(29,151,128,0.7); }
#char-modal08 .bg { background:rgba(120,170,47,0.7); }
*/