/*---------- import ----------*/
/*---------- common ----------*/
#heard-nav {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 997;
}
#heard-nav .inner {
  position: relative;
}
#heard-nav .nav-bar {
  position: absolute;
  top: -75px;
  right: 0;
  width: 100%;
  height: 75px;
  background: #3e3a39;
  z-index: 996;
  opacity: 0;
  transition: all .4s;
}
#heard-nav .nav-bar.on {
  opacity: 1;
  transform: translateY(75px);
}
#heard-nav #menu-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 75px;
  height: 75px;
  background: #fff;
  z-index: 997;
}
#heard-nav #menu-btn .menu-trigger,
#heard-nav #menu-btn .menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
#heard-nav #menu-btn .menu-trigger {
  position: relative;
  margin: 15px 12.5px;
  width: 50px;
  height: 44px;
}
#heard-nav #menu-btn .menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #3e3a39;
  border-radius: 4px;
}
#heard-nav #menu-btn .menu-trigger span:nth-of-type(1) {
  top: 0;
}
#heard-nav #menu-btn .menu-trigger span:nth-of-type(2) {
  top: 20px;
}
#heard-nav #menu-btn .menu-trigger span:nth-of-type(3) {
  bottom: 0;
}
#heard-nav #menu-btn:hover .menu-trigger span {
  background-color: #4dbc7d;
}
#heard-nav #menu-btn:hover .menu-trigger span:nth-of-type(1),
#heard-nav #menu-btn:hover .menu-trigger span:nth-of-type(3) {
  width: 20px;
}
#heard-nav #menu-btn:hover .menu-trigger span:nth-of-type(1) {
  -webkit-transform: translate(-1px, 13px) rotate(-45deg);
  transform: translate(-1px, 13px) rotate(-45deg);
}
#heard-nav #menu-btn:hover .menu-trigger span:nth-of-type(3) {
  -webkit-transform: translate(-1px, -13px) rotate(45deg);
  transform: translate(-1px, -13px) rotate(45deg);
}
#heard-nav h1.logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 260px;
  height: 75px;
  background: #fff;
  margin: 0;
  padding: 0;
  z-index: 997;
}
#heard-nav h1.logo a:hover {
  opacity: .8;
}

.btn-bar {
  padding: 50px 0;
  text-align: center;
}

.other-page #heard-nav h1.logo {
  background: #3e3a39;
}
.other-page #header-img {
  position: relative;
  width: 100%;
  min-height: 50vh;
  overflow: hidden;
  margin-bottom: 50px;
}
.other-page #header-img h2 {
  position: absolute;
  top: 95px;
  left: 0;
  display: inline-block;
  background: rgba(35, 24, 21, 0.8);
  color: #fff;
  margin: 0;
  padding: 20px;
  font-size: 32px;
}
.other-page #header-img .tile-img {
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-attachment: fixed;
}
.other-page #header-img .tile-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.other-page .parallax-container {
  display: block;
  position: relative;
  overflow: hidden;
}
.other-page .parallax-container .tile-img {
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
  background-repeat: no-repeat;
  background-position: 50% 0%;
  background-size: cover;
}
.other-page .topic-area {
  margin-top: 50px;
  margin-bottom: 80px;
}
.other-page .topic-area h3 {
  padding: 0 20px;
  margin-bottom: 30px;
  letter-spacing: .2em;
}
.other-page .topic-area h3 .sub-text {
  display: block;
  color: #666;
  font-size: 14px;
  line-height: 20px;
}
.other-page .topic-area .text-area {
  padding: 0 20px;
  margin-bottom: 30px;
}

