@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 {  }
.scroll-bg { background:#000; 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:#ff8aab; 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 */
.fadeInUpEx { animation:_fadeInUpEx 0.5s ease 0s forwards; }
.fadeInDownEx { animation:_fadeInDownEx 0.5s ease 0s forwards; }
.bounceInUpEx { animation:_bounceInUpEx 1s ease 0s forwards;}
.bounceInUpEx2 { animation:_bounceInUpEx2 1s ease 0s forwards;}

@keyframes _fadeInUpEx {
    0% { opacity:0; transform:translateY( -50px); }
  100% { opacity:1; transform:translateY(  0px); }
}

@keyframes _fadeInDownEx {
    0% { opacity:0; transform:translateY( 50px); }
  100% { opacity:1; transform:translateY(  0px); }
}

@keyframes _bounceInUpEx {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1.2);
  }

  from {
    opacity: 0;
    transform: translate3d(0, 500px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, -10px, 0);
  }

  75% {
    transform: translate3d(0, 5px, 0);
  }

  90% {
    transform: translate3d(0, -3px, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes _bounceInUpEx2 {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1.5);
  }

  from {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, -5px, 0);
  }

  75% {
    transform: translate3d(0, 3px, 0);
  }

  90% {
    transform: translate3d(0, -1px, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}



/* 汎用 */
.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:-12px; text-align:center; font-size:50%; 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: 25px;left: 530px;z-index: 15;}
#footer .sns ul li > * { vertical-align:bottom; }

.visual-area { margin-bottom:0px; background:url(../img/bg_main.png) repeat-x center top; }
.visual-area > .inner { max-width:1000px; margin:0 auto; position:relative; height:1175px; background:url(../img/bg_main02.png) no-repeat left top; }
.visual-area .title01 { position:absolute; right:0px; top:0px; z-index:3; }
.visual-area .title02 { position:absolute; left:-15px; top:0px; z-index:3; }
.visual-area .visual { position:absolute; left:-0px; top:0px; z-index:2; width:1002px; }
.visual-area .book { position:absolute; left:110px; top:840px; z-index:10; background:rgba(255,218,217,0.8); padding:6px 10px; }
.visual-area .book .thumb { }
.visual-area .book .date { position:absolute; left:-99px; top:-5px; width:173px; z-index:2; }
.visual-area .book .buy { margin-top:6px; text-align:center; }
.visual-area .book .buy a:hover { opacity:0.7; }
.visual-area .book .trial { margin-top:6px; text-align:center; }
.visual-area .book .trial a:hover { opacity:0.7; }
.visual-area .author { position:absolute; left:673px; top:200px; z-index:10; }
.visual-area .pop { position:absolute; right:65px; top:390px; z-index:5; }
.visual-area .catch { position:absolute; left:188px; top:48px; z-index:5; }
.visual-area .sakura01 { position:absolute; left:791px; top:128px; z-index:3; }
.visual-area .sakura02 { position:absolute; left:743px; top:384px; z-index:3; }
.visual-area .sakura03 { position:absolute; left:904px; top:936px; z-index:3; }
.visual-area .sakura04 { position:absolute; left:211px; top:279px; z-index:3; }
.visual-area .sakura05 { position:absolute; left:10px; top:498px; z-index:3; }


.visual-area .title01,
.visual-area .title02,
.visual-area .visual,
.visual-area .author,
.visual-area .book,
.visual-area .catch,
.visual-area .pop,
.visual-area .sakura { opacity:0; }
.visual-area .visual.animated,
.visual-area .book .date.animated { opacity:1!important; }


