@charset "utf-8";

/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: bottom;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
*, *:before, *:after {
box-sizing: border-box;
}
a{
  outline: none;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
body {
  margin: 0px;
  padding: 0px;
  font-family: 'メイリオ',Meiryo,'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','ＭＳ Ｐゴシック',sans-serif;
  line-height: 1.4;
  overflow-y: scroll;
}
button{
  outline: none;
}
/* Firefox */
button::-moz-focus-inner {
  border: 0;
}

#wrapper{
  min-width: 1000px;
  overflow: hidden;
}

.inner{
  width: 1000px;
  margin:0 auto;
}

a{
  cursor: pointer;
}

/*============
header
============*/
header{
  background: url("../images/header-bg.jpg")no-repeat top center;
}

header .inner{
  background: url("../images/header-inner-bg.jpg") no-repeat top center;
  height: 975px;
  position: relative;
}

header .inner h1{
  position: absolute;
  top: 0px;
  left: 37px;
}

header .inner .movie {
  top: 269px;
  left: 34px;
  width: 342px;
  height: 194px;
  padding:3px;
	position: absolute;
  background: url("../images/movie-bg.jpg") no-repeat top center;
}

header .inner .movie::before {
    content: '';
    background: url("../images/movie-top-left.png") no-repeat top center;
    width: 20px;
    height: 21px;
    position: absolute;
    top: 0;
    left: 0;
}

header .inner .movie::after {
    content: '';
    background: url("../images/movie-bottom-right.png") no-repeat top center;
    width: 20px;
    height: 21px;
    position: absolute;
    bottom: 0;
    right: 0;
}

header .inner h2{
  position: absolute;
  bottom: 70px;
  right: -132px;
}

header .inner .catch{
  position: absolute;
  top: 273px;
  left: 415px;
}

header .inner .balloon{
  position: absolute;
  top: 351px;
  right: 9px;
}
header .inner .entry {
  position: absolute;
  top: 484px;
  left: 19px;
}
header .inner .openID {
  position: absolute;
  top: 551px;
  left: 218px;
}

header .inner ul{
  display: flex;
  position: absolute;
  top: 810px;
  left: -52px;
}

/*============
about
============*/
#about{
  background: url("../images/about-bg.jpg") no-repeat top;
}

#about .inner{
  background: url("../images/about-inner-bg.jpg") no-repeat top;
  height: 999px;
  padding-top: 0px;
}

#about .inner h2{
  margin:0 0 11px -7px;
}

#about .inner .js-tab{
  display: flex;
  justify-content: center;
}

#about .inner .js-tab li{
  margin-right: 6px;
}

#about .inner .js-tab li:last-of-type{
  margin-right: 0;
}

#about .inner .js-tab_content {
  display:none;
  height: 716px;
  padding-top: 43px;
  position: relative;
}

#about .inner .js-tab_content.active {
  display:block;
}


/*星界神話とは？*/
#about .inner .js-tab_content.about-seikaishinwa{
  background: url("../images/about-seikaishinwa-bg.png") no-repeat top center;
}

#about .inner .js-tab_content.about-seikaishinwa h3{
  margin:0 0 0 14px;
}
#about .inner .js-tab_content.about-seikaishinwa p:nth-of-type(1){
  margin:0 0 76px 37px;
}
#about .inner .js-tab_content.about-seikaishinwa p:nth-of-type(2){
  margin-left: 353px;
}

#about .inner .js-tab_content.about-seikaishinwa .about-movie{
  background: url("../images/about-movie-bg.png") no-repeat top center;
  width: 362px;
  height: 217px;
  position: absolute;
  top: 446px;
  right: 1px;
  padding: 13px;
}

#about .inner .js-tab_content.about-seikaishinwa .about-movie::before {
  content: '';
  background: url("../images/about-movie-top-left.png") no-repeat top center;
  width: 20px;
  height: 21px;
  position: absolute;
  top: 10px;
  left: 10px;
}