/*---------- opening ----------*/
#opening-area {
  position: relative;
  width: 100%;
  height: 100%;
}
#opening-area #animation_container {
  position: absolute;
  top: 20px;
  left: 0;
  width: 100% !important;
  text-align: center;
  height: auto;
  margin: 0 auto;
  z-index: 999;
}
#opening-area #animation_container #canvas {
  width: 100%;
}
#opening-area #animation_container #dom_overlay_container {
  display: none;
}
#opening-area #btn-skip {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 999;
}
#opening-area #anime-img {
  animation: fadeIn 6s ease 3s 1 normal forwards;
  -webkit-animation: fadeIn 6s ease 3s 1 normal forwards;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  background: url("../img/contents/opening1_bk.jpg") center center/cover no-repeat fixed;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  z-index: 998;
}
#opening-area #anime-img #opening1 {
  animation: fadeIn 6s ease 6.8s 1 normal forwards;
  -webkit-animation: fadeIn 6s ease 6.8s 1 normal forwards;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  background: url("../img/contents/opening2_bk.jpg") center center/cover no-repeat fixed;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*---------- index ----------*/
#index .tile-text {
  display: inline-block;
  background: rgba(35, 24, 21, 0.8);
  text-align: center;
  color: #fff;
  margin: 20px;
  padding: 0 20px;
}
#index .tile-text h4 {
  font-size: 2.28rem;
}
#index .tile-text p {
  display: none;
}
#index .tile-img {
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  -webkit-transition: .3s;
  transition: .3s;
}
#index .header-tile,
#index .parallax-container,
#index .normal-container {
  display: block;
  position: relative;
  overflow: hidden;
}
#index .header-tile:hover .tile-img,
#index .parallax-container:hover .tile-img,
#index .normal-container:hover .tile-img {
  -webkit-filter: blur(3px);
  filter: blur(3px);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
#index .parallax-container .tile-img {
  background-attachment: fixed;
}
#index #header-img {
  zoom: 1;
  position: relative;
  width: 100%;
  height: 100vh;
}
#index #header-img:after {
  content: " ";
  display: block;
  clear: both;
}
#index #header-img #header-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 50vw;
  z-index: 10;
}
#index #header-img #header-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 50vw;
  z-index: 9;
}
#index #header-img .header-tile {
  position: relative;
  overflow: hidden;
  width: 50vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
#index #header-img #header-tile1 {
  height: 100vh;
}
#index #header-img #header-tile1 .tile-text {
  min-width: 220px;
}
#index #header-img #header-tile1 .tile-img {
  background-image: url("../img/contents/top_bk1.jpg");
}
#index #header-img #header-tile2 {
  height: 50vh;
}
#index #header-img #header-tile2 .tile-img {
  background-image: url("../img/contents/top_bk2.jpg");
}
#index #header-img #header-tile3 {
  height: 50vh;
}
#index #header-img #header-tile3 .tile-text {
  min-width: 340px;
}
#index #header-img #header-tile3 .tile-img {
  background-image: url("../img/contents/top_bk3.jpg");
}
#index #contents-tile1 {
  height: 480px;
}
#index #contents-tile1 .tile-text {
  min-width: 300px;
}
#index #contents-tile1 .tile-img {
  background-image: url("../img/contents/top_bk4.jpg");
}
#index #contents-tile2 {
  height: 480px;
  text-align: right;
}
#index #contents-tile2 .tile-img {
  background-image: url("../img/contents/top_bk5.jpg");
}

/*---------- designer ----------*/
#designer #header-img .tile-img {
  background-image: url("../img/contents/design_bk.jpg");
}
#designer #parallax-tile {
  height: 320px;
}
#designer #parallax-tile .tile-img {
  background-image: url("../img/contents/design_bk2.jpg");
}
#designer #topic1, #designer #topic2 {
  text-align: center;
}

/*---------- product ----------*/
#product.other-page #header-img {
  margin-bottom: 0;
}
#product #work_movie {
  height: 100vh;
  background: url("../img/share/movie_cover.png");
}
#product #work_movie .work_video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  background: url("../video/work_video.jpg") no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
#product #work_movie .work_btn {
  height: 100vh;
  position: relative;
  z-index: 3;
  display: flex;
  width: 50%;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: auto;
}
#product #work_movie .work_menu {
  margin: 20px;
  position: absolute;
  z-index: 3;
  bottom: 0;
  right: 0;
}

