﻿html {
  scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	background-color:#FEFFE1;
	background-image: url(../img/bg.png);
	display:none;
}
.content {
	width: 1280px;
	height: auto;
	margin: 0 auto;
	-moz-box-shadow: 0px 0px 10px #c48bc0;-webkit-box-shadow: 0px 0px 10px #c48bc0;box-shadow: 0px 0px 10px #c48bc0;
	top: 0px;
}
.topwrap {
	width: 1280px;
	height: 708px;
	position: relative;
	z-index: 0;
}
.title_aori{
	z-index: 0;
	position: absolute;
	top: 5px;
	left: -7px;
}
.bg{
	position: absolute;
}
.menu {
	width: 1280px;
	height: 137px;
	position: absolute;
	top: 9px;
	background-image: url(../img/BG_menu.png);
	z-index: 20;
}
.titlebox {
	width: 206px;
	height: 137px;
	position: absolute;
	left: 100px;
	background-image: url(../img/title.png);
	overflow: hidden;
}
.titlebox:hover {
	background-position: center bottom;
}
.titlebox a {
	width: 100%;
	height: 100%;
	display: block;
}
.titlebox_mini {
	width: 217px;
	height: 34px;
	position: absolute;
	left: 60px;
	top: 50px;
	background-image: url(../img/title_mini.png);
	overflow: hidden;
}
.titlebox_mini:hover {
	background-position: center bottom;
}
.titlebox_mini a {
	width: 100%;
	height: 100%;
	display: block;
}
.menubox {
	width: 687px;
	height: 49px;
	position: absolute;
	top: 28px;
	left: 285px;
	list-style: none;
	line-height: 100em;
	overflow:hidden;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.menubox a {
	width: 100%;
	height: 100%;
	display: block;
	overflow: hidden;
	line-height: 100em;
}
.menubox li:hover {
	background-position: center bottom;
}
#menu_intro {
	width: 124px;
	height: 49px;
	background-image: url(../img/menu_intro.png);
}
#menu_chara {
	width: 109px;
	height: 49px;
	background-image: url(../img/menu_chara.png);
}
#menu_gallery {
	width: 114px;
	height: 49px;
	background-image: url(../img/menu_gallery.png);
}
#menu_download {
	width: 115px;
	height: 49px;
	background-image: url(../img/menu_download.png);
}

#menu_special {
	width: 116px;
	height: 49px;
	background-image: url(../img/menu_special.png);
}
#menu_spec {
	width: 104px;
	height: 49px;
	background-image: url(../img/menu_spec.png);
}
.menu_twitter {
	width: 41px;
	height: 41px;
	background-image: url(../img/twitter.png);
	overflow: hidden;
	position: absolute;
	top: 48px;
	left: 1028px;
}
.gotoans {
	width: 110px;
	height: 41px;
	background-image: url(../img/gotoans.png);
	overflow: hidden;
	position: absolute;
	top: 48px;
	left: 1069px;
}
.gotoans a,
.menu_twitter a {
	width: 100%;
	height: 100%;
	display: block;
}
.gotoans:hover,
.menu_twitter:hover {
	background-position: center bottom;
}

.catchbox {
	width: 532px;
	height: 135px;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	top: 442px;
	z-index: 30;
}
.toptitle {
	width: 353px;
	height: 230px;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	top: 493px;
	left: 0;
	right: 0;
	z-index: 30;
}
.catchtxt1 {
	width: 43px;
	height: 42px;
	position: absolute;
	left: 339px;
	top: 11px;
}
.catchtxt2 {
	width: 38px;
	height: 35px;
	position: absolute;
	left: 369px;
	top: 22px;
}
.catchtxt3 {
	width: 45px;
	height: 38px;
	position: absolute;
	left: 394px;
	top: 27px;
}
.catchheart1 {
	width: 49px;
	height: 45px;
	position: absolute;
	left: 355px;
	top: -4px;
}
.catchheart2 {
	width: 35px;
	height: 35px;
	position: absolute;
	left: 394px;
	top: 15px;
}