#about .inner .js-tab_content.about-seikaishinwa .about-movie::after {
  content: '';
  background: url("../images/about-movie-bottom-right.png") no-repeat top center;
  width: 20px;
  height: 21px;
  position: absolute;
  bottom: 10px;
  right: 10px;
}

/*クロスジョブ*/
#about .inner .js-tab_content.about-job p,
#about .inner .js-tab_content.about-job ul li{
  position: absolute;
}
#about .inner .js-tab_content.about-job .job-txt {
  top: 314px;
  left: 178px;
  z-index: 20;
}
#about .inner .js-tab_content.about-job .job-ss01 {
  top: 150px;
  left: 0;
  z-index: 1;
}
#about .inner .js-tab_content.about-job .job-ss02 {
  top: 150px;
  left: 106px;
  z-index: 1;
}
#about .inner .js-tab_content.about-job .job-ss03 {
  top: 131px;
  left: 258px;
  z-index: 2;
}
#about .inner .js-tab_content.about-job .job-ss04 {
  top: 147px;
  left: 412px;
  z-index: 3;
}
#about .inner .js-tab_content.about-job .job-ss05 {
  top: 139px;
  right: 284px;
  z-index: 1;
}
#about .inner .js-tab_content.about-job .job-ss06 {
  top: 90px;
  right: 160px;
  z-index: 1;
}
#about .inner .js-tab_content.about-job .job-ss07 {
  top: 150px;
  right: -16px;
  z-index: 2;
}
#about .inner .js-tab_content.about-job .job-ss08 {
  top: 406px;
  left: -22px;
  z-index: 1;
}
#about .inner .js-tab_content.about-job .job-ss09 {
  top: 408px;
  left: 162px;
  z-index: 2;
}
#about .inner .js-tab_content.about-job .job-ss10 {
  top: 381px;
  left: 257px;
  z-index: 1;
}
#about .inner .js-tab_content.about-job .job-ss11 {
  top: 437px;
  right: 353px;
  z-index: 2;
}
#about .inner .js-tab_content.about-job .job-ss12 {
  top: 421px;
  right: 259px;
  z-index: 2;
}
#about .inner .js-tab_content.about-job .job-ss13 {
  top: 408px;
  right: 95px;
  z-index: 1;
}
#about .inner .js-tab_content.about-job .job-ss14 {
  top: 390px;
  right: -10px;
  z-index: 1;
}

/*ハウジング*/
#about .inner .js-tab_content.about-housing{
  background: url("../images/about-housing-bg.png") no-repeat top center;
}

#about .inner .js-tab_content.about-housing p,
#about .inner .js-tab_content.about-housing ul li
{
  position: absolute;
}

#about .inner .js-tab_content.about-housing > p:nth-of-type(1){
  top: 136px;
  left: 14px;
}
#about .inner .js-tab_content.about-housing > p:nth-of-type(2){
  top: 301px;
  left:258px;
}
#about .inner .js-tab_content.about-housing > p:nth-of-type(3){
  top: 150px;
  left:453px;
}
#about .inner .js-tab_content.about-housing > p:nth-of-type(4){
  top: 373px;
  left: 69px;
}
#about .inner .js-tab_content.about-housing div p{
  top: 126px;
  right: 12px;
}
#about .inner .js-tab_content.about-housing div ul li:nth-of-type(1){
  top:121px;
  right: 39px;
}
#about .inner .js-tab_content.about-housing div ul li:nth-of-type(2){
  top: 345px;
  right: 1px;
}
#about .inner .js-tab_content.about-housing div ul li:nth-of-type(3){
  top: 486px;
  right: 41px;
}


/*============
partner
============*/

.about-bottom{
  background: url(../images/about-bottom.jpg) no-repeat top center;
  height: 132px;
}

#partner .inner{
  background: url("../images/partner-inner-bg.jpg") no-repeat top center;
  height: 819px;
  position: relative;
}

