@charset "UTF-8";
/* --------------------------------------------------------------
	
La-mulana1 Website CSS - responsive support
2020/07/17 ver. 

--------------------------------------------------------------  */
/* =Common
-------------------------------------------------------------- */
body {
  min-width: 0;
  width: 100%;
  height: auto;
  background: #000; }

.pc {
  display: none; }

.sp {
  display: block; }

.inner {
  width: 100% !important;
  padding-left: 2em;
  padding-right: 2em;
  box-sizing: border-box; }

img.stretch {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  float: none; }

.floatright, .floatleft {
  float: none;
  padding: 0 0 2em 0;
  width: 100%;
  height: auto; }

.spleft {
  text-align: left !important; }

.ss-notes {
  text-align: center; }

/* =Header
-------------------------------------------------------------- */
/* =Footer
-------------------------------------------------------------- */
#footer {
  font-size: .6rem;
  padding: 4rem 10px 1rem 10px; }

.copyright {
  font-size: .6rem; }

/* =Home
-------------------------------------------------------------- */
#homepage #header {
  background-attachment: inherit;
  background-size: cover;
  background-attachment: inherit; }
  #homepage #header .logo img {
    top: 0; }
  #homepage #header .inner #head_logo {
    width: 120px;
    left: 10px;
    top: 10px; }
    #homepage #header .inner #head_logo img {
      width: 100%;
      height: auto; }
  #homepage #header h1.mainimage img {
    width: 95%; }

/* =Home - about
-------------------------------------------------------------- */
.about {
  background: url(../images/bg_face1.jpg) no-repeat center bottom;
  background-size: contain; }
  .about .inner {
    padding: 60px 20px; }
    .about .inner .msg {
      margin-bottom: 1em; }

.about#pray {
  background: url(../images/bg_face2.jpg) #000 no-repeat center bottom;
  background-size: contain;
  background-attachment: scroll; }
  .about#pray .inner {
    padding: 210px 20px; }

#release .inner {
  padding: 75px 40px; }

/* =Home - Information
-------------------------------------------------------------- */
#information .inner {
  display: block; }
  #information .inner #newsfeed {
    margin-bottom: 2em; }
  #information .inner #newsfeed, #information .inner #twitterfeed {
    width: auto; }

/* =Home - ss
-------------------------------------------------------------- */
#ss .ss .inner {
  padding: 8px 0; }
  #ss .ss .inner ul {
    grid-template-rows: auto;
    grid-template-columns: 50% 50%; }

/* =Home - info-hardware
-------------------------------------------------------------- */
#release .inner .info-hardware {
  display: block; }
  #release .inner .info-hardware .info-console,
  #release .inner .info-hardware .info-pc {
    width: auto;
    margin-bottom: 2em; }

/* =Child Page Common
-------------------------------------------------------------- */
body.page #contents {
  padding: 1em 0; }
  body.page #contents .tips {
    padding: 20px 30px 40px 30px; }
    body.page #contents .tips .tips-image {
      float: none;
      width: 100%; }
    body.page #contents .tips h3 {
      text-align: left; }
  body.page #contents .chara h3 {
    margin-top: 0; }

/* =Adventure
-------------------------------------------------------------- */
body#page .pcwin {
  width: auto;
  margin: 0 1em 2em 1em;
  padding: 60px 30px; }

body#page #story-1 .legend-body,
body#page #story-2 .legend-body {
  line-height: 2; }

body#page #story-2 .bg-map {
  line-height: 1.5; }

body#page .tips-body {
  display: block; }
  body#page .tips-body .tips-image,
  body#page .tips-body .tips-txt {
    width: 100%; }
  body#page .tips-body .tips-image {
    margin-bottom: 1em; }

/* =Character
-------------------------------------------------------------- */
body#page .character::before {
  display: none; }

body#page .character .inner {
  display: block; }
  body#page .character .inner .character-body {
    margin-bottom: 1em; }
    body#page .character .inner .character-body header {
      text-align: center; }
      body#page .character .inner .character-body header .character-ico {
        float: none;
        display: block;
        margin: 0 auto 5px auto; }
      body#page .character .inner .character-body header h2, body#page .character .inner .character-body header h3 {
        text-align: center; }
      body#page .character .inner .character-body header::after {
        width: 100%;
        top: 115px;
        text-align: center; }
  body#page .character .inner .character-img {
    margin: 0; }

#chara_07 .character-body header::after,
#chara_08 .character-body header::after,
#chara_09 .character-body header::after {
  top: 37px !important; }

/* =Console
-------------------------------------------------------------- */
body#page .consoles section {
  padding: 0; }
  body#page .consoles section dl {
    font-size: 1em; }
  body#page .consoles section .L1l2_premium {
    display: block; }
    body#page .consoles section .L1l2_premium .special-img {
      margin-bottom: 1em; }
    body#page .consoles section .L1l2_premium .special-detail {
      margin: 0; }
  body#page .consoles section .console-basic-info-content {
    display: block; }
    body#page .consoles section .console-basic-info-content .txt {
      margin-left: 0;
      margin-top: 1em; }

body#page .consoles .shops {
  display: block; }
  body#page .consoles .shops .shop {
    width: 80%; }

body#page .consoles .shops-2 li {
  width: 49%; }

.console-basic-info small {
  font-size: 1em !important; }

/* =Extra
-------------------------------------------------------------- */
body#page #extra ul.img-thumb {
  grid-template-rows: auto;
  grid-template-columns: 50% 50%; }

/* =ナビゲーション
-------------------------------------------------------------- */
#globalnav {
  display: none; }

#mov-nav-toggle-button {
  background: #000000;
  width: 50px;
  height: 50px;
  padding: 0;
  color: #fff;
  border: none;
  border-radius: 2px;
  z-index: 1000; }
  #mov-nav-toggle-button.active {
    background: #724004; }

#mov-nav-toggle-button span,
#mov-nav-toggle-button::before,
#mov-nav-toggle-button::after {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 18px;
  height: 3px;
  margin: auto;
  background: #fff; }

#mov-nav-toggle-button span {
  overflow: hidden;
  z-index: 1;
  color: #000; }

#mov-nav-toggle-button::before {
  z-index: 2;
  transform: translate(0, -7px);
  content: ""; }

#mov-nav-toggle-button::after {
  z-index: 2;
  transform: translate(0, 7px);
  content: ""; }

#mov-nav-toggle-button span {
  opacity: 1;
  transition: opacity 150ms 50ms; }

#mov-nav-toggle-button::before,
#mov-nav-toggle-button::after {
  transition: transform 200ms; }

#mov-nav-toggle-button.active span {
  opacity: 0;
  transition: opacity 150ms; }

#mov-nav-toggle-button.active::before {
  transform: rotate(45deg); }

#mov-nav-toggle-button.active::after {
  transform: rotate(-45deg); }

@media screen and (max-width: 768px) {
  #mov-nav-toggle-button {
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1100; } }