@charset "UTF-8";

body {
  overflow-x: hidden;		/* はみ出し要素対応 */
}

img {
}


/* --- 背景 --- */
/* 固定背景 */
.background-wide {
  background-image: url("../../../images/goods/qube/background/wide.png");
  background-attachment: fixed;
  background-position: top center;
  background-repeat: repeat-y;
  background-color: #FFF1E0;
  background-size: 100%;
/*
  --height-background-wide: 1152;
  height: calc(var(--height-background-wide) * 1px);
*/
}
/* スクロール背景 */
.background-scroll {
}

/* --- 枠 --- */
.frame {
  --width-frame: 450;

  position: relative;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: calc(var(--width-frame) * 1px);
  background-color: #FFF1E0;
}
/* --- コンテンツ --- */
.parts {
}

/* kv */
#frame-kv {
}
.kv {
}

/* キャッチ */
#frame-catch {
  margin-top: 0px;
  position: relative;
}
.background-catch {
}
.catch {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 12%;
}
/* プレイ内容 */
#frame-format {
  padding-top: 30px;
}
.format {
}
/* どういう内容の遊び？ */
#frame-howto {
  padding-top: 30px;
  position: relative;

}
.background-howto {
}
.howto {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 4%;
}
/* 概要 */
#frame-information {
/*  --height-frame-information: 530; */
  --height-frame-information: 420;

  padding-top: 30px;
  position: relative;
  height: calc(var(--height-frame-information) * 1px);
}
.title-information {
}
.parts-information {
}
.text-information {
  --width-text-information: 440;

  width: calc(var(--width-text-information) * 1px);
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 13%;

}
.text-information .heading {
  text-align: right;
  vertical-align: top;
  white-space: nowrap;
  padding: 5px 10px;

  font-size: 18px;
  background-color: #FFF1E0;
  color: red;
}
.text-information .contents {
  text-align: left;
  padding: 5px 10px;

  font-size: 16px;
  background-color: #FFF1E0;
  color: black;
}
.information {
}
/* ナゾトキマーケット */
#frame-market {
  padding-top: 10px;
  position: relative;
}
.background-market {
}
.sale {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 8%;
}
.button-market {
  --width-button-market: 320;

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 10%;
}
/* ロゴ */
#frame-logo {
}
.logo {
}


/* 450x未満 */
@media screen and (max-width: 450px) {
  .background-wide {
    background-image: none;
  }
  .background-scroll {
  }
  .frame {
    width: 100vw;
  }
  .parts {
  }
  #frame-kv {
  }
  .kv {
    width: 100vw;
  }
  #frame-catch {
  }
  .background-catch {
    width: 100vw;
  }
  .catch {
    width: 100vw;
  }
  #frame-format {
  }
  .format {
    width: 100vw;
  }
  #frame-howto {
  }
  .background-howto {
    width: 100vw;
  }
  .howto {
    width: 100vw;
  }
  #frame-information {
    height: calc(var(--height-frame-information) / 450 * 100vw);
  }
  .information {
    width: 100vw;
  }
  .parts-information {
    width: 100vw;
  }
  #frame-market {
  }
  .background-market {
    width: 100vw;
  }
  .sale {
    width: 100vw;
  }
  .button-market {
    width: calc(var(--width-button-market) / 450 * 100vw);
  }
  /* ロゴ */
  #frame-logo {
  }
  .logo {
    width: 100vw;
  }
}