@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);


/******************************

  1. public
  2. index
  3. lower
  4. prologue
  5. make
  6. enjoy
  7. creator
  8. 
  
******************************/


/***  1. public
*******************************************/

html { overflow: auto; font-size: 62.5%; /* =10px */ }

body {
	background-color: #FFFFFF;
	color: #000000;
	font-size: 14px; /* not rem =14px */
	font-size: 1.4rem; /* =14px */
	font-family: "Noto Sans Japanese","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", YuGothic, '游ゴシック',"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  line-height:1;
  overflow: hidden;
  text-align: center;
  min-width:960px;
}

a:link { color: #0000FF; }
a:visited { color: #663399; }
a:hover { text-decoration: underline; color: #FF0000; }
a:focus {outline:none;}

img {
  vertical-align:bottom;
}

/* loading */

#loading {
  background: #86c95a;
  bottom: 0;
  height: 100%;
  left: 0;
  margin: auto;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 9999;
}

.sk-chasing-dots {
  margin: 40px auto;
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  -webkit-animation: sk-chasingDotsRotate 2s infinite linear;
  animation: sk-chasingDotsRotate 2s infinite linear;
 }

.sk-chasing-dots .sk-child {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: #ffe23f;
  border-radius: 100%;
  -webkit-animation: sk-chasingDotsBounce 2s infinite ease-in-out;
  animation: sk-chasingDotsBounce 2s infinite ease-in-out;
}
.sk-chasing-dots .sk-dot2 {
  top: auto;
  bottom: 0;
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

@-webkit-keyframes sk-chasingDotsRotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes sk-chasingDotsRotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes sk-chasingDotsBounce {
  0%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes sk-chasingDotsBounce {
  0%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

#loading > div {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}

/* common */

#wrap {
	margin: 0 auto;
	text-align: left;
}

#index #wrap div.inr {
  width:950px;
  margin:0 auto;
}

.lower #wrap div.inr {
  width:960px;
  margin:0 auto;
}

#glb-nav ul {
  -js-display:flex;
  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
  margin:0 auto;
  width:1100px;
}

#glb-nav ul li {
  position:relative;
}

#glb-nav ul li a:after {
  display:block;
  content:url(../img/common/nav-icon.png);
  position:absolute;
  left:48px;
  top:-32px;
}

#glb-nav ul li a:link:after ,
#glb-nav ul li a:visited:after {
  opacity: 0;
  transition: .3s all;
}

#glb-nav ul li a:hover:after {
  opacity: 1;
  transition: .3s all;
}

footer p.pagetop {
  position:absolute;
  right:40px;
  bottom:69px;
  z-index:100;
}

footer ul {
  -js-display:flex;
  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
  -webkit-flex-wrap:no-wrap;
  flex-wrap:no-wrap;
  margin:0 auto 9px;
  width:680px;
}

footer ul li {
  margin-right:32px;
}

/*footer ul li:last-child {
  margin-left:19px;
}*/

footer .address {
  border-top:1px solid #daa80e;
  padding-top:11px;
  text-align: center;
  font-size: 10px;
  font-family: 'Oswald', sans-serif;
}

footer .address .inr {
  -js-display:flex;
  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
  -webkit-justify-content:space-between;
  justify-content:space-between;
  align-items:flex-end;
}

footer .address .inr2 {
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}

a {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
a:hover img/*, a:focus img, a:active img*/ {
  -webkit-animation: hvr-wobble-vertical 1s ease-in-out 1;
  animation: hvr-wobble-vertical 1s ease-in-out 1;
}


/***  2. index
*******************************************/

#bgv {
  background:url(../img/index/header-bg.jpg) no-repeat center top;
  text-align: center;
  height: 100%;
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  z-index: -1;
}

.image { /* 動画無しの場合 */
  background:url(../img/index/header-bg.jpg) no-repeat center top;
}

/***   header   ***/

#index header {
  width:100%;
  height:880px;
  position:relative;
}

#index header h1 {
  margin:0 0 0 -216px;
  position:absolute;
  left:50%;
  /*top:563px;*/
  top:450px;
  height:234px;
}

#index header h1 + p {
  margin:0 0 0 -311px;
  position:absolute;
  left:50%;
  /*top:513px;*/
  top:690px;
}

#index header nav {
  width:800px;
  margin:0 0 0 -400px;
  position:absolute;
  left:50%;
  bottom:40px;
}

#index header nav ul {
  -js-display:flex;
  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
  -webkit-flex-direction:row;
  flex-direction:row;
  -webkit-flex-wrap:no-wrap;
  flex-wrap:no-wrap;
  -webkit-justify-content:space-between;
  justify-content:space-between;
  align-items:center;
}

#index header p.asw {
  position:absolute;
  left:16px;
  top:9px;
}

#index header p.ps4 {
  position:absolute;
  right:0;
  top:0;
}

#index header div.side-link {
  position:absolute;
  right:3px;
  top:140px;
}

#index header div.side-link .social {
  -js-display:flex;
  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
  -webkit-justify-content:space-between;
  justify-content:space-between;
  margin:0 auto 40px;
  width:118px;
}

#index header p.scroll {
  margin-left:-39px;
  position:absolute;
  left:50%;
  /*top:432px;*/
  top:750px;
}

#index header p.scroll img {
  -webkit-animation: scroll-down 2.5s ease-in-out 1s infinite;
  animation: scroll-down 2.5s ease-in-out 1s infinite;
}

/***   glb-nav   ***/

#index #glb-nav {
  background:url(../img/common/nav-bg.png) no-repeat center bottom;
  height:142px;
  margin-top:-73px;
  width:100%;
  position:relative;
}

/***   footer   ***/

#index footer {
  background:url(../img/common/footer-bg-ext.png) no-repeat center top;
  height:127px;
  margin-top:-56px;
  padding-top:77px;
  position:relative;
}


/***   top-information   ***/