.topicswrap {
	width: 1280px;
	height: auto;
	margin-top: -20px;
	position: relative;
	background-image: url(../img/BG_topics.png);
}
.diarybox {
	width: 346px;
	height: 251px;
	position: absolute;
	left: 840px;
	top: -171px;
}
.diarytitle {
	width: 189px;
	height: 95px;
	position: absolute;
	margin-top: 36px;
	top: 0;
	left: 0;
}
.diarytxt {
	width: 200px;
	height: 161px;
	position: absolute;
	left: 11px;
	top: 90px;
}
#diarymoji{
	position: absolute;
	top: 0px;
	left: 0px;
}
#topicstitle {
	width: 336px;
	height: 88px;
	background-image: url(../img/topics/topicstitle.png);
	overflow: hidden;
	line-height: 100em;
	margin: 0 auto;
	padding: 0;
}
.topsales{
	position: absolute;
	margin: 513px auto auto 186px;
	z-index: 31;
	top: 140px;
	left: 180px;
}
.topyoyaku{
	position: absolute;
	margin: 420px auto auto 85px;
	z-index: 31;
	top: 170px;
	left: 90px;
}
.topicsbox {
	width: 847px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.topicsbox a {
	margin-bottom: 7px;
}

.topicsbox a:hover{
	opacity: 0.5;
}

.topicsminbox {
	width: 858px;
	height: 72px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.topicsminbox a {
	margin-bottom: 7px;
}

.topicsminbox a:hover{
	opacity: 0.5;
}

/*=======================================
■更新履歴
=======================================*/
.newswrap {
	width: 1280px;
	height: 328px;
	margin-top: 20px;
	background-image: url(../img/BG_news.png);
	border-top: 1px solid #FFF;
}
.newsbox {
	width: 450px;
	height: 170px;
	overflow-y: auto;
	overflow-x: hidden;
	margin-left: 250px;
	margin-top: 105px;
	float: left;
}
.newsbox p{
	font-size:12px;
	color:#4c1826;
}

.date{
	font-size: 12px;
	width: 150px;
}

.newsdetail{
	font-size: 14px;
	font-weight: bold;
	margin-left: 10px;
	width: 350px;
}







.tweetbox {
	width: 333px;
	height: 200px;
	margin-left: 50px;
	margin-top: 75px;
	float: left;
}

.introwrap {
	width: 1280px;
	height: 844px;
	position: relative;
}

#introtitle {
	width: 336px;
	height: 88px;
	position: absolute;
	background-image: url(../img/intro/title.png);
	overflow: hidden;
	line-height: 100em;
	left: 0;
	right: 0;
	margin: 30px auto 0 auto;
	padding: 0;
}
.storywrap {
	width: 1280px;
	height: 719px;
	top: 125px;
	position: relative;
	background-image: url(../img/intro/BG_story.png);
	text-align: center;
}
.storywrap div {
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	position: absolute;
}
.storybox1 {
	width: 528px;
	height: 60px;
	top: 95px;
}
.storybox2 {
	width: 281px;
	height: 34px;
	top: 168px;
}
.storybox3 {
	width: 482px;
	height: 72px;
	top: 216px;
}
.storybox4 {
	width: 224px;
	height: 29px;
	top: 304px;
}
.storybox5 {
	width: 510px;
	height: 50px;
	top: 349px;
}
.storybox6 {
	width: 396px;
	height: 29px;
	top: 415px;
}
.storybox7 {
	width: 521px;
	height: 116px;
	top: 461px;
}
.storybox8 {
	width: 456px;
	height: 50px;
	top: 593px;
}
.storybox9 {
	width: 575px;
	height: 33px;
	top: 653px;
}


.pointwrap {
	width: 1280px;
	height: 1625px;
	position: relative;
	background-image: url(../img/point/BG_point.png);
}

.pointmidashi {
	width: 550px;
	height: 88px;
	position: absolute;
	top: 103px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}
.pointbox1 {
	width: 739px;
	height: 294px;
	position: absolute;
	top: 178px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}
.pointbox2 {
	width: 739px;
	height: 479px;
	position: absolute;
	top: 425px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}
.pointbox3 {
	width: 739px;
	height: 460px;
	position: absolute;
	top: 1154px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}
.pointheart1 {
	width: 234px;
	height: 261px;
	position: absolute;
	top: 1157px;
	left: 100px;
}
.pointheart2 {
	width: 224px;
	height: 200px;
	position: absolute;
	top: 1402px;
	left: 100px;
}
.pointheart3 {
	width: 241px;
	height: 300px;
	position: absolute;
	top: 1203px;
	left: 951px;
}
.pointSDwrap{
	position: absolute; margin-top: 810px; width: 1280px;
}
.sdbox{
	position: absolute; width: 313px; height: 316px;
}
.charagallwrap {
	width: 1280px;
	height: 591px;
	background-image: url(../img/chara/topBG.png);
	position: relative;
}
.entchara {
	width: 446px;
	height: 446px;
	background-image: url(../img/chara/ent_chara.png);
	position: absolute;
	top: 41px;
	left: 117px;
}
.entgallery {
	width: 446px;
	height: 446px;
	background-image: url(../img/gallery/ent_gallery.png);
	position: absolute;
	top: 112px;
	left: 715px;
}
.entchara a,
.entgallery a {
	width: 100%;
	height: 100%;
	display: block;
}
.entchara:hover,
.entgallery:hover {
	background-position: center bottom;
}
.arrowchara {
	width: 356px;
	height: 106px;
	position: absolute;
	top: 55px;
	left: 491px;
}
.arrowgallery {
	width: 355px;
	height: 59px;
	position: absolute;
	top: 481px;
	left: 477px;
}




/*=======================================
■後から出てくるナビ設定
=======================================*/
#topNav {
	position: fixed;
	top: 0px;
	z-index: 1001;
	overflow: hidden;
	width: 100%;
	height: 125px;
	text-align: center;
}

