@charset "UTF-8";
/*----------------------------------------------PC用ページ用設定*/
/*表示非表示*/
.pc {
  display: block;
}

.sp {
  display: none;
}

/* CSS Document */
/* 基本情報 */
@keyframes bodyFadeIn {
 0% {
opacity: 0
}
 100% {
opacity: 1
}
}
 @-webkit-keyframes bodyFadeIn {
 0% {
opacity: 0
}
 100% {
opacity: 1
}
}

.end {    padding-top: 36px;

  font-size: 24px;
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-style: normal;
  text-align: center;
  color: #bf0a0a;
}

#page-top {
position: fixed;
bottom: 20px;
right: 40px;
z-index: 99;
}

a.btn_close {
width: 32px;
cursor: pointer;
text-align:right;
}
a.btn_close img {width:7%;}
img {
	max-width: 100%;
	height: auto;
}
body {
	animation: bodyFadeIn 2s ease 0s 1 normal;
	-webkit-animation: bodyFadeIn 2s ease 0s 1 normal;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}

body {
	display: block;
	z-index: -1;
	width: 100%;
    background:#f4efdd;
}
ol, ul {
	list-style: none;
	list-style-type: none;
}
a:hover img {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: “alpha( opacity=80 )”;
}
.imgPC {
	display: block;
}
.imgSP {
	display: none;
}
.fadein {
	opacity : 0;
	transform : translate(0, 50px);
	transition : all 300ms;
}
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}
#nav1 ul{width:816px; display:flex; flex-wrap: nowrap; position:absolute; z-index:10;left:50%; top:700px;
transform: translate(-50%, 0);
}
#nav1 .btn1{margin:0 -8px 0;}
#nav1 .btn2{margin:20px -8px 0;}
#nav1 .btn3{margin:40px -8px 0;}
#nav1 .btn4{margin:40px -8px 0;}
#nav1 .btn5{margin:20px -8px 0;}
#nav1 .btn6{margin:0 -8px 0;}

.animated:hover {
    animation-name: rubberBand;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
.animated2:hover {
    animation-name: pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.ryumin {
font-family: a-otf-ryumin-pr6n, serif;
font-style: normal;
}
.ryuminB {
font-family: a-otf-ryumin-pr6n, serif;
font-weight: bold;
font-style: normal;
}

#wrapper{
	width:1200px;
    margin:0 auto;
	background: url("../../_img/bg.jpg") center top;
    position: relative;
}

/* ヘッダーロゴ部分 */
header#top{
	width: 100%; height:838px; 	background: url("../../_img/bg_top.jpg") center top; position:relative; margin:0 auto; z-index:1;
}
header#top h1 {font-size: 0;}
header#top img{width:100%;}
header#top #logo1 {
    width:15.5%; position: absolute; left:41.5%; top:14%; z-index:4;}
header#top #neko1 {
    width:42%; position: absolute; left:5%; top:3%; z-index:1;}
header#top #neko2 {
    width:30%; position: absolute; right:13%; top:13%; z-index:1;}
header#top #neko3 {
    width:28%; position: absolute; left:8%; top:34%; z-index:1;}
header#top #neko4 {
    width:25%; position: absolute; right:10%; top:45%; z-index:1;}
header#top #text1 {
    width:60%; position: absolute; left:36%; top:2%; z-index:1;}
header#top #btnCampaign{width:28%; position: absolute; left:20%; top:47%; z-index:8;}


/* 最新ニュース部分 */
section#news {width:880px; margin:150px auto 0;}
section#news h2{font-size:0; width:130px; height:150px; text-align:center;background: url('../../_img/h2_news.png') center top no-repeat;}

section#news span{margin-right:1em;}

section#news dt{float:left;}
section#news dd{margin-left:150px;padding-top:15px;}

section#news ul.newsList{font-size:15px;}
section#news ul.newsList li{border-bottom:1px solid #dcd0b9;padding:10px 0;}
section#news ul.newsList li:last-child{border:none;}
section#news ul.newsList li a{color:#000; text-decoration: none;}
section#news ul.newsList li a:hover{color:#666; text-decoration: none;}

/* 試し読み部分 */
section#readTop {width:880px; margin:90px auto 30px;}

section#readTop .readPict{width:589px;height:577px; background: url('../../_img/shoei_read.png') center top no-repeat;margin:0px auto; position:relative;}
section#readTop .readPict .readBtn{width:212px; position:absolute;right:30px;top:355px;}
.buyBtn{width:517px; margin:-40px auto 0;}


