@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; 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 { background:url(../img/bg_main_dot.png) repeat,url(../img/bg_main.jpg) no-repeat center top fixed; background-size:auto,auto; }
.scroll-bg { background:#fff; position:fixed; left:0; top:0; width:100%; height:100%; opacity:0; }
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:rgba(139,75,218,0.9); position:relative; padding:34px; color:#fff; font-size:14px; line-height:160%; }
#footer .pagetop { position:fixed; z-index:99; right:50px; bottom:0px; max-width:157px; transform:translateY(100%); transition:0.2s ease-in-out; }
#footer .pagetop.show { transform:translateY(-20%); }
#footer .pagetop img { width:100%; }
#footer .pagetop:hover { opacity:0.7; }
#footer .sns { text-align:center; margin:40px 0 20px; }
#footer .prize { text-align:center; margin-bottom:20px; }
#footer .logo { text-align:center; margin:40px 0 20px; }
#footer .copyright { text-align:center; }



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


/* anime */
@keyframes move-x {
    0% { transform:translateX( -10px); }
  100% { transform:translateX(  0px); }
}

@keyframes move-x2 {
    0% { transform:translateX( 10px); }
  100% { transform:translateX(  0px); }
}


@keyframes move-y {
    0% { transform:translateY( -10px); }
  100% { transform:translateY(  0px); }
}



/* 汎用 */
.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; }





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