#top-information {
  background:url(../img/index/info-bg.jpg) no-repeat center top;
}

#top-information .inr {
  position:relative;
  height:670px;
  padding:19px 0 0;
}

#top-information .inr .flex {
  width:942px;
  margin:0 auto 0 -7px;
  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
  -webkit-justify-content:space-between;
  justify-content:space-between;
}

#top-information .fb-area {
  background:url(../img/index/info-fb-bg.png) no-repeat left top;
  height:652px;
  padding:29px 0 0 0;
  text-align:center;
  width:495px;
}

#top-information .fb-area dl {
  margin-bottom:30px;
}

#top-information .fb-area dl dt {
  margin-bottom:13px;
}

#top-information .info-area{
  width:426px;
}

#top-information .infomation {
  background:url(../img/index/info-news-bg.png) no-repeat left top;
  height:267px;
  width:421px;
  position:relative;
}

#top-information .infomation p {
  margin:0 0 0 -126px;
  position:absolute;
  left:50%;
  top:21px;
}

#top-information .infomation dl {
  -js-display:flex;
  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
  -webkit-flex-direction:row;
  flex-direction:row;
  -webkit-flex-wrap:wrap;
  flex-wrap:wrap;
  -webkit-justify-content:space-between;
  justify-content:space-between;
  align-items:flex-start;
  color:#8ad2f7;
  font-size:16px;
  font-size:1.6rem;
  height:157px;
  line-height:1.4;
  overflow-y:scroll;
  width:365px;
  position:absolute;
  left:28px;
  top:84px;
}

#top-information .infomation dl dt {
  width:110px;
  margin-bottom:12px;
}

#top-information .infomation dl dd {
  width:225px;
  padding-right:10px;
  margin-bottom:12px;
}

#top-information .infomation dl dd a:link ,
#top-information .infomation dl dd a:visited {
  color:#8ad2f7;
  text-decoration:underline;
}

#top-information .infomation dl dd a:hover {
  color:#f7df8a;
  text-decoration:underline;
}

/* top-information : obj */

#top-information .obj li {
  position:absolute;
}

#top-information .obj li.obj-L01 { left:-125px; top:5px; }
#top-information .obj li.obj-L02 { left:-225px; top:174px; }
#top-information .obj li.obj-L03 { left:-192px; top:256px; }
#top-information .obj li.obj-L04 { left:-158px; top:484px; }
#top-information .obj li.obj-L05 { left:-307px; top:556px; }

#top-information .obj li.obj-R01 { right:-337px; top:35px; }
#top-information .obj li.obj-R02 { right:-197px; top:269px; }
#top-information .obj li.obj-R03 { right:-167px; top:497px; }

/***   top-content   ***/

#top-contents {
  background:url(../img/index/cont-bg-body.png) no-repeat center 348px, url(../img/index/cont-bg-top.png) no-repeat center top, url(../img/index/cont-bg-mdl.jpg) repeat-y center top;
  height:2214px;
  padding:101px 0 0;
}

#top-contents .inr {
  position:relative;
}

#top-contents section {
  height:1956px;
  position:relative;
}

#top-contents section h1 {
  text-align:center;
  position:relative;
}

#top-contents section div {
  width:920px;
  margin-left:-5px;
  position:absolute;
}

#top-contents #section-joy {
  height:551px;
  left:0;
  top:354px;
}

#top-contents #section-joy h2 { position:absolute; left:2px; top:0; }
#top-contents #section-joy p  { position:absolute; left:20px; top:82px; }
#top-contents #section-joy ul.ss li:nth-child(1) { position:absolute; right:0px; top:67px; }
#top-contents #section-joy ul.ss li:nth-child(2) { position:absolute; right:58px; top:321px; }

#section-joy ul.obj li { position:absolute; }
#section-joy ul.obj li.obj-C01 { left:-115px; top:-54px; }
#section-joy ul.obj li.obj-C02 { right:129px; top:-96px; }
#section-joy ul.obj li.obj-C03 { left:-53px; bottom:2px; }
#section-joy ul.obj li.obj-C04 { left:79px; bottom:1px; }
#section-joy ul.obj li.obj-C05 { left:238px; bottom:43px; }
#section-joy ul.obj li.obj-C06 { right:-124px; bottom:-20px; }

#top-contents #section-share {
  height:582px;
  left:0;
  top:934px;
}

#top-contents #section-share h2 { position:absolute; left:-1px; top:0; }
#top-contents #section-share p  { position:absolute; left:25px; top:128px; }
#top-contents #section-share ul.ss li:nth-child(1) { position:absolute; right:1px; top:122px; }
#top-contents #section-share ul.ss li:nth-child(2) { position:absolute; right:106px; top:408px; }
#top-contents #section-share ul.ss li:nth-child(3) { position:absolute; left:198px; top:408px; }

#section-share ul.obj li { position:absolute; }
#section-share ul.obj li.obj-C07 { right:223px; top:13px; }
#section-share ul.obj li.obj-C08 { left:-26px; bottom:16px; }
#section-share ul.obj li.obj-C09 { right:-27px; bottom:52px; z-index:1; }
#section-share ul.obj li.obj-C10 { right:-136px; bottom:95px; }

#top-contents #section-infinity {
  height:549px;
  left:0;
  top:1540px;
}

#top-contents #section-infinity h2 { position:absolute; left:1px; top:0; }
#top-contents #section-infinity p  { position:absolute; left:23px; top:80px; }
#top-contents #section-infinity ul.ss li:nth-child(1) { position:absolute; right:1px; top:66px; }
#top-contents #section-infinity ul.ss li:nth-child(2) { position:absolute; right:61px; top:319px; }

#section-infinity ul.obj li { position:absolute; }
#section-infinity ul.obj li.obj-C11 { right:-102px; top:92px; z-index:1; }
#section-infinity ul.obj li.obj-C12 { right:-143px; top:0; }
#section-infinity ul.obj li.obj-C13 { right:-89px; bottom:144px; }
#section-infinity ul.obj li.obj-C14 { left:90px; bottom:-33px; }