/* あらすじ部分 */
section#arasuji {width:1200px; height:797px; margin:0px auto 0; background: url('../../_img/arasuji_bg.jpg');position:relative;}

/* キャラクター紹介部分 */
section#chara {width:1200px; margin:0px auto 0;background: url('../../_img/bg_nami.jpg');padding-bottom:60px;
background-position: center bottom; 
background-repeat: no-repeat;}
section#chara ul.charaList{width:850px; margin: 0 auto; display:flex; flex-wrap: wrap;align-items: flex-end;}
section#chara ul.charaList li{width:33.3%;margin-bottom:22px;}
section#chara ul.charaList li div{margin-left:30px;}

/* 年表部分 */
section#nenpyou {width:1200px; margin:0px auto ; padding-bottom:100px; background: url('../../_img/bg_nenpyou.jpg');position:relative;}

section#nenpyou #scroll{width:900px; margin:0 auto;}

section#nenpyou #scroll:before{content: ''; display: inline-block;
  width: 900px; height: 150px;
  background-image: url('../../_img/scroll_header.png');
  background-size: contain;
  vertical-align: middle;}

section#nenpyou #scroll:after{content: ''; display: inline-block;
  width: 900px; height: 65px;
  background-image: url('../../_img/scroll_footer.png');
  background-size: contain;
  vertical-align: middle;}

section#nenpyou .chara1{position:absolute;bottom:-150px;left:-140px;}
section#nenpyou .chara2{position:absolute;bottom:-150px;right:-140px;}

section#nenpyou #scroll .inner{width:900px; padding:0 50px; background: url('../../_img/scroll_bg.png')center top repeat-y;position:relative;}
section#nenpyou h2{font-size:0; width:130px; height:150px; text-align:center;background: url('../../_img/h2_nenpyou.png') center top no-repeat;}

section#nenpyou dl#saisyo dt{width:120px; float:left;}
section#nenpyou dl#saisyo dd{margin-left:150px;padding-top:20px;}

#nenpyouText ul.items {
		-weblit-flex: 1;
		flex: 1;
		font-size: 14px;
	}
#nenpyouText ul.items li {
		display: -webkit-flex;
		display: flex;
		margin-bottom: 10px;
        letter-spacing: 0.05em;
	}
#nenpyouText  ul.items li .date {
        width:80px;
    		font-size: 12px;
		margin-right: 16px;
	}
#nenpyouText  ul.items li .txt {
		-weblit-flex: 1;
		flex: 1;
	}



section#nenpyou .redBase{background:#bf0a0a;padding:5px; text-align:center;color:#FFF;margin-bottom:15px;}
section#nenpyou .bkBase{background:#000;padding:5px; text-align:center;color:#FFF;margin-bottom:15px;}
section#nenpyou dl#nenpyouText {width:800px; margin:0 auto; border-collapse: collapse; margin:0px; }
section#nenpyou dl#nenpyouText dt{padding:10px; width:60%;text-align: left;float:left; }
section#nenpyou dl#nenpyouText dd{padding:10px; width:40%;margin-left:60%;}

section#nenpyou .mgTop160{margin-top:160px;}
section#nenpyou .mgTop180{margin-top:180px;}

/*動画部分 */
section#movie {width:1200px; margin:0px auto 0; position: relative;padding-top:150px;}
section#movie h2{font-size:0; width:130px; height:150px;margin:0 auto; text-align:center;background: url('../../_img/h2_movie.png') center top no-repeat;
position:absolute; left:0; right:0; top:-40px; }

section#movie:before{content: ''; display: inline-block;
  width: 1200px; height:85px;
  background-image: url('../../_img/movie_header.png');
  background-size: contain;
  vertical-align: middle;position:absolute;top:-85px;}

section#movie #youtube{width:850px; margin:0px auto 0;}

.footerInfo{width:861px; margin:50px auto 0;}

/*フッターの情報部分 */
section#infomation {width:1200px; margin:0px auto 0; position: relative; background: url('../../_img/bg_nami.jpg');
background-position: center bottom; 
background-repeat: no-repeat;
padding: 0 0 32px;}

section#infomation.infoTop:before{content: ''; display: inline-block;
  width: 1200px; height:97px;
  background-image: url('../../_img/bg_endline.jpg');
  background-size: contain;
  background-repeat:no-repeat;
  vertical-align: middle;position:absolute;top:-97px;}