#product2 #header-img .tile-img {
  background-attachment: scroll;
  background-image: url("../img/contents/product_bk.jpg");
}
#product2 #topic2 {
  display: flex;
  align-items: center;
  min-height: 100vh;
}
#product2 #topic2.chart-bk {
  padding: 80px;
  background: url("../img/contents/product_chartbk1.jpg") center center/cover no-repeat;
}
#product2 #topic2 .chart-inner {
  width: 100%;
  padding: 20px;
  background: rgba(255, 255, 255, 0.9);
}
#product2 #topic2 .chart-area {
  margin: 0;
}
#product2 #topic2 .chart-area h4 {
  text-align: center;
}
#product2 #topic2 #chart-x {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30px;
}
#product2 #topic2 #chart-x .x-set {
  transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  font-size: 8px;
}
#product2 #topic2 .ChangeElem_Btn_Content {
  text-align: center;
}
#product2 #topic2 .ChangeElem_Btn_Content a {
  margin: 5px;
}
#product2 #topic2 .ChangeElem_Panel {
  display: none;
}
#product2 #topic2 small {
  display: block;
  padding: 10px 0 0;
}

/*---------- order ----------*/
#order #header-img .tile-img {
  background-image: url("../img/contents/order_bk.jpg");
}
#order .input-field h5 {
  padding-top: 8px;
}
#order .input-field h5,
#order .input-field .radio-area {
  padding-left: 3rem;
}