/* top-contents : obj */

#top-contents .inr > .obj li { position:absolute; }

#top-contents .inr > .obj li.obj-L01 { left:-365px; top:200px; }
#top-contents .inr > .obj li.obj-L02 { left:-275px; top:612px; }
#top-contents .inr > .obj li.obj-L03 { left:-262px; top:981px; }
#top-contents .inr > .obj li.obj-L04 { left:-404px; top:1180px; }
#top-contents .inr > .obj li.obj-L05 { left:-267px; top:1408px; }
#top-contents .inr > .obj li.obj-L06 { left:-267px; top:1607px; }
#top-contents .inr > .obj li.obj-L07 { left:-247px; top:1869px; }

#top-contents .inr > .obj li.obj-R01 { right:-71px; top:177px; }
#top-contents .inr > .obj li.obj-R02 { right:-265px; top:287px; }
#top-contents .inr > .obj li.obj-R03 { right:-246px; top:498px; }
#top-contents .inr > .obj li.obj-R04 { right:-334px; top:872px; }
#top-contents .inr > .obj li.obj-R05 { right:-233px; top:1102px; }
#top-contents .inr > .obj li.obj-R06 { right:-239px; top:1275px; }
#top-contents .inr > .obj li.obj-R07 { right:-367px; top:1649px; }
#top-contents .inr > .obj li.obj-R08 { right:-280px; top:1801px; }

/***   spec   ***/

#spec {
  background:url(../img/index/spec-bg.jpg) no-repeat center top;
  height:436px;
  padding-top:37px;
  text-align:center;
}

/***  3. lower
*******************************************/

.lower header {
  background:url(../img/common/header-bg.jpg) no-repeat center top;
  height:80px;
}

.lower header .inr {
  position:relative;
}

.lower header .inr h1 {
  position:absolute;
  left:6px;
  top:8px;
}

.lower header .inr ul {
  position:absolute;
  right:0;
  top:21px;
  -js-display:flex;
  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
  -webkit-justify-content:space-between;
  justify-content:space-between;
  width:106px;
}

/***   glb-nav   ***/

.lower #glb-nav {
  background:url(../img/common/nav-bg.png) no-repeat center top;
  height:99px;
  margin-top:-73px;
  width:100%;
  position:relative;
  z-index:10;
}

/***   footer   ***/

.lower footer {
  background:url(../img/common/footer-bg-ext.png) no-repeat center bottom;
  height:126px;
  padding-top:22px;
  position:relative;
}


/***  4. prologue
*******************************************/

/***   story   ***/

#story {
  background:url(../img/prologue/prologue-bg.jpg) no-repeat center top fixed;
}

#story .inr {
  padding:33px 0 185px;
  text-align:center;
}

#story h1 {
  position:relative;
  z-index:10;
}

#story div#story01 {
  height:481px;
  margin:-29px auto 0;
  width:942px;
  position:relative;
}

#story div#story01 p.txt {
  margin-left:-244px;
  position:absolute;
  left:50%;
  top:122px;
}

#story div#story02 {
  height:540px;
  margin:-5px auto 0;
  width:938px;
  position:relative;
}

#story div#story02 p.txt {
  margin-left:-320px;
  position:absolute;
  left:50%;
  top:84px;
}

#story .inr > p:last-child {
  margin-top:33px;
}

/***   character   ***/

#character {
  background:url(../img/prologue/chara-bg-top.png) no-repeat center top, url(../img/prologue/chara-bg-mdl.jpg) no-repeat center 50px;
  height:973px;
  margin:-50px 0 0;
  padding:50px 0 0;
}

#character .inr {
  position:relative;
  height:836px;
}

#character h1 {
  text-align:center;
}

#character dl {
  background:url(../img/prologue/chara-flame.png) no-repeat left top;
  height:264px;
  width:420px;
}

#character #chara-avatar {
  width:519px;
  position:absolute;
  left:0;
  top:132px;
}

#character #chara-avatar dl {
  position:absolute;
  left:0;
  top:175px;
}

#character #chara-avatar dl dt {
  position:absolute;
  left:99px;
  top:17px;
}

#character #chara-avatar dl dd {
  position:absolute;
  left:28px;
  top:82px;
}

#character #chara-avatar p {
  position:absolute;
  right:0;
  top:0;
}

#character #chara-navi {
  width:460px;
  position:absolute;
  right:0;
  top:304px;
}

#character #chara-navi dl {
  position:absolute;
  right:0;
  top:51px;
}

#character #chara-navi dl dt {
  position:absolute;
  left:152px;
  top:16px;
}

#character #chara-navi dl dd {
  position:absolute;
  left:26px;
  top:81px;
}

#character #chara-navi p {
  position:absolute;
  left:0;
  top:0;
}

#character .inr .pagenext {
  position:absolute;
  bottom:0;
  right:-6px;
}


/***  5. make
*******************************************/

#make header + div h1 {
  text-align:center;
}

#make #wrap #contents {
  background:url(../img/common/bg-lowercont-top.png) no-repeat center top, url(../img/index/cont-bg-mdl.jpg) repeat-y center -7px;
}

/***  terrain  ***/

#terrain {
  text-align:center;
}

.lower #wrap #terrain div.inr {
  height:1397px;
  margin:0 auto;
  padding:42px 0 0 0;
  width:1024px;
  position:relative;
}

#terrain h2 + p {
  position:absolute;
  left:34px;
  top:172px;
  z-index:10;
  text-align:left;
}

#terrain dl#terrainPrr {
  background:url(../img/make/terrain-map.png) no-repeat center top;
  height:719px;
  margin:34px auto 0;
  width:1024px;
  position:relative;
}

#terrain dl dt ,
#terrain dl dd p {
  position:absolute;
}

#terrain dl dt {
  right:132px;
  top:18px;
}

