@charset "utf-8";
/* CSS Document */

/** 共通CSS **/
body {
  background-color: #fff;
  font-family: arial, sans-serif;
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
}
a {
  color: inherit;
  text-decoration: none;
  outline: none;
}
a:any-link,
a:-moz-any-link,
a:-webkit-any-link,
a:-ms-any-link,
a:link,
a:visited,
a:active,
a:hover,
a:focus {
  text-decoration: none;
  border-style: none;
}
img {
  border-style:none;
  outline: none;
}

h1,ul,li {
  list-style: none;
  margin: 0;
  padding: 0;
}
h1 {
  background-repeat: no-repeat;
  background-position: center 65px;
  color: transparent;
  font-size: 0;
  height: 165px;
  margin: 0 auto;
  width: 1000px;
}
ul {
  letter-spacing: -.4em;
}
li {
  display: inline-block;
  letter-spacing: normal;
  vertical-align: top;
}
header {
  z-index: 8;
}
section,footer {
  width: 100%;
  position: relative;
  z-index: 7;
}

section,nav {
  /*display: none;*/
}

section:nth-of-type(even) {
  background-color: #fff;
}
section:nth-of-type(odd) {
  background-color: #ffc600;
}

/** /共通CSS **/

#opening {
  background-color: #ffd000;
  width: 100%;
  position: relative;
  display: none;
}
#opening.animated {
  display: block;
}
#opening .opening-scene-01 {
  background-repeat: no-repeat;
  background-image: url(../images/op/op-bg.png);
  background-position: center center;
  margin: auto;
  width: 1000px;
  height: 1000px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#opening .opening-scene-01 div {
  position: absolute; 
}
#opening .opening-scene-01 .opening-logo {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 253px;
  height: 56px;
  display: none;
}
#opening .opening-scene-01 .opening-logo.animated {
  display: block; 
}
#opening .opening-scene-01 .op-01 {
  left: 160px;
  top: 345px;
}
#opening .opening-scene-01 .op-02 {
  left: 320px;
  top: 370px;
}
#opening .opening-scene-01 .op-03 {
  left: 233px;
  top: 510px;
}
#opening .opening-scene-01 .op-04 {
  left: 393px;
  top: 530px;
}
#opening2 {
  background-color: #fff;
  width: 100%;
  position: relative;
}
#opening2 .opening-scene-02 {
  width: 1193px;
  position: absolute;
  margin: auto;
  top: 0;
}
#opening2 .opening-scene-02 h1,
#opening2 .opening-scene-02 div {
  position: absolute;
  left: 0;
  right: 0;
  margin:0 auto;
}
#opening2 .opening-scene-02 .yuden-maou {
  width: 1045px;
  height: 658px;
  top: 310px;
  left: 28px;
  z-index: 2;

}
#opening2 .opening-scene-02 .yuden-maou img {
  visibility: visible;
  -moz-animation-delay: 6.5s;
  -webkit-animation-delay: 6.5s;
  -o-animation-delay: 6.5s;
  -ms-animation-delay: 6.5s;
  animation-delay: 6.5s;
}
#opening2 .opening-scene-02 .yuden-yuusha {
  width: 1179px;
  height: 1267px;
  top: 106px;
  left: 13px;
  z-index: 3;

}
#opening2 .opening-scene-02 .yuden-yuusha img {
  visibility: visible;
   -moz-animation-delay: 7.5s;
  -webkit-animation-delay: 7.5s;
  -o-animation-delay: 7.5s;
  -ms-animation-delay: 7.5s;
  animation-delay: 7.5s;
}
#opening2 .opening-scene-02 .yuden-others {
  width: 1193px;
  height: 1150px;
  top: 0;
  left: 0;

}
#opening2 .opening-scene-02 .yuden-others img {
  visibility: visible;
   -moz-animation-delay: 8.5s;
  -webkit-animation-delay: 8.5s;
  -o-animation-delay: 8.5s;
  -ms-animation-delay: 8.5s;
  animation-delay: 8.5s;
}
#opening2 .opening-scene-02 .yuden-word {
  width: 498px;
  height: 886px;
  top: 15px;
  left: 0;
  z-index: 4;

}
#opening2 .opening-scene-02 .yuden-word img {
  visibility: visible;
  -moz-animation-delay: 9s;
  -webkit-animation-delay: 9s;
  -o-animation-delay: 9s;
  -ms-animation-delay: 9s;
  animation-delay: 9s;
}