#scrole_menu{
	position:relative;
	width: 1280px;
	height: 94px;
	top: -40px;
	background-image: url(../img/BG_menu.png);
	text-align: center;
	margin: 0px auto;
	-moz-box-shadow: 0px 0px 10px #c48bc0;
	-webkit-box-shadow: 0px 0px 10px #c48bc0;
	box-shadow: 0px 0px 10px #c48bc0;
}

.top_footer{
	position: absolute;
	margin: auto auto 0px auto;
	bottom: 0px;
	width: 1280px;
	height: 68px;
	background-image: url(../img/BG_footer.png);
}


/*=======================================
■TOPページメインイラスト
=======================================*/
.illust{
	position: absolute;
	top: 20px;
	margin: 0 auto;
}
#top_chara1,#top_chara2,#top_chara3,#top_chara4,#top_chara5,#top_chara1h,#top_chara2h,#top_chara3h,#top_chara4h,#top_chara5h{
	position: absolute;
	top: 20px;
	margin: 0 auto;
}

/*=======================================
■ページのトップに戻る
=======================================*/
#gototop_bottom {
	position: fixed;
	bottom: 95px;
	right: 5px;
}




/*=======================================
■common2
=======================================*/
.specwrap {
	width: 1280px;
	height: 1749px;
	position: relative;
	border-top: 1px solid #FFF;
}

.infotable {
	text-align: left;
	width: 538px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 70px;
	font-size: 9pt;
	color: #693912;
}
.stafftable {
	text-align: left;
	width: 538px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 70px;
	font-size: 9pt;
	color: #693912;
}
.spectable {
	text-align: left;
	width: 538px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 70px;
	font-size: 9pt;
	color: #693912;
}
.td01 {
	width: 112px;
	height: 20px;
	font-weight: bold;
	background-image: url(../img/spec/BG_td01.png);
	background-repeat: no-repeat;
	background-position: left bottom;
}
.td02 {
	width: 425px;
	background-image: url(../img/spec/BG_td02.png);
	background-repeat: no-repeat;
	background-position: left bottom;
}

.downloadwrap .td01 {
	width: 162px;
	height: 20px;
	font-weight: bold;
	background-image: url(../img/spec/BG_td01a.png);
	background-repeat: no-repeat;
	background-position: left bottom;
}
.downloadwrap .td02 {
	width: 375px;
	background-image: url(../img/spec/BG_td02.png);
	background-repeat: no-repeat;
	background-position: left bottom;
}
.specwrap h1 {
	width: 336px;
	height: 90px;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	top: 50px;
	left: 0;
	right: 0;
	background-image: url(../img/spec/h1.png);
	overflow: hidden;
	line-height: 110em;
}

.RTwrap {
	width: 1280px;
	height: 4116px;
	position: relative;
}