#terrain dl dd:nth-child(2) p { left:166px; top:136px; width:203px; height:166px; }
#terrain dl dd:nth-child(3) p { left:53px; top:313px; width:203px; height:166px; }
#terrain dl dd:nth-child(4) p { left:168px; top:499px; width:203px; height:165px; }
#terrain dl dd:nth-child(5) p { left:389px; top:450px; width:203px; height:166px; }
#terrain dl dd:nth-child(6) p { left:608px; top:518px; width:203px; height:165px; }
#terrain dl dd:nth-child(7) p { left:775px; top:398px; width:203px; height:166px; }
#terrain dl dd:nth-child(8) p { left:829px; top:165px; width:203px; height:166px; }

#terrain #growup {
  height:469px;
  margin:8px auto 0;
  width:884px;
  position:relative;
}

#terrain #growup p {
  z-index:10;
}

#terrain #growup p,
#terrain #growup ul li {
  position:absolute;
}

#terrain #growup p:nth-child(1) {
  left:0;
  top:0;
}

#terrain #growup p:nth-child(2) {
  right:0;
  top:130px;
}

#terrain #growup ul li:nth-child(1) {
  right:292px;
  top:8px;
}

#terrain #growup ul li:nth-child(2) {
  left:222px;
  bottom:0;
  z-index:0;
}

#terrain #growup ul li:nth-child(2):before {
  content:url(../img/make/terrain-growup-arrow.png);
  display:block;
  z-index:10;
  position:absolute;
  right:107px;
  top:-62px;
}


#terrain #growup p:last-child {
  right:234px;
  bottom:8px;
}

/* terrain : colorbox */

.terrainCB {
  height:auto !important;
}

.terrainCB h3 {
  color:#FFF;
  font-size:42px;

  margin-bottom:33px;
  font-family: 'Baloo Bhaina', cursive;
}

.terrainCB p:last-child {
  color:#FFF;
  font-size:22px;
  font-weight:300;
  line-height:32px;
  margin-top:38px;
  text-align: center;
  font-family: 'Oswald', sans-serif;
  max-width: 475px;
  margin-left: auto;
  margin-right: auto;
}

/* terrain : obj */

#terrain .inr > .obj li { position:absolute; }

#terrain .inr > .obj li.obj-L01 { left:174px; top:7px; }
#terrain .inr > .obj li.obj-L02 { left:-109px; top:51px; }
#terrain .inr > .obj li.obj-L03 { left:-160px; top:344px; }
#terrain .inr > .obj li.obj-L04 { left:-234px; top:527px; }
#terrain .inr > .obj li.obj-L05 { left:-166px; top:736px; }
#terrain .inr > .obj li.obj-L06 { left:-142px; top:1094px; }
#terrain .inr > .obj li.obj-L07 { left:-47px; top:1229px; }

#terrain .inr > .obj li.obj-R01 { right:-46px; top:42px; }
#terrain .inr > .obj li.obj-R02 { right:-234px; top:195px; }
#terrain .inr > .obj li.obj-R03 { right:-164px; top:492px; }
#terrain .inr > .obj li.obj-R04 { right:-307px; top:664px; }
#terrain .inr > .obj li.obj-R05 { right:-294px; top:810px; }
#terrain .inr > .obj li.obj-R06 { right:-154px; top:1193px; }

/***  produce  ***/

#produce {
  background:url(../img/make/produce-bg-top.png) no-repeat center top, url(../img/make/produce-bg-mdl.jpg) no-repeat center 43px;
  height:806px;
  text-align:center;
  z-index:10;
}

#produce .inr {
  position:relative;
  padding:43px 0 0;
}

#produce .movie {
  position:absolute;
  left:0;
  top:154px;
}

#produce .txt {
  position:absolute;
  right:31px;
  top:150px;
}

#produce dl dt {
  position:absolute;
  left:25px;
  top:484px;
}

#produce dl dd {
  width:694px;
  position:absolute;
  right:23px;
  top:484px;
}

#produce dl dd ul {
  width:694px;
  -js-display:flex;
  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
  -webkit-flex-direction:row;
  flex-direction:row;
  -webkit-flex-wrap:wrap;
  flex-wrap:wrap;
  -webkit-justify-content:space-between;
  justify-content:space-between;
}

#produce dl dd ul li {
  margin-bottom:16px;
}

#produce dl dd ul li:nth-child(1) {
  margin-left:73px;
}

#produce dl dd ul li:nth-child(4) {
  margin-right:71px;
}

/* produce : colorbox */

.produceCB {
  height:auto !important;
  padding:20px;
  background:#000;
  overflow:auto;
}

.produceCB ul li {
  margin-bottom:20px;
}

.produceCB ul li:last-child {
  margin-bottom:0;
}

/* produce : obj */

#produce .inr > .obj li { position:absolute; }

#produce .inr > .obj li.obj-C01 { left:105px; top:61px; }
#produce .inr > .obj li.obj-C02 { left:-210px; top:164px; }
#produce .inr > .obj li.obj-C03 { left:-135px; top:375px; }
#produce .inr > .obj li.obj-C04 { left:-273px; top:413px; }
#produce .inr > .obj li.obj-C05 { left:-152px; top:596px; }
#produce .inr > .obj li.obj-C06 { left:-28px; top:595px; }
#produce .inr > .obj li.obj-C07 { right:-214px; top:147px; }
#produce .inr > .obj li.obj-C08 { right:-155px; top:250px; }
#produce .inr > .obj li.obj-C09 { right:-225px; top:375px; }
#produce .inr > .obj li.obj-C10 { right:-261px; top:472px; }

/***  evolution  ***/

#evolution {
  background:url(../img/make/produce-bg-bottom.png) no-repeat center top, url(../img/common/bg-common.png) repeat-y center top;
  height:863px;
  text-align:center;
  z-index:10;
}

#evolution .inr {
  height:824px;
  padding:57px 0 0;
  position:relative;
}