#container {
  z-index: 10;
  position: relative;
  display: none;
}



/** header **/

header {
  background-image: url(../images/header/keyvisual_onsale.png);
  background-position: center top;
  background-repeat: no-repeat;
  height: 1200px;
  width: 100%;
  position: relative;
}

header nav {
  background-color: #442200;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeAgMAAABGXkYxAAAACVBMVEUAAAAAAAAAAACDY+nAAAAAA3RSTlMAMjOo1vG5AAAAG0lEQVQY02PIWrVqBQMIDCwDCJhWrVo1YWAZAJNGSmtl42jfAAAAAElFTkSuQmCC);
  height: 75px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
}
header nav ul {
  background-image: url(../images/nav/menu.png);
  background-position: 17px 11px;
  background-repeat: no-repeat;
  margin: 0 auto;
  height: 100%;
  width: 1000px;
  letter-spacing: normal;
  font-size: 0;
}
header nav ul li {
  height: 100%;
}

header nav ul li a {
  background-image: url(../images/nav/menu-hover.png);
  background-repeat: no-repeat;
  color: transparent;
  font-size: 0;
  display: block;
  height: 100%;
  opacity: 0;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}

header nav ul li a:hover {
  opacity: 1;
}

header nav ul li:first-of-type {
  margin-left: 17px;
  width: 105px;
}
header nav ul li:first-of-type a {
  background-position: 0 11px;
}
header nav ul li:nth-of-type(2) {
  width: 85px;
}
header nav ul li:nth-of-type(2) a {
  background-position: -105px 11px;
}
header nav ul li:nth-of-type(3) {
  width: 140px;
}
header nav ul li:nth-of-type(3) a {
  background-position: -190px 11px;
}
header nav ul li:nth-of-type(4) {
  width: 108px;
}
header nav ul li:nth-of-type(4) a {
  background-position: -330px 11px;
}
header nav ul li:nth-of-type(5) {
  width: 105px;
}
header nav ul li:nth-of-type(5) a {
  background-position: -438px 11px;
}
header nav ul li:nth-of-type(6) {
  width: 122px;
}
header nav ul li:nth-of-type(6) a {
  background-position: -543px 11px;
}
header nav ul li:nth-of-type(7) {
  width: 110px;
}
header nav ul li:nth-of-type(7) a {
  background-position: -665px 11px;
}
header nav ul li:nth-of-type(8) {
  width: 47px;
}
header nav ul li:nth-of-type(8) a {
  background-position: -775px 11px;
}
header nav ul li:nth-of-type(9) {
  width: 40px;
}
header nav ul li:nth-of-type(9) a {
  background-position: -822px 11px;
}
header nav ul li:nth-of-type(10) {
  width: 110px;
}
header nav ul li:nth-of-type(10) a {
  background-position: -862px 11px;
}

/** /header **/


/** story **/
#story {
  background-position: center top,center top;
  background-repeat: repeat-x,no-repeat;
  background-image: url(../images/story/story-gr.png),url(../images/story/story-bg.png);
  height: 896px;
}

#story h1 {
  background-image: url(../images/story/story-title.png);
}

#story .story-txt {
  margin: 0 auto;
  width: 800px;
  height: 398px;
}

/** /story **/

/** character **/
#character h1 {
  background-image: url(../images/character/character-title.png);
}

#character .chara {
  margin: 0 auto 60px;
  width: 800px;
}

#character .chara h3 {
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #442200;
  border-radius: 12px;
  height: 31px;
  margin: 0 0 26px 0;
  text-align: center;
  line-height: 35px;
}

#character .chara-detail {
  margin: 0 0 24px 0;
  letter-spacing: -.4em;
}
#character .chara-detail div {
  display: inline-block;
  letter-spacing: normal;
  vertical-align: top;
}