/* manga */
.campain-area { position: relative; z-index: 2; padding: 36px 0 14px; background: url(../img/bg_campain_02.png) center top no-repeat,url(../img/bg_campain_03.png) repeat-x top center; text-align: center;}
.campain-area .inner { width: 1000px; margin: 0 auto; }
.campain-area h2 { margin-bottom: 30px;}
.campain-area .txt { margin-bottom: 8px;}
.campain-area .btn { margin-bottom: 38px; }
.campain-area .btn a:hover { opacity: 0.7;}
.campain-area .cmp-cont { margin-bottom: 62px; padding-bottom: 36px; background: url(../img/bg_campain_01.png); }
.campain-area .cmp-cont .present{ margin-bottom: 42px;}
.campain-area .cmp-cont .more { margin-bottom: 30px;}
.campain-area .cmp-cont .talk02 {margin-bottom: 18px;}
/* manga */
.manga-area { margin:0 auto; padding-bottom:50px; position:relative; z-index:2; background:url(../img/bg_manga.png) repeat center bottom; background-size:auto;}
.manga-area > .inner { width:980px; margin:0 auto; }
.manga-area .title { text-align:center; padding-top:25px; margin-bottom:10px; }


#comics-slider {
	padding: 42px 62px;
	background-color: #ff97a8;
	position:relative;
}
#comics-slider .credit { position:absolute; right:60px; bottom:12px; }

#comics-slider ul {
	width: 854px;
}


/* Slider */
.slick-slider {
		position: relative;
		display: block;
		box-sizing: border-box;
		-webkit-user-select: none;
			 -moz-user-select: none;
				-ms-user-select: none;
						user-select: none;
		-webkit-touch-callout: none;
		-khtml-user-select: none;
		-ms-touch-action: pan-y;
				touch-action: pan-y;
		-webkit-tap-highlight-color: transparent;
}

.slick-list {
		position: relative;
		display: block;
		overflow: hidden;
		margin: 0;
		padding: 0;
}
.slick-list:focus {
		outline: none;
}
.slick-list.dragging {
		cursor: pointer;
		cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
		-webkit-transform: translate3d(0, 0, 0);
			 -moz-transform: translate3d(0, 0, 0);
				-ms-transform: translate3d(0, 0, 0);
				 -o-transform: translate3d(0, 0, 0);
						transform: translate3d(0, 0, 0);
}

.slick-track {
		position: relative;
		top: 0;
		left: 0;
		display: block;
}
.slick-track:before,
.slick-track:after {
		display: table;
		content: '';
}
.slick-track:after {
		clear: both;
}
.slick-loading .slick-track {
		visibility: hidden;
}

.slick-slide {
		display: none;
		float: left;
		height: 100%;
		min-height: 1px;
}
[dir='rtl'] .slick-slide {
		float: right;
}
.slick-slide img {
		display: block;
}
.slick-slide.slick-loading img {
		display: none;
}
.slick-slide.dragging img {
		pointer-events: none;
}
.slick-initialized .slick-slide {
		display: block;
}
.slick-loading .slick-slide {
		visibility: hidden;
}
.slick-vertical .slick-slide {
		display: block;
		height: auto;
		border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
		display: none;
}

.slick-arrow {
	position: absolute;
	top: 0;
	border: none;
	width: 40px;
	height: 643px;
	background: none;
	font-size: 0;
	outline: none;
	cursor: pointer;
}
.slick-prev {
	right: -40px;
	background: url(../img/comics-viewer-bt02.png) center right no-repeat;
}
.slick-next {
	left: -40px;
	background: url(../img/comics-viewer-bt01.png) center left no-repeat;
}
.slick-disabled {
	opacity: 0.2;
}


/* costume */
.costume-area { margin:0 auto; padding-bottom:50px; position:relative; z-index:2; background:url(../img/bg_costume.png) repeat center bottom;}
.costume-area > .inner { width:980px; margin:0 auto; }
.costume-area .title { text-align:center; padding-top:5px; margin-bottom:42px; }
.costume-area .costume-list ul { margin-bottom:0px; width:940px; margin:0 auto; }
.costume-area .costume-list li { float:left; margin-left:25px; margin-bottom:35px; }
.costume-area .costume-list li:nth-child(2n+1) { margin-left:0px; }