#evolution .ss {
  position:absolute;
  left:0;
  top:162px;
}

#evolution .txt {
  position:absolute;
  right:94px;
  top:160px;
}

#evolution dl dt {
  position:absolute;
  left:4px;
  top:438px;
}

#evolution dl dd {
  width:922px;
  position:absolute;
  left:25px;
  top:474px;
}

#evolution dl dd li {
  width:300px;
  position:absolute;
}

#evolution dl dd li:nth-child(1) {
  left:0;
  top:88px;
}

#evolution dl dd li:nth-child(1):before {
  content:url(../img/make/evolution-ex-arrow01.png);
  display:block;
  position:absolute;
  left:287px;
  top:49px;
}

#evolution dl dd li:nth-child(1):after {
  content:url(../img/make/evolution-ex-arrow02.png);
  display:block;
  position:absolute;
  left:310px;
  top:174px;
}

#evolution dl dd li:nth-child(2) {
  left:345px;
  top:0;
}

#evolution dl dd li:nth-child(3) {
  right:0;
  top:71px;
}

/* evolution : obj */

#evolution .inr > .obj li { position:absolute; }

#evolution .inr > .obj li.obj-C01 { left:133px; top:69px; }
#evolution .inr > .obj li.obj-C02 { left:-239px; top:119px; }
#evolution .inr > .obj li.obj-C03 { left:-285px; top:458px; }
#evolution .inr > .obj li.obj-C04 { left:-176px; top:531px; }
#evolution .inr > .obj li.obj-C05 { right:-164px; top:240px; }
#evolution .inr > .obj li.obj-C06 { right:-57px; top:343px; }
#evolution .inr > .obj li.obj-C07 { right:-179px; top:493px; }



/***  collection  ***/

#collection {
  background:url(../img/make/collection-bg-top.png) no-repeat center top, url(../img/make/collection-bg-mld.jpg) no-repeat center 38px;
  height:912px;
  margin:-21px auto 0;
  padding:39px 0 0;
  text-align:center;
}

#collection .inr {
  position:relative;
  height:796px;
}

#collection p,
#collection ul {
  position:absolute;
}

#collection .txt {
  left:203px;
  top:107px;
}

#collection .avatar {
  left:2px;
  top:53px;
}

#collection .navi {
  right:55px;
  top:233px;
}

#collection ul {
  width:900px;
  left:31px;
  top:357px;
  -js-display:flex;
  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
  -webkit-flex-wrap:no-wrap;
  flex-wrap:no-wrap;
  -webkit-justify-content:space-between;
  justify-content:space-between;
}

#collection .inr .pagenext {
  position:absolute;
  bottom:0;
  right:-4px;
}

/***  6. enjoy
*******************************************/

#enjoy header + div h1 {
  text-align:center;
}

#enjoy #wrap #contents {
  background:url(../img/index/cont-bg-mdl.jpg) repeat-y center -7px;
}

/***  coexist  ***/

#coexist {
  background:url(../img/enjoy/coexist-bg.png) no-repeat center 37px;
  margin-top:21px;
  text-align:center;
}

#coexist .inr {
  position:relative;
  height:1112px;
}

#coexist h2 + p {
  margin-top:30px;
}

#coexist .world {
  position:relative;
  width:910px; 
  height:582px;
  margin:23px auto 0;
}

#coexist .world li { position:absolute; }
/* ss */
#coexist .world li:nth-child(1) { left:6px; top:59px; }
#coexist .world li:nth-child(2) { left:262px; top:0; }
#coexist .world li:nth-child(3) { right:2px; top:14px; }
#coexist .world li:nth-child(4) { left:40px; bottom:0; }
#coexist .world li:nth-child(5) { left:31px; top:122px; }
#coexist .world li:nth-child(6) { right:78px; bottom:122px; }
#coexist .world li:nth-child(7) { left:127px; bottom:61px; }
#coexist .world li:nth-child(8) { right:83px; top:41px; }
#coexist .world li:nth-child(9) { right:208px; bottom:52px; }
/* star */
#coexist .world li:nth-child(10) { left:55px; top:140px; }
#coexist .world li:nth-child(11) { left:113px; top:271px; }
#coexist .world li:nth-child(12) { left:99px; top:307px; }
#coexist .world li:nth-child(13) { left:303px; top:486px; }
#coexist .world li:nth-child(14) { right:125px; top:426px; }
#coexist .world li:nth-child(15) { right:53px; top:82px; }
#coexist .world li:nth-child(16) { right:68px; top:40px; }

/* coexist : obj */

#coexist .inr > .obj li { position:absolute; }

#coexist .inr > .obj li.obj-C01 { left:205px; top:89px; }
#coexist .inr > .obj li.obj-C02 { left:37px; top:202px; }
#coexist .inr > .obj li.obj-C03 { right:-1px; top:207px; }
#coexist .inr > .obj li.obj-C04 { right:145px; top:867px; }

#coexist .inr > .obj li.obj-L01 { left:-24px; top:32px; }
#coexist .inr > .obj li.obj-L02 { left:-195px; top:218px; }
#coexist .inr > .obj li.obj-L03 { left:-184px; top:582px; }
#coexist .inr > .obj li.obj-L04 { left:-286px; top:707px; }
#coexist .inr > .obj li.obj-L05 { left:-235px; top:842px; }

#coexist .inr > .obj li.obj-R01 { right:-177px; top:-105px; }
#coexist .inr > .obj li.obj-R02 { right:-34px; top:58px; }
#coexist .inr > .obj li.obj-R03 { right:-175px; top:224px; }
#coexist .inr > .obj li.obj-R04 { right:-305px; top:436px; }
#coexist .inr > .obj li.obj-R05 { right:-225px; top:606px; }
#coexist .inr > .obj li.obj-R06 { right:-260px; top:910px; }
#coexist .inr > .obj li.obj-R07 { right:-170px; top:983px; }

/***  share  ***/