/*他ページのヘッダー */
header#other{
	width: 100%; height:240px; 	background: url("../../_img/bg_header.png")no-repeat center top; position:relative; margin:0 auto; z-index:1;
}
header#other #logo0{position:absolute; left:100px;top:40px;}

#nav3 ul{width:700px; display:flex; flex-wrap: nowrap; position:absolute; z-index:10;left:50%; top:0px;
transform: translate(-50%, 0);
}
#nav3 ul li{width:150px; margin:0 -20px 0 0;}

/*インタビュー*/
section#interview{width:900px; background: url("../../_img/interview_visual.png")no-repeat center top; margin:0 auto;padding-bottom:100px;}
section#interview h2{font-size:0; width:130px; height:150px;margin:0 auto; text-align:center;background: url('../../_img/h2_interview.png') center top no-repeat;}

section#interview .inner{width:755px; margin:280px auto 0;font-size:17px;line-height:28px;}

section#interview h3{width:100%; text-align:center;font-size:27px; line-height:35px;margin:16px auto;}
section#read h3{font-size:21px; text-align:center; line-height:35px;margin:30px auto 0;}

section#interview h3:after{width:100%; content: ''; display: inline-block;
  width: 755px; height: 10px;
  background-image: url('../../_img/interview_border.png');
  background-size: contain;
  background-repeat:no-repeat;
  vertical-align: middle;}

section#interview .redText{color:#a30606;}
section#interview p{margin-bottom:20px;}
section#interview p.right{text-align:right;}

/*試し読み*/
section#read{width:900px; background: url("../../_img/read_visual.png")no-repeat center top; margin:0 auto;padding-bottom:100px;}
section#read h2{font-size:0; width:130px; height:150px;margin:0 auto; text-align:center;background: url('../../_img/h2_read.png') center top no-repeat;}
section#read .inner{width:755px; margin:280px auto 0;font-size:17px;line-height:28px;}

/*キャンペーン*/
section#campaign .inner{width:787px; margin:0px auto 0;font-size:17px;line-height:28px;padding-bottom:100px;}
section#campaign h3{width:787px; font-size:27px; line-height:0; margin:40px auto 10px; position:relative;}
section#campaign h3 span{display:block; position:absolute; top:20px; left:30px;}

section#campaign h3:after{width:787px; content: ''; display: inline-block;height: 10px;
  background-image: url('../../_img/interview_border.png');
  background-size: contain;
  background-repeat:repeat-x;
  vertical-align: middle;}

section#campaign h3:before{content: ''; display:inline-block; width:24px; height: 41px;margin-right:10px;
  background-image: url('../../_img/icon_burn.png');
  background-size: contain;
  background-repeat:no-repeat;
  vertical-align: middle;}

section#campaign #twitterVisual {width:792px;height:253px;  margin-bottom:60px;background: url("../../_img/campaign_twitter_bg.png")no-repeat center top;position:relative; }

section#campaign #twitterVisual .btn1{position:absolute; top:200px;left:25px;}
section#campaign #twitterVisual .btn2{position:absolute; top:200px;right:25px;}

section#campaign .present{width:600px; margin:20px auto 0;}


/* フッター */
footer {
width:1200px; margin:0px auto ; background:url('../../_img/bg_footer.jpg'); position:relative; padding:50px 0 0;
}

footer ul#footerText{
width:950px; margin:0px auto ; display: flex;flex-wrap: nowrap;font-size:15px; line-height:24px;
}
footer ul#footerText li.sec1{width:13%;margin:0 1%;}
footer ul#footerText li.sec2{width:33%;margin:0 1%;}
footer ul#footerText li.sec3{width:48%;margin:0 1%;}

footer .title{font-size:42px; line-height:47px;}
footer .profile{font-size:27px;line-height:32px;}

footer p.copy {
	font-size: 12px;
	line-height: 16px;
	text-align: center;
    color:#FFF;
    padding:10px 0;
    background:#000;
    margin-top:50px;
}

footer p.copy a {
	font-size: 12px;
	line-height: 16px;
	text-align: center;
    color:#FFF;
    padding:10px 0 10px 24px;
    text-decoration: none;
}

footer p.copy a:hover {
	text-decoration: underline;
}


/* clearfix */
.clearfix {
	zoom: 1;
}
.clearfix:after, ul:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}