/* bonus */
.bonus-area { margin:0 auto; padding-bottom:50px; position:relative; z-index:2; background:url(../img/bg_bonus01.png) repeat center bottom; min-height:680px; }
.bonus-area > .inner { width:1000px; margin:0 auto; }
.bonus-area .title { text-align:center; padding-top:5px; margin-bottom:42px; }
.bonus-area .store-list { position: relative;}
.bonus-area .store-list:before { content:""; display:block; width:986px; height:1000px; position:absolute; right: 128px; bottom:-81px; transform:translateX(-50%); margin-left:250px; background:url(../img/bg_bonus02.png) no-repeat center; z-index:-1; background-position: top 70% right 0%;  }
.bonus-area .store-list:after { content:""; display:block; width:736px; height:1000px; position:absolute; left: 882px; bottom:-81px; transform:translateX(-50%); margin-left:250px; background:url(../img/bg_bonus03.png) no-repeat center; z-index:-1; background-position: top 70% right 0%;  }
.bonus-area ul { font-size: 0; text-align: center;}
.bonus-area .item { display: inline-block;}
.bonus-area .item { margin-right: 10px; margin-bottom: 10px;}
.bonus-area .item a:hover { opacity:0.7; }


/* store */
.store-area { margin:0 auto; padding-bottom:50px; position:relative; z-index:2; background:url(../img/bg_store01.png) repeat center bottom; }
.store-area > .inner { width:980px; margin:0 auto; }
.store-area .title { text-align:center; padding-top:5px; margin-bottom:42px; }
.store-area .store-list ul { margin-bottom:0px;}
.store-area .store-list li { float:left; margin-left:40px; margin-bottom:10px; }
.store-area .store-list li:nth-child(2n+1) { margin-left:0px; }


/* story */
.story-area { margin:0 auto; padding-bottom:50px; position:relative; z-index:2; background:url(../img/bg_story.png) no-repeat center bottom; background-size:cover; min-height:857px; }
.story-area > .inner { width:980px; margin:0 auto; }
.story-area .title { text-align:center; padding-top:5px; margin-bottom:42px; }

/* character */
.character-area { margin:0 auto; padding-bottom:50px; position:relative; z-index:2; background:url(../img/bg_character02.png) no-repeat center 120px, url(../img/bg_character01.png) repeat center bottom; min-height:1470px; }
.character-area > .inner { width:980px; margin:0 auto; position:relative; }
.character-area > .inner:after { content:""; display:block; width:907px; height:1002px; position:absolute; left:45px; top:220px; background:url(../img/img_character00.png) no-repeat center top;  }
.character-area .title { text-align:center; padding-top:5px; margin-bottom:42px; }
.character-area .character-list ul {}
.character-area .character-list li {}
.character-area .character-list li:nth-child(1) { position:absolute; left:33px; top:218px; width:463px; }
.character-area .character-list li:nth-child(2) { position:absolute; left:500px; top:208px; width:465px; }
.character-area .character-list li:nth-child(3) { position:absolute; left:30px; top:744px; width:235px; }
.character-area .character-list li:nth-child(4) { position:absolute; left:265px; top:748px; width:223px; }
.character-area .character-list li:nth-child(5) { position:absolute; left:504px; top:784px; width:217px; }
.character-area .character-list li:nth-child(6) { position:absolute; left:737px; top:744px; width:217px; }

.information-area { margin:0 auto 0; padding:45px 20px; position:relative; background-color: #fff; z-index:2; background: url(../img/bg_information.png) repeat center bottom; }
.information-area > .inner { width:960px; margin:0 auto; }
.information-area .title { text-align:center; margin-bottom:35px; }
.information-area p { line-height:180%; }
.book-box { position: relative; margin-bottom:50px; }
.book-box .box-left { float:left; width:272px; }
.book-box .box-right { float:right; width:625px; }
.book-box .thumb { position:relative; }
.book-box .release { position:absolute; top: 0; right: 0; }
.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:20px; 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:30px; }
.book-box .btns .trial { display:inline-block; }