#share {
  background:url(../img/enjoy/share-bg-top.png) no-repeat center top, url(../img/enjoy/share-bg-mdl.jpg) no-repeat center 43px;
  height:1211px;
  text-align:center;
  padding-top:53px;
  z-index:10;
}

#share .inr {
  position:relative;
  height:1178px;
}

#share h2 + p {
  position:absolute;
  left:440px;
  top:155px;
}

#share h2 + p + ul li:nth-child(1) {
  position:absolute;
  left:-12px;
  top:29px;
}

#share h2 + p + ul li:nth-child(2) {
  position:absolute;
  left:221px;
  top:324px;
}

#share h2 + p + ul li:nth-child(2):after {
  content:url(../img/enjoy/share-img-arrow.png);
  position:absolute;
  left:7px;
  top:-58px;
}

#share dl.share-ex {
  height:339px;
  margin:23px auto 0;
  width:552px; 
  position:absolute;
  right:0;
  top:464px;
}

#share dl.share-ex dt ,
#share dl.share-ex dd ul li {
  position:absolute;
}

#share dl.share-ex dt {
  left:30px;
  top:0;
}

#share dl.share-ex dd li:nth-child(1) {
  left:8px;
  top:61px;
}

#share dl.share-ex dd li:nth-child(2) {
  right:0;
  top:24px;
}

#share dl.share-ex dd li:nth-child(3) {
  left:0;
  bottom:0;
}

#share div.share-item {
  background:url(../img/enjoy/share-item-ss.png) no-repeat right bottom;
  height:367px;
  width:891px;
  position:absolute;
  left:44px;
  bottom:0;
}

#share div.share-item h3 {
  position:absolute;
  left:0;
  top:0;
}

#share div.share-item p.txt {
  position:absolute;
  left:8px;
  top:139px;
}

#share div.share-item p.ufo {
  position:absolute;
  right:79px;
  bottom:28px;
  z-index:10;
}

/* share : obj */

#share .inr > .obj li { position:absolute; }

#share .inr > .obj li.obj-C01 { left:-177px; top:111px; }
#share .inr > .obj li.obj-C02 { left:-276px; top:448px; }
#share .inr > .obj li.obj-C03 { left:-86px; top:506px; }
#share .inr > .obj li.obj-C04 { left:-225px; top:871px; }
#share .inr > .obj li.obj-C05 { left:-173px; top:926px; }
#share .inr > .obj li.obj-C06 { right:-34px; top:11px; }
#share .inr > .obj li.obj-C07 { right:-213px; top:54px; }
#share .inr > .obj li.obj-C08 { right:-297px; top:162px; }
#share .inr > .obj li.obj-C09 { right:-195px; top:395px; }
#share .inr > .obj li.obj-C10 { right:-291px; top:451px; }
#share .inr > .obj li.obj-C11 { right:-175px; top:683px; }
#share .inr > .obj li.obj-C12 { right:-268px; top:954px; }

/***  pagelink  ***/

#enjoy #pagelink {
  background:url(../img/enjoy/share-bg-btm.png) no-repeat center top, url(../img/enjoy/link-bg-en.jpg) no-repeat center top;
  height:352px;
  z-index:0;
}

#enjoy #pagelink .inr {
  position:relative;
}

#enjoy #pagelink .inr .pagenext {
  position:absolute;
  top:84px;
  right:-4px;
}

/***  7. mode
*******************************************/

#mode header + div h1 {
  text-align:center;
}

#mode #wrap #contents {
  background:url(../img/index/cont-bg-mdl.jpg) repeat-y center -7px;
}

/***  mode-story  ***/

#mode-story {
  margin-top:19px;
  padding-bottom:64px;
  text-align:center;
}

#mode-story .inr {
  position:relative;
  height:626px;
}

#mode-story h2 + p {
  margin-top:16px;
}

#mode-story h2 + p + ul {
  width:963px;
  -js-display:flex;
  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
  -webkit-flex-wrap:no-wrap;
  flex-wrap:no-wrap;
  -webkit-justify-content:space-between;
  justify-content:space-between;

  position:absolute;
  left:-2px;
  bottom:0;
}

#mode-story h2 + p + ul li {
  width:315px;
}

/* mode-story : obj */

#mode-story .inr > .obj li { position:absolute; }

#mode-story .inr > .obj li.obj-C01 { left:-305px; top:-58px; }
#mode-story .inr > .obj li.obj-C02 { left:54px; top:57px; }
#mode-story .inr > .obj li.obj-C03 { left:-114px; top:181px; }
#mode-story .inr > .obj li.obj-C04 { left:-222px; top:278px; }
#mode-story .inr > .obj li.obj-C05 { left:-210px; top:473px; }
#mode-story .inr > .obj li.obj-C06 { left:-242px; top:564px; }

#mode-story .inr > .obj li.obj-C07 { right:-158px; top:-136px; }
#mode-story .inr > .obj li.obj-C08 { right:14px; top:15px; }
#mode-story .inr > .obj li.obj-C09 { right:-359px; top:-23px; }
#mode-story .inr > .obj li.obj-C10 { right:-251px; top:130px; }
#mode-story .inr > .obj li.obj-C11 { right:-298px; top:355px; }
#mode-story .inr > .obj li.obj-C12 { right:-212px; top:407px; }