#character .chara-detail .chara-img {
  border-radius: 10px;
  background-color: #ffc600;
  margin: 0 24px 0 0;
  width: 240px;
  height: 240px;
  /*overflow: hidden;*/
  position: relative;
}
#character .chara-detail .chara-img > img {
  border-radius: 12px;
}
#character .chara-detail .chara-img a {
  position: absolute;
  top: -18px;
  left: -90px;
}
#character .chara-detail .chara-img a:hover {
  
}
/*
#character .chara-detail .chara-img img {
  -moz-transition: -moz-transform 0.3s linear;
  -webkit-transition: -webkit-transform 0.3s linear;
  -o-transition: -o-transform 0.3s linear;
  -ms-transition: -ms-transform 0.3s linear;
  transition: transform 0.3s linear;
}

#character .chara-detail .chara-img img:hover {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}
*/

#character .chara-word {
  margin: 0 0 18px 0;
}


/** /character **/

/** gallery **/
#gallery h1 {
  background-image: url(../images/gallery/gallery-title.png);
}

#gallery .gallery-list {
  box-sizing: border-box;
  width: 1000px;
  margin: 0 auto;
  padding: 0 12px 48px;
}

#gallery .gallery-list li {
  background-color: #fff;
  border-radius: 10px;
  margin: 12px;
  width: 220px;
  height: 220px;
  overflow: hidden;
}

#gallery .gallery-list li a {
  border-radius: 10px;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#gallery .gallery-list li a img {
  -moz-transition: -moz-transform 0.3s linear;
  -webkit-transition: -webkit-transform 0.3s linear;
  -o-transition: -o-transform 0.3s linear;
  -ms-transition: -ms-transform 0.3s linear;
  transition: transform 0.3s linear;
}

#gallery .gallery-list li a img:hover {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}


/** /gallery **/

/** special **/
#special {
  padding: 0 0 60px 0;
}
#special h1 {
  background-image: url(../images/special/special-title.png);
}

#special .special-item {
  margin: 0 auto 30px;
  width: 800px;
  border-bottom: 1px dashed #a1907f;
  padding: 0 0 36px 0;
}

#special .special-item:last-of-type {
  border: none;
  margin: 0 auto;
  padding: 0;
}

#special .special-item .special-image {
  /*background-color: #ffc600;*/
  background-color: #fff;
  border-radius: 10px;
  height: 420px;
  width: 100%;
  overflow: hidden;
  text-align: center;
  margin: 0 0 24px 0;
}
#special .special-item h3{
  background-color: #442200;
  border-radius: 10px;
  width: 100%;
  height: 30px;
  line-height: 34px;
  text-align: center;
}

#special .special-item p {
  margin: 0 0 24px 0;
  padding: 0;
  text-align: center;
}
#special .special-btn {
  text-align: center;
}
#special .special-btn a {
  box-sizing: border-box;
  border-radius: 20px;
  color: transparent;
  font-size: 0;
  display: inline-block;
  line-height: 39px;
  margin: 0 auto;
  width: 146px;
  height: 36px;
  border-color: #000;
  border-style: solid;
  border-width: 6px;
  -moz-transition: .3s linear;
  -webkit-transition: .3s linear;
  -o-transition: .3s linear;
  -ms-transition: .3s linear;
  transition: .3s linear;
  text-align: center;
}
#special .special-btn a:hover {
  border-color: #ffc600;
}
#special .special-btn a:first-of-type {
  margin: 0 23px 0 0;
}


/** /special **/

/** creators **/
#creators {
  padding: 0 0 87px 0;
}
#creators h1 {
  background-image: url(../images/creators/creators-title.png);
}

#creators .creator {
  margin: 0 auto 36px;
  width: 800px;
  letter-spacing: -.4em;
}
#creators .creator div {
  display: inline-block;
  vertical-align: top;
}

#creators .creator .creator-img {
  border-radius: 12px;
  margin: 0 24px 0 0;
  overflow: hidden;
}
/*
#creators .creator .creator-img img {
  -moz-transition: -moz-transform 0.3s linear;
  -webkit-transition: -webkit-transform 0.3s linear;
  -o-transition: -o-transform 0.3s linear;
  -ms-transition: -ms-transform 0.3s linear;
  transition: transform 0.3s linear;
}

#creators .creator .creator-img img:hover {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}
*/