#partner{
  background: url("../images/partner-bg.jpg")no-repeat top center;
}


#partner .inner h2{
  position: absolute;
  left: -7px;
  z-index: 2;
}

#partner .inner h3{
  padding:173px 0 0 0;
  margin:0 0 27px 5px;
}
/*タブ周り*/
#partner .inner .partner-tab{
  display: flex;
  flex-wrap: wrap;
  width: 434px;
  margin-left:19px;
  position: relative;
  z-index: 2;
}

#partner .inner .partner-tab li{
  margin:0 10px 10px 0;
  position: relative;
}

#partner .inner .partner-tab li:nth-of-type(3n){
  margin-right:0;
}

#partner .inner .partner-tab li span{
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 2;
}

#partner .inner .partner-tab li.active a img{
  visibility: hidden;
}
/*コンテンツ周り*/
#partner .inner .partner-content {
  position: absolute;
  top: 0;
  left:0;
  width: 1000px;
}

#partner .inner .partner-content.active {
  display:block;
}

#partner .inner .partner-content p,
#partner .inner .partner-content div{
  position: absolute;
}

#partner .inner .partner-content .name{
  left: 0;
  background:url("../images/name-bg.png") no-repeat top center;
  width: 499px;
  height: 145px;
  opacity: 1;
}

#partner .inner .partner-content .name a{
  display: block;
  position: absolute;
  top: 101px;
  right: 44px;
  z-index: 2;
  pointer-events: none;
}

#partner .inner .partner-content.active .name a{
  pointer-events: auto;
}



#partner .inner .partner-content .partner-movie{
  display: none;
}

#partner .inner .partner-content.active .partner-movie{
  display: block;
  z-index: 99;
  background:url("../images/partner-movie-bg.jpg");
  width: 257px;
  height: 146px;
  padding: 3px;
  top: 652px;
  right: 27px;
}

#partner .inner .partner-content.active .partner-movie::before {
    content: '';
    background: url("../images/partner-movie-top-left.png") no-repeat top center;
    width: 16px;
    height: 17px;
    position: absolute;
    top: 0;
    left: 0;
}

#partner .inner .partner-content.active .partner-movie::after {
    content: '';
    background: url("../images/partner-movie-bottom-right.png") no-repeat top center;
    width: 16px;
    height: 17px;
    position: absolute;
    bottom: 0;
    right: 0;
}


/*共通アニメーション*/

#partner .inner .partner-content .balloon{
  transition: all 0.6s ease;
  transition-delay: 0.8s;
  opacity: 0;
}

#partner .inner .partner-content.active .balloon{
  opacity: 1;
}

#partner .inner .partner-content .name{
  transition: all 0.5s ease;
  transition-delay: 1.1s;
  opacity: 0;
  top: 649px;
}

#partner .inner .partner-content.active .name{
  top: 629px;
  opacity: 1;
}

/*ベル*/
#partner .inner .partner-tab .partner_01.active{
  background:url(../images/partner-thum_01_on.png);
}

#partner .inner .partner-content.partner_01 .ss{
  top: 167px;
  left: 483px;
}

#partner .inner .partner-content.partner_01 .balloon{
  top: 272px;
  right: 62px;
}

#partner .inner .partner-content.partner_01.active .balloon{
  top: 252px;
}

/*メイプル*/
#partner .inner .partner-tab .partner_02.active{
  background:url(../images/partner-thum_02_on.png);
}

#partner .inner .partner-content.partner_02 .ss{
  top: 30px;
  right: 0px;
}

#partner .inner .partner-content.partner_02 .balloon{
  top: 220px;
  right: 35px;
}
#partner .inner .partner-content.partner_02.active .balloon{
  top: 200px;
}

/*アイフロート*/
#partner .inner .partner-tab .partner_03.active{
  background:url(../images/partner-thum_03_on.png);
}