/***  challenge  ***/
#mode #mode-challenge {
  background:url(../img/mode/challenge-bg-top.png) no-repeat center top, url(../img/mode/challenge-bg-mdl.jpg) no-repeat center 28px;
  height:713px;
  padding:45px 0 0;
}
#mode-challenge .inr { 
  position:relative;
  height:631px;
  text-align:center;
}
#mode #mode-challenge h2 {
  margin:0 0 14px;
}
#mode-challenge h2 + p {
  margin:0 0 25px -2px;
}
#mode-challenge p + ul {
  margin:0 auto;
  width:892px;
  -js-display:flex;
  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
  -webkit-flex-wrap:no-wrap;
  flex-wrap:no-wrap;
  -webkit-justify-content:space-between;
  justify-content:space-between;
}
/* mode-challenge : obj */
#mode-challenge .inr > .obj li { position:absolute; }
#mode-challenge .inr > .obj li.obj-C01 { left:-100px; top:39px; }
#mode-challenge .inr > .obj li.obj-C02 { left:-154px; top:195px; }
#mode-challenge .inr > .obj li.obj-C03 { left:-242px; top:454px; }
#mode-challenge .inr > .obj li.obj-C04 { left:-120px; top:543px; }
#mode-challenge .inr > .obj li.obj-C05 { right:-187px; top:25px; }
#mode-challenge .inr > .obj li.obj-C06 { right:-176px; top:148px; }
#mode-challenge .inr > .obj li.obj-C07 { right:-213px; top:337px; }
/***  mode-freeplay  ***/
#mode #mode-freeplay {
  background:url(../img/mode/freeplay-bg-top.png) no-repeat center top, url(../img/mode/freeplay-bg-mdl.jpg) no-repeat center 46px;
  height:1465px;
  margin:-47px 0 0;
  padding:75px 0 0;
}
#mode-freeplay .inr { 
  position:relative;
  height:1357px;
  text-align:center;
}
#mode-freeplay .inr h2 + p {
  margin:14px 0 24px 20px;
}
#mode-freeplay p + ul {
  margin:0 auto;
  width:892px;
  -js-display:flex;
  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
  -webkit-flex-wrap:no-wrap;
  flex-wrap:no-wrap;
  -webkit-justify-content:space-between;
  justify-content:space-between;
}
#mode-freeplay p + ul li img {
  margin-bottom:2px !important;
}
#fp-scene {
  background:url(../img/mode/freeplay-scene-bg.png) no-repeat left top;
  height:533px;
  margin:88px 0 0;
  position:relative;
}
#fp-scene h3 {
  position:absolute;
  left:3px;
  top:-30px;
}
#fp-scene p.caution {
  position:absolute;
  left:41px;
  top:93px;
}
#fp-scene p.txt {
  position:absolute;
  right:55px;
  bottom:46px;
}
#fp-scene ul li.loupe01 {
  position:absolute;
  left:77px;
  top:367px;
}
#fp-scene ul li.loupe01:after {
  content:url(../img/mode/freeplay-scene-arrow.png);
  position:absolute;
  right:-16px;
  top:-102px;
}
#fp-scene ul li.loupe02 {
  position:absolute;
  left:263px;
  top:282px;
}
#fp-scene ul li.loupe02:after {
  content:url(../img/mode/freeplay-scene-arrow.png);
  position:absolute;
  right:-15px;
  top:-111px;
}
#fp-scene ul li.loupe03 {
  position:absolute;
  left:529px;
  top:194px;
}
#mode-freeplay .inr .pagenext {
  position:absolute;
  bottom:0;
  right:-4px;
}
/* mode-freeplay : obj */
#mode-freeplay .inr > .obj li { position:absolute; }
#mode-freeplay .inr > .obj li.obj-C01 { left:-64px; top:-3px; }
#mode-freeplay .inr > .obj li.obj-C02 { left:14px; top:58px; }
#mode-freeplay .inr > .obj li.obj-C03 { left:-289px; top:252px; }
#mode-freeplay .inr > .obj li.obj-C04 { left:-278px; top:705px; }
#mode-freeplay .inr > .obj li.obj-C05 { left:-248px;  top:1021px; }
#mode-freeplay .inr > .obj li.obj-C06 { right:-176px; top:-5px; }
#mode-freeplay .inr > .obj li.obj-C07 { right:-278px; top:280px; }
#mode-freeplay .inr > .obj li.obj-C08 { right:-169px; top:489px; }
#mode-freeplay .inr > .obj li.obj-C09 { right:-305px; top:741px; }
#mode-freeplay .inr > .obj li.obj-C10 { right:-292px; top:1032px; }
#mode-freeplay .inr > .obj li.obj-C11 { left:-134px; top:1187px; }

/***  coming  ***/

#mode #coming {
  background:url(../img/mode/coming-bg-top.png) no-repeat center top, url(../img/mode/coming-bg-mld.jpg) no-repeat center 27px;
  height:250px;
}

#mode #coming ul {
  width:960px;
  margin:0 auto;
  position:relative;
}

#mode #coming ul li:nth-child(1) {
  position:absolute;
  right:142px;
  top:6px;
}

#mode #coming ul li:nth-child(2) {
  position:absolute;
  right:-71px;
  top:86px;
}


/***  8. creator
*******************************************/

#creator header + div h1 {
  text-align:center;
}

#creator #wrap #contents {
  background:url(../img/common/bg-lowercont-top.png) no-repeat center top, url(../img/index/cont-bg-mdl.jpg) repeat-y center -7px;
}

/***  producer  ***/

#producer {
  background:url(../img/creator/producer-bg.png) no-repeat center top;
  margin:9px auto 0;
  padding:0 0 19px;
  text-align:center;
}

#producer div.inr {
  height:1484px;
  margin:0 auto;
  padding:51px 0 0;
  position:relative;
}

#producer div.inr h2 {
  margin-bottom:10px;
}

#producer div.inr p.photo {
  margin:17px 0 0;
}

#producer div.inr p.txt01 {
  position:absolute;
  left:-1px;
  top:601px;
}

#producer div.inr p.txt02 {
  position:absolute;
  right:2px;
  top:601px;
}

/* producer : obj */

#producer .inr > .obj li { position:absolute; }

#producer .inr > .obj li.obj-C01 { left:45px; top:347px; }
#producer .inr > .obj li.obj-C02 { right:116px; top:241px; }
#producer .inr > .obj li.obj-C03 { right:40px; top:432px; }
#producer .inr > .obj li.obj-C04 { left:57px; top:446px; }
#producer .inr > .obj li.obj-C05 { right:-5px; top:1124px; }
#producer .inr > .obj li.obj-C06 { left:55px; top:1293px; }
#producer .inr > .obj li.obj-C07 { left:169px; top:1323px; }
#producer .inr > .obj li.obj-C08 { left:622px; top:1229px; }