/** /creators **/


/** product **/
#product {
  padding: 0 0 56px 0;
}
#product h1 {
  background-image: url(../images/product/product-title.png);
}

#product .product-details {
  margin: 0 auto;
  width: 800px;
}
/** /product **/

/** extra **/
#extra {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQMAAABKLAcXAAAABlBMVEVMaXH/0ACl/FDvAAAAAXRSTlMAQObYZgAAACFJREFUeF5jgAD7/yDwYQjxRnmjvP9gcAAiOHR4o7xRHgBsMISnCkQwVwAAAABJRU5ErkJggg==);
}
#extra h1 {
  background-image: url(../images/extra/extra-title.png);
  height: 175px;
}
#extra p {
  margin: 0;
  padding: 0;
  text-align: center;
}
#extra form {
  margin: 0;
  padding: 0;
}
#extra form label {
  background-color: #442200;
  background-image: url(../images/extra/extra-input-txt.png);
  background-repeat: no-repeat;
  background-position: 16px center;
  border-style: solid;
  border-width: 6px;
  border-color: #442200;
  border-radius: 18px;
  box-sizing: border-box;
  display: block;
  margin: 36px auto;
  height: 48px;
  width: 432px;
  text-align: right;
  position: relative;
}
#extra form label:after {
  content: "";
  position: absolute;
  bottom: -16px;
  left: 50%;
  margin-left: -30px;
  width: 0;
  height: 0;
  border-top: 16px solid #442200;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
}

#extra form label > input {
  border-radius: 12px;
  height: 36px;
  margin: 0;
  padding: 0 10px;
  border: none;
  box-sizing: border-box;
  outline: none;
  width: 265px;
}
#extra form label > input::-ms-clear {
    visibility:hidden;
}

#extra form label.hover {
  background-color: #aa0000;
  border-color: #aa0000;
}
#extra form label.hover:after {
  border-top: 16px solid #aa0000;
}

#make-title {
  width: 240px;
  height: 240px;
  background-color: #fff;
  border-radius: 12px;
  cursor: pointer;
  margin: 0 auto 72px;
  overflow: hidden;
  text-align: center;
  background-image: url(../images/extra/extra-btn.png);
  background-repeat: no-repeat;
}
#make-title:hover {
  cursor: not-allowed;
}
#make-title.allowed:hover {
  cursor: pointer;
  background-image: url(../images/extra/extra-btn-hover.png);
  -o-animation:shake 0.2s linear 1;
  -moz-animation:shake 0.2s linear 1;
  -webkit-animation:shake 0.2s linear 1;
  -ms-animation:shake 0.2s linear 1;
  animation:shake 0.2s linear 1;
}