/*---------- media query ----------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
  #index #contents-tile1 .tile-img {
    background-attachment: scroll;
    background-image: url("../img/contents/top_bk4_sp.jpg");
  }

  .other-page #header-img .tile-img {
    background-attachment: scroll;
  }
}
@media only screen and (max-width: 767px) {
  .sidenav {
    width: 80vw;
  }
  .sidenav li {
    line-height: 48px;
    font-size: 1.64rem;
  }
  .sidenav li ul li {
    line-height: 36px;
    font-size: 1.15rem;
  }
  .sidenav li ul li a {
    padding-right: 0;
  }

  .other-page #heard-nav .nav-bar {
    top: -48px;
    height: 48px;
  }
  .other-page #heard-nav .nav-bar.on {
    transform: translateY(48px);
  }
  .other-page #heard-nav #menu-btn {
    width: 48px;
    height: 48px;
  }
  .other-page #heard-nav #menu-btn .menu-trigger {
    margin: 9.6px 8px;
    width: 32px;
    height: 28px;
  }
  .other-page #heard-nav #menu-btn .menu-trigger span:nth-of-type(2) {
    top: 12.5px;
  }
  .other-page #heard-nav #menu-btn:hover .menu-trigger span:nth-of-type(1),
  .other-page #heard-nav #menu-btn:hover .menu-trigger span:nth-of-type(3) {
    width: 12.5px;
  }
  .other-page #heard-nav #menu-btn:hover .menu-trigger span:nth-of-type(1) {
    -webkit-transform: translate(-1px, 8px) rotate(-45deg);
    transform: translate(-1px, 8px) rotate(-45deg);
  }
  .other-page #heard-nav #menu-btn:hover .menu-trigger span:nth-of-type(3) {
    -webkit-transform: translate(-1px, -8px) rotate(45deg);
    transform: translate(-1px, -8px) rotate(45deg);
  }
  .other-page #heard-nav h1.logo {
    width: 166px;
    height: 48px;
  }
  .other-page #heard-nav h1.logo img {
    vertical-align: top;
  }
  .other-page #header-img .tile-img {
    background-attachment: scroll;
  }

  #opening-area #anime-img {
    background: url("../img/contents/opening1_bk_sp.jpg") center center/cover no-repeat fixed;
  }
  #opening-area #anime-img #opening1 {
    background: url("../img/contents/opening2_bk_sp.jpg") center center/cover no-repeat fixed;
  }

  #index #heard-nav .nav-bar {
    top: -48px;
    height: 48px;
  }
  #index #heard-nav .nav-bar.on {
    transform: translateY(48px);
  }
  #index #heard-nav #menu-btn {
    width: 48px;
    height: 48px;
  }
  #index #heard-nav #menu-btn .menu-trigger {
    margin: 9.6px 8px;
    width: 32px;
    height: 28px;
  }
  #index #heard-nav #menu-btn .menu-trigger span:nth-of-type(2) {
    top: 12.5px;
  }
  #index #heard-nav #menu-btn:hover .menu-trigger span:nth-of-type(1),
  #index #heard-nav #menu-btn:hover .menu-trigger span:nth-of-type(3) {
    width: 12.5px;
  }
  #index #heard-nav #menu-btn:hover .menu-trigger span:nth-of-type(1) {
    -webkit-transform: translate(-1px, 8px) rotate(-45deg);
    transform: translate(-1px, 8px) rotate(-45deg);
  }
  #index #heard-nav #menu-btn:hover .menu-trigger span:nth-of-type(3) {
    -webkit-transform: translate(-1px, -8px) rotate(45deg);
    transform: translate(-1px, -8px) rotate(45deg);
  }
  #index #heard-nav h1.logo {
    width: 166px;
    height: 48px;
  }
  #index #heard-nav h1.logo img {
    vertical-align: top;
  }
  #index #header-img .tile-img {
    background-attachment: scroll;
  }
  #index .tile-text h4 {
    font-size: 1.64rem;
  }
  #index .tile-text p {
    display: block;
  }
  #index #header-img {
    height: auto;
  }
  #index #header-img #header-left {
    position: static;
    width: 100%;
  }
  #index #header-img #header-right {
    position: static;
    width: 100%;
  }
  #index #header-img .header-tile {
    width: 100%;
  }
  #index #header-img #header-tile1,
  #index #header-img #header-tile2,
  #index #header-img #header-tile3 {
    height: 100vh;
  }
  #index #header-img #header-tile1 .tile-text,
  #index #header-img #header-tile2 .tile-text,
  #index #header-img #header-tile3 .tile-text {
    min-width: auto;
  }
  #index #header-img #header-tile1 .tile-img {
    background-image: url("../img/contents/top_bk1_sp.jpg");
  }
  #index #header-img #header-tile2 .tile-img {
    background-image: url("../img/contents/top_bk2_sp.jpg");
  }
  #index #header-img #header-tile3 .tile-img {
    background-image: url("../img/contents/top_bk3_sp.jpg");
  }
  #index #contents-tile1,
  #index #contents-tile2 {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #index #contents-tile1 .tile-text,
  #index #contents-tile2 .tile-text {
    min-width: auto;
  }
  #index #contents-tile1 .tile-img {
    background-attachment: scroll;
    background-image: url("../img/contents/top_bk4_sp.jpg");
  }
  #index #contents-tile2 .tile-img {
    background-image: url("../img/contents/top_bk5_sp.jpg");
  }

  #designer #header-img .tile-img {
    background-image: url("../img/contents/design_bk_sp.jpg");
  }
  #designer #parallax-tile .tile-img {
    background-image: url("../img/contents/design_bk2_sp.jpg");
  }

  #product #header-img .tile-img {
    background-image: url("../img/contents/product_bk_sp.jpg");
  }
  #product #topic2.chart-bk {
    padding: 20px;
  }

  #order #header-img .tile-img {
    background-image: url("../img/contents/order_bk_sp.jpg");
  }
}
@media only screen and (max-width: 479px) {
  #product2 #topic2.chart-bk {
    padding: 20px;
  }
  #product2 #footer-bar a {
    display: block;
    margin-top: 15px;
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 15px;
  }
}

/*# sourceMappingURL=style.css.map */

/* PCでは横幅500pxで表示 */
div#footer-tile3{
		background-color: #dadada;
}
.fb-wrap{
  /* 以下2行は不要かも */
  max-width: 500px;
  width: 500px;
  text-align: center !important;
  margin: 0 auto !important;
	padding: 3% 0;
}

/* 896px以下は横幅100%、中央寄せ*/
@media screen and (max-width: 896px) {
 .fb-wrap{
  width: 100%;
  text-align: center !important;
  margin: 0 auto !important;
 }
.fb-page {
  text-align: center !important;
  margin: 0 auto !important;
 }
}