#producer .inr > .obj li.obj-L01 { left:-107px; top:-32px; }
#producer .inr > .obj li.obj-L02 { left:-184px; top:80px; }
#producer .inr > .obj li.obj-L03 { left:-181px; top:401px; }
#producer .inr > .obj li.obj-L04 { left:-404px; top:579px; }
#producer .inr > .obj li.obj-L05 { left:-268px; top:864px; }
#producer .inr > .obj li.obj-L06 { left:-308px; top:1152px; }
#producer .inr > .obj li.obj-L07 { left:-207px; top:1267px; }

#producer .inr > .obj li.obj-R01 { right:-46px; top:7px; }
#producer .inr > .obj li.obj-R02 { right:-430px; top:122px; }
#producer .inr > .obj li.obj-R03 { right:-187px; top:241px; }
#producer .inr > .obj li.obj-R04 { right:-298px; top:533px; }
#producer .inr > .obj li.obj-R05 { right:-212px; top:585px; }
#producer .inr > .obj li.obj-R06 { right:-443px; top:855px; }
#producer .inr > .obj li.obj-R07 { right:-473px; top:1008px; }
#producer .inr > .obj li.obj-R08 { right:-246px; top:1132px; }
#producer .inr > .obj li.obj-R09 { right:-133px; top:1281px; }


/***  designer  ***/

#designer {
  background:url(../img/creator/designer-bg-top.png) no-repeat center top, url(../img/creator/designer-bg-mdl.jpg) no-repeat center 27px,  url(../img/creator/designer-bg-bottom.jpg) no-repeat center 1545px;
  height:1545px;
  margin:9px auto 0;
  padding-bottom:53px;
  text-align:center;
  position:relative;
}

.lower #wrap #designer div.inr {
  background:url(../img/creator/designer-bg.png) no-repeat center top;
  height:1661px;
  margin-left:-715px !important;
  padding:57px 0 0;
  width:1430px;
  position:absolute;
  left:50%;
  top:-89px;
}

#designer .inr h2 {
  margin-bottom:12px;
}

#designer #otyappi {
  height:417px;
  width:960px;
  margin:18px auto 0;
  position:relative;
}

#designer #otyappi h3 {
  position:absolute;
  left:-1px;
  top:0;
}

#designer #otyappi p.photo {
  position:absolute;
  left:6px;
  top:64px;
}

#designer #otyappi p.txt01 {
  position:absolute;
  left:434px;
  top:66px;
}

#designer #otyappi p.txt02 {
  position:absolute;
  left:432px;
  top:220px;
}

#designer #orippi {
  height:489px;
  width:960px;
  margin:38px auto 0;
  position:relative;
}

#designer #orippi h3 {
  position:absolute;
  left:-3px;
  top:0;
}

#designer #orippi p.photo {
  position:absolute;
  left:20px;
  top:53px;
}

#designer #orippi p.txt01 {
  position:absolute;
  left:349px;
  top:3px;
}

#designer #orippi p.txt02 {
  position:absolute;
  left:676px;
  top:3px;
}

#designer .inr .pagenext {
  position:absolute;
  bottom:127px;
  right:231px;
}

/* designer : obj */

#designer .inr > .obj li { position:absolute; }

#designer .inr > .obj li.obj-C01 { left:282px; top:114px; }
#designer .inr > .obj li.obj-C02 { left:90px; top:290px; }
#designer .inr > .obj li.obj-C03 { left:-43px; top:536px; }
#designer .inr > .obj li.obj-C04 { left:99px; top:834px; }
#designer .inr > .obj li.obj-C05 { left:306px; top:1163px; }
#designer .inr > .obj li.obj-C06 { left:489px; top:1055px; }
#designer .inr > .obj li.obj-C07 { right:112px; top:312px; }
#designer .inr > .obj li.obj-C08 { right:38px; top:557px; }
#designer .inr > .obj li.obj-C09 { right:428px; top:1296px; }

#designer .inr > .obj li.obj-L01 { left:-171px; top:206px; }
#designer .inr > .obj li.obj-L02 { left:-171px; top:722px; }
#designer .inr > .obj li.obj-L03 { left:-93px; top:637px; }
#designer .inr > .obj li.obj-L04 { left:-61px; top:898px; }
#designer .inr > .obj li.obj-L05 { left:-46px; top:1164px; }

#designer .inr > .obj li.obj-R01 { right:-236px; top:41px; }
#designer .inr > .obj li.obj-R02 { right:-168px; top:176px; }
#designer .inr > .obj li.obj-R03 { right:-208px; top:456px; }
#designer .inr > .obj li.obj-R04 { right:-245px; top:766px; }
#designer .inr > .obj li.obj-R05 { right:-51px; top:990px; }

#designer .inr > .obj li.obj-B01 { left:-77px; bottom:189px; }
#designer .inr > .obj li.obj-B02 { left:58px; bottom:172px; }
#designer .inr > .obj li.obj-B03 { left:454px; bottom:201px; }
#designer .inr > .obj li.obj-B04 { right:341px; bottom:152px; }
#designer .inr > .obj li.obj-B05 { right:-210px; bottom:219px; }
#designer .inr > .obj li.obj-B06 { right:-75px; bottom:311px; }


.preorderCB {
  height:auto !important;
  font-family: 'Baloo Bhaina', cursive;
  color: #fff;
}

.preorderCB h3 {
  font-size:32px;
  margin-bottom:33px;
}

.preorderCB ul {
  font-size:20px;
  margin-top:38px;
  margin-bottom:38px;
}

.preorderCB a {
  text-decoration: none;
  color: #fff;
}

.preorderCB a:hover {
  color: #ee5a68;
}