#partner .inner .partner-content.partner_03 .ss{
  top: 49px;
  left: 190px;
}

#partner .inner .partner-content.partner_03 .balloon{
  top: 290px;
  right: 13px;
}

#partner .inner .partner-content.partner_03.active .balloon{
  top: 270px;
}

/*凛*/
#partner .inner .partner-tab .partner_04.active{
  background:url(../images/partner-thum_04_on.png);
}

#partner .inner .partner-content.partner_04 .ss{
  top: 143px;
  right: -86px;
}

#partner .inner .partner-content.partner_04 .balloon{
  top: 293px;
  right: 62px;
}

#partner .inner .partner-content.partner_04.active .balloon{
  top: 273px;
}

#partner .inner .partner-content.partner_04 .partner-img{
  top: 603px;
  right: 26px;
}


/*ルナ*/
#partner .inner .partner-tab .partner_05.active{
  background:url(../images/partner-thum_05_on.png);
}

#partner .inner .partner-content.partner_05 .ss{
  top: 150px;
  right: 40px;
}

#partner .inner .partner-content.partner_05 .balloon{
  top: 260px;
  right: 30px;
}

#partner .inner .partner-content.partner_05.active .balloon{
  top: 240px;
　right: 30px;
}

/*ユイ*/
#partner .inner .partner-tab .partner_06.active{
  background:url(../images/partner-thum_06_on.png);
}

#partner .inner .partner-content.partner_06 .ss{
  top: 128px;
  right: -105px;
}

#partner .inner .partner-content.partner_06 .balloon{
  top: 230px;
  right: 50px;
}

#partner .inner .partner-content.partner_06.active .balloon{
  top: 210px;
}





/*============
cp
============*/
#cp{
  background: url("../images/cp-bg.jpg") no-repeat fixed;
}


#cp .partner-bottom{
  background: url(../images/partner-bottom.png) no-repeat top center;
  height: 140px;
}


#cp .cp-chara-bg{
  background:url("../images/cp-chara-bg.png") no-repeat bottom center;
}
#cp .inner {
  padding-bottom: 78px;
}
#cp .inner h2{
  margin: -16px 0 13px 12px;
}

#cp .inner p{
  margin:0 0 29px 14px;
}
#cp .inner ul{
  margin-left: 243px;
}
#cp .footer-top{
  background: url("../images/footer-top.png") no-repeat top center;
  height: 25px;
}

/*============
footer
============*/
footer{
  background:url("../images/footer-bg.jpg") repeat top left;
  position: relative;
}
footer .footer-top{
  background: url("../images/footer-top.png") no-repeat top center;
  width: 100%;
  height: 25px;
  position: absolute;
  top: -19px;
}

footer .inner{
  padding-top: 15px;
}

footer .inner ul{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 1000px;
  margin-bottom:11px;
}

footer .inner ul li{
  margin:0 11px 7px 0; 
}
footer .inner ul li:nth-of-type(2n){
  margin-right:0;
}
footer .inner ul li:last-of-type{
  margin:0;
}

footer .footer-area {
  min-height: 310px;
  background: rgba(255,255,255,0.55);
}
footer .footer-area p {
  text-align: center;
  padding-top: 30px;
  color: #743620;  
  font-size: 11px;  
}
footer .footer-area p a {
  color: #743620;  
}
footer .footer-area small {
  color: #743620;
  text-align: center;
  padding: 10px 0;
  font-size: 11px;
  display: block;
  margin-bottom: 13px;
}
footer .footer-area .logo-xlegend {
  text-align: center;
}

footer .footer-area .footer-chara{
  background: url(../images/footer-chara.png) no-repeat top center;
  height: 220px;
  margin-top: -39px;
}

/*============
#cp_area
============*/
#cp_area {
  position: fixed !important;
  position: absolute;
  bottom: 50px;
  right: 0;
  width: 118px;
  height: 370px;
  z-index: 50;  
}