.visual-area { margin-bottom:50px; }
.visual-area > .inner { max-width:960px; margin:0 auto; position:relative; height:800px; }
.visual-area .title { position:absolute; left:75px; top:0; z-index:3; }
.visual-area .visual { position:absolute; left:-130px; top:0; z-index:2; width:1225px; }
.visual-area .visual02 { position:absolute; left:-130px; top:0; z-index:4; width:1225px; }
.visual-area .book { position:absolute; right:0; top:374px; background:#7b49c3; padding:6px; z-index:10; }
.visual-area .book .date { position:absolute; left:0; top:-30px; }
.visual-area .book .buy { margin-top:6px; }
.visual-area .book .buy a:hover { opacity:0.7; }
.visual-area .book .trial { margin-top:6px; }
.visual-area .book .trial a:hover { opacity:0.7; }
.visual-area .author { position:absolute; right:-10px; top:46px; z-index:10; }
.visual-area .prize { position:absolute; left:-20px; top:13px; z-index:10; }
.visual-area .prize .prize01 { margin-bottom:12px;}
.visual-area .catch { position:absolute; left:0; bottom:0; z-index:5; }


.visual-area .title,
.visual-area .visual,
.visual-area .visual02,
.visual-area .author,
.visual-area .book,
.visual-area .prize,
.visual-area .catch { opacity:0; }


.menu-area { position:fixed; width:100%; left:0; top:0; z-index:100; background:rgba(255,255,255,0.6); transform:translateY(-100%); transition:0.2s ease-in-out; }
.menu-area.show { transform:translateY(0%); }
.menu-area ul { display:block; width:960px; margin:0 auto; position:relative; }
.menu-area ul li { float:left;}
.menu-area ul li:hover { opacity:0.7; }

.shop-area {  max-width:960px; margin:0 auto 70px; padding:45px 0; position:relative; background:rgba(255,255,255,0.8); z-index:2; }
.shop-area:before { content:""; display:block; background:url(../img/img_waku_lt.png) no-repeat; width:58px; height:58px; position:absolute; left:0; top:0; }
.shop-area:after { content:""; display:block; background:url(../img/img_waku_rt.png) no-repeat; width:58px; height:58px; position:absolute; right:0; top:0; }
.shop-area > .inner:before { content:""; display:block; background:url(../img/img_waku_lb.png) no-repeat; width:58px; height:58px; position:absolute; left:0; bottom:0;  }
.shop-area > .inner:after { content:""; display:block; background:url(../img/img_waku_rb.png) no-repeat; width:58px; height:58px; position:absolute; right:0; bottom:0; }
.shop-area .title { text-align:center; margin-bottom:20px; }
.shop-area .shop-list ul { margin-bottom:15px;}
.shop-area .shop-list li {  float:left; margin-left:15px; }
.shop-area .shop-list li:first-child { margin-left:40px; }


.story-area {  max-width:960px; margin:0 auto 70px; padding:45px 0; position:relative; background:url(../img/img_story01.png) no-repeat center top ,rgba(255,255,255,0.8); z-index:2; }
.story-area:before { content:""; display:block; background:url(../img/img_waku_lt.png) no-repeat; width:58px; height:58px; position:absolute; left:0; top:0; }
.story-area:after { content:""; display:block; background:url(../img/img_waku_rt.png) no-repeat; width:58px; height:58px; position:absolute; right:0; top:0; }
.story-area > .inner:before { content:""; display:block; background:url(../img/img_waku_lb.png) no-repeat; width:58px; height:58px; position:absolute; left:0; bottom:0;  }
.story-area > .inner:after { content:""; display:block; background:url(../img/img_waku_rb.png) no-repeat; width:58px; height:58px; position:absolute; right:0; bottom:0; }
.story-area .title { text-align:center; margin-bottom:130px; }
.story-area p { text-align:center; }

.character-area {  max-width:960px; margin:0 auto 70px; padding:45px 0; position:relative; background:rgba(255,255,255,0.8); z-index:2; }
.character-area .title { text-align:center; margin-bottom:35px; }
.character-area .char-list ul li img { max-width:none; }
.character-area .char-list ul li .name { position:relative; z-index:2; }
.character-area .char-list01 { background:url(../img/bg_character01.png) no-repeat; margin-top:-45px; }
.character-area .char-list01 ul { position:relative; display:block; height:720px; }
.character-area .char-list01 ul li:nth-child(1) { position:absolute; left:8px; top:95px; }
.character-area .char-list01 ul li:nth-child(2) { position:absolute; left:260px; top:95px; }
.character-area .char-list01 ul li:nth-child(3) { position:absolute; left:479px; top:95px; }
.character-area .char-list01 ul li:nth-child(4) { position:absolute; left:712px; top:95px; }
.character-area .char-list01 ul li:nth-child(1) .name { background:url(../img/txt_character_name01_on.png) no-repeat; }
.character-area .char-list01 ul li:nth-child(2) .name { background:url(../img/txt_character_name02_on.png) no-repeat; }
.character-area .char-list01 ul li:nth-child(3) .name { background:url(../img/txt_character_name03_on.png) no-repeat; }
.character-area .char-list01 ul li:nth-child(4) .name { background:url(../img/txt_character_name04_on.png) no-repeat; }
.character-area .char-list01 ul li:nth-child(1) .img { position:absolute; left:40px; top:-150px; background:url(../img/img_character01_on.png) no-repeat; }
.character-area .char-list01 ul li:nth-child(2) .img { position:absolute; left:-30px; top:-109px; background:url(../img/img_character02_on.png) no-repeat; }
.character-area .char-list01 ul li:nth-child(3) .img { position:absolute; left:40px; top:-87px; background:url(../img/img_character03_on.png) no-repeat;}
.character-area .char-list01 ul li:nth-child(4) .img { position:absolute; left:51px; top:-73px; background:url(../img/img_character04_on.png) no-repeat;}
.character-area .char-list02 { background:url(../img/bg_character02.png) no-repeat; margin-top:-155px; }
.character-area .char-list02 ul { position:relative; display:block; height:720px; }
.character-area .char-list02 ul li:nth-child(1) { position:absolute; left:108px; top:70px; }
.character-area .char-list02 ul li:nth-child(2) { position:absolute; left:345px; top:70px; }
.character-area .char-list02 ul li:nth-child(3) { position:absolute; left:577px; top:70px; }
.character-area .char-list02 ul li:nth-child(1) .name { background:url(../img/txt_character_name05_on.png) no-repeat; }
.character-area .char-list02 ul li:nth-child(2) .name { background:url(../img/txt_character_name06_on.png) no-repeat; }
.character-area .char-list02 ul li:nth-child(3) .name { background:url(../img/txt_character_name07_on.png) no-repeat; }
.character-area .char-list02 ul li:nth-child(1) .img { position:absolute; left:50px; top:-134px; background:url(../img/img_character05_on.png) no-repeat;}
.character-area .char-list02 ul li:nth-child(2) .img { position:absolute; left:33px; top:-109px; background:url(../img/img_character06_on.png) no-repeat;}
.character-area .char-list02 ul li:nth-child(3) .img { position:absolute; left:-10px; top:-129px; background:url(../img/img_character07_on.png) no-repeat;}
.character-area .char-list03 { margin-top:-180px; }
.character-area .char-list03 ul { position:relative; display:block; height:280px; }
.character-area .char-list03 ul li:nth-child(1) { position:absolute; left:0px; top:-86px; }
.character-area .char-list03 ul li:nth-child(2) { position:absolute; left:480px; top:-145px; }
.character-area .char-list03 ul li:nth-child(1) .img { position:absolute; left:0px; top:0px; }
.character-area .char-list03 ul li:nth-child(2) .img { position:absolute; left:0px; top:0px; }
.character-area .char-list03 ul li:nth-child(1) .name { position:absolute; left:35px; top:105px; background:url(../img/txt_character_name08_on.png) no-repeat; }
.character-area .char-list03 ul li:nth-child(2) .name { position:absolute; left:83px; top:76px; background:url(../img/txt_character_name09_on.png) no-repeat; }
.character-area .char-list01 h3 { position:relative; top:30px; }
.character-area .char-list02 h3 { position:relative; top:30px; }
.character-area .char-list03 h3 { position:relative; top:30px; z-index:2; pointer-events: none; }
.character-area .char-list a:hover .name img { opacity:0; }
.character-area .char-list a:hover .img img { opacity:0; }
.character-area .char-list03 a:hover .img img { opacity:0.7; }

.chronology-area { max-width:960px; margin:0 auto 70px; padding:45px 40px; position:relative; background:url(../img/bg_chronology.png) no-repeat; background-size:cover; z-index:2; }
.chronology-area:before { content:""; display:block; background:url(../img/img_waku2_lt.png) no-repeat; width:58px; height:58px; position:absolute; left:0; top:0; }
.chronology-area:after { content:""; display:block; background:url(../img/img_waku2_rt.png) no-repeat; width:58px; height:58px; position:absolute; right:0; top:0; }
.chronology-area > .inner:before { content:""; display:block; background:url(../img/img_waku2_lb.png) no-repeat; width:58px; height:58px; position:absolute; left:0; bottom:0;  }
.chronology-area > .inner:after { content:""; display:block; background:url(../img/img_waku2_rb.png) no-repeat; width:58px; height:58px; position:absolute; right:0; bottom:0; }
.chronology-area .title { text-align:center; margin-bottom:35px; }
.chronology-area .chronology-list .group { position:relative; margin-bottom:32px; }
.chronology-area .chronology-list .year { position:absolute; top:50%; transform:translateY(-50%); }
.chronology-area .chronology-list .text { font-size:18px; font-family:"游明朝","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; color:#fff; margin-left:158px; border-left:1px solid #e6e8f7; padding:8px 8px 8px 35px; line-height:180%; }
.ruby { position:relative; display:inline-block; }
.ruby .rt { position:absolute; top:-16px; text-align:center; font-size:50%; letter-spacing:0; white-space:nowrap; left:50%; transform:translateX(-50%); }

.keywords-area { max-width:960px; margin:0 auto 70px; padding:45px 20px; position:relative; background:url(../img/bg_keywords.png) no-repeat center top rgba(217,236,243,0.8); z-index:2; }
.keywords-area .title { text-align:center; margin-bottom:35px; }
.keywords-area .title02 { text-align:center; margin-bottom:28px; }
.keywords-area .keywords-list { font-family:"游明朝","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; color:#4599c9; font-size:18px; margin-bottom:55px; }
.keywords-area .keywords-list:last-child { margin-bottom:0; color:#5c6eb8; }
.keywords-area .keywords-list .item { position:relative; background:rgba(255,255,255,0.5); border:1px solid #aad4f0; margin-bottom:20px; padding:30px 22px; }
.keywords-area .keywords-list .item:before { content:""; display:block; background:url(../img/img_waku_lt.png) no-repeat; width:58px; height:58px; position:absolute; left:0; top:0; }
.keywords-area .keywords-list .item:after { content:""; display:block; background:url(../img/img_waku_rt.png) no-repeat; width:58px; height:58px; position:absolute; right:0; top:0; }
.keywords-area .keywords-list .item > .inner:before { content:""; display:block; background:url(../img/img_waku_lb.png) no-repeat; width:58px; height:58px; position:absolute; left:0; bottom:0;  }
.keywords-area .keywords-list .item > .inner:after { content:""; display:block; background:url(../img/img_waku_rb.png) no-repeat; width:58px; height:58px; position:absolute; right:0; bottom:0; }
.keywords-area .keywords-list .item .ttl { font-size:28px; text-align:center; letter-spacing:5px; margin-bottom:20px; }
.keywords-area .keywords-list .item p { line-height:180%;}

.information-area { margin:0 auto 0; padding:45px 20px; position:relative; background:rgba(255,255,255,1); z-index:2; }
.information-area > .inner { width:960px; margin:0 auto; }
.information-area .title { text-align:center; margin-bottom:35px; }
.book-box {}
.book-box .box-left { float:left; width:269px; }
.book-box .box-right { float:right; width:625px; }
.book-box .ttl { font-size:30px; font-weight:bold; margin-bottom:20px; }
.book-box .ttl span { font-size:85%; }
.book-box .author { font-size:24px; margin-bottom:20px; }
.book-box .author span { font-size:14px; margin-left:25px; }
.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:18px; }
.book-box .btns .trial { display:inline-block; }

.other-area { position:relative; background:rgba(255,255,255,1); z-index:2; }
.other-area .title { text-align:center; padding:17px; background:#dcbc60; }
.other-area .other-list { width:962px; margin:0 auto; }
.other-area .other-list .item { position:relative; float:left; overflow:hidden; }
.other-area .other-list .item .name { position:absolute; right:20px; top:20px;}
.other-area .other-list .item .thumb { transition:0.2s ease-in-out; }
.other-area .other-list .item .thumb img { transition:0.2s ease-in-out; }
.other-area .other-list .item:nth-child(1) .thumb { background:url(../img/img_other01_on.png) no-repeat; }
.other-area .other-list .item:nth-child(2) .thumb { background:url(../img/img_other02_on.png) no-repeat; }
.other-area .other-list .item:nth-child(3) .thumb { background:url(../img/img_other03_on.png) no-repeat; }
.other-area .other-list .item:nth-child(4) .thumb { background:url(../img/img_other04_on.png) no-repeat; }
.other-area .other-list .item:hover .thumb { transform:scale(1.2,1.2); }
.other-area .other-list .item:hover .thumb img { opacity:0; }

.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); }
*/



@media screen and (min-width: 2001px) {
	#container { background:url(../img/bg_main_dot.png) repeat,url(../img/bg_main.jpg) no-repeat center top fixed; background-size:auto,cover; }
}