@-o-keyframes shake {
    0% { transform:translate(3px, 2px) rotate(0deg); }
    10% { transform:translate(-2px, -3px) rotate(-1deg); }
    20% { transform:translate(-4px, 0px) rotate(1deg); }
    30% { transform:translate(0px, 3px) rotate(0deg); }
    40% { transform:translate(2px, -2px) rotate(1deg); }
    50% { transform:translate(-2px, 3px) rotate(-1deg); }
    60% { transform:translate(-4px, 2px) rotate(0deg); }
    70% { transform:translate(3px, 2px) rotate(-1deg); }
    80% { transform:translate(-2px, -2px) rotate(1deg); }
    90% { transform:translate(2px, 4px) rotate(0deg); }
    100% { transform:translate(2px, -3px) rotate(-1deg); }
}
@-moz-keyframes shake {
    0% { transform:translate(3px, 2px) rotate(0deg); }
    10% { transform:translate(-2px, -3px) rotate(-1deg); }
    20% { transform:translate(-4px, 0px) rotate(1deg); }
    30% { transform:translate(0px, 3px) rotate(0deg); }
    40% { transform:translate(2px, -2px) rotate(1deg); }
    50% { transform:translate(-2px, 3px) rotate(-1deg); }
    60% { transform:translate(-4px, 2px) rotate(0deg); }
    70% { transform:translate(3px, 2px) rotate(-1deg); }
    80% { transform:translate(-2px, -2px) rotate(1deg); }
    90% { transform:translate(2px, 4px) rotate(0deg); }
    100% { transform:translate(2px, -3px) rotate(-1deg); }
}
@-webkit-keyframes shake {
    0% { transform:translate(3px, 2px) rotate(0deg); }
    10% { transform:translate(-2px, -3px) rotate(-1deg); }
    20% { transform:translate(-4px, 0px) rotate(1deg); }
    30% { transform:translate(0px, 3px) rotate(0deg); }
    40% { transform:translate(2px, -2px) rotate(1deg); }
    50% { transform:translate(-2px, 3px) rotate(-1deg); }
    60% { transform:translate(-4px, 2px) rotate(0deg); }
    70% { transform:translate(3px, 2px) rotate(-1deg); }
    80% { transform:translate(-2px, -2px) rotate(1deg); }
    90% { transform:translate(2px, 4px) rotate(0deg); }
    100% { transform:translate(2px, -3px) rotate(-1deg); }
}
@-ms-keyframes shake {
    0% { transform:translate(3px, 2px) rotate(0deg); }
    10% { transform:translate(-2px, -3px) rotate(-1deg); }
    20% { transform:translate(-4px, 0px) rotate(1deg); }
    30% { transform:translate(0px, 3px) rotate(0deg); }
    40% { transform:translate(2px, -2px) rotate(1deg); }
    50% { transform:translate(-2px, 3px) rotate(-1deg); }
    60% { transform:translate(-4px, 2px) rotate(0deg); }
    70% { transform:translate(3px, 2px) rotate(-1deg); }
    80% { transform:translate(-2px, -2px) rotate(1deg); }
    90% { transform:translate(2px, 4px) rotate(0deg); }
    100% { transform:translate(2px, -3px) rotate(-1deg); }
}
@keyframes shake {
    0% { transform:translate(3px, 2px) rotate(0deg); }
    10% { transform:translate(-2px, -3px) rotate(-1deg); }
    20% { transform:translate(-4px, 0px) rotate(1deg); }
    30% { transform:translate(0px, 3px) rotate(0deg); }
    40% { transform:translate(2px, -2px) rotate(1deg); }
    50% { transform:translate(-2px, 3px) rotate(-1deg); }
    60% { transform:translate(-4px, 2px) rotate(0deg); }
    70% { transform:translate(3px, 2px) rotate(-1deg); }
    80% { transform:translate(-2px, -2px) rotate(1deg); }
    90% { transform:translate(2px, 4px) rotate(0deg); }
    100% { transform:translate(2px, -3px) rotate(-1deg); }
}

#make-result {
  display: none;
  text-align: center;
}
#make-result div {
  width: 860px;
  border-radius: 12px;
  border: 6px solid #442200;
  background-color: #442200;
  margin: 64px auto 68px;
  background-image: url(../images/extra/extra-result-title.png);
  background-repeat: no-repeat;
  background-position: center 10px;
}

#make-result div p {
  width: 100%;
  border-radius: 9px;
  background-color: #fff;
  box-sizing: border-box;
  font-size: 24px;
  font-weight: bold;
  margin: 40px 0 0 0;
  text-align: center;
  padding: 48px 18px;
}

#make-result a {
  background-repeat: no-repeat;
  background-position: center center;
  border-color: #442200;
  border-width: 6px;
  border-style: solid;
  border-radius: 18px;
  font-size: 0;
  box-sizing: border-box;
  color: transparent;
  display: inline-block;
  margin: 0 auto 72px;
  height: 48px;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
#make-result a:first-of-type {
  background-image: url(../images/extra/extra-back.png);
  background-color: #ee7755;
  width: 252px;
  margin-right: 36px;
}
#make-result a:last-of-type {
  background-image: url(../images/extra/extra-tweet.png);
  background-color: #55acee;
  width: 432px;
}
#make-result a:first-of-type:hover {
  background-color: #ce5735;
}
#make-result a:last-of-type:hover {
  background-color: #257cbe;
}


/** /extra **/

footer {
  color: #fff;
  font-size: 12px;
  padding: 0 0 24px 0;
  text-align: center;
}