@charset "UTF-8";

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

img {
}

.text {
}

/* --- 背景 --- */
/* 固定背景 */
.background-wide {
  background-image: url("../../../images/goods/giovanni/background/wide.png");
  background-attachment: fixed;
  background-position: top center;
  background-repeat: no-repeat;
  background-color: #002C53;
  background-size: 100%;
}
/* スクロール背景 */
.background-scroll {
}

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

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

/* kv */
#frame-kv {
  --width-frame-kv: 450;
}
.kv {
}

/* キャッチ */
#frame-catch {
  margin-top: 30px;
}
.catch {
}
.text-catch {
  --width-text-catch: 300;

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 15%;

  font-family: 'cinecaption';
  font-size: 16px;
  text-align: center;
/*  color: #92852a; */
  color: white;
}

/* プレイ内容 */
#frame-format {
  padding-top: 30px;
}
.format {
}
/* どういう内容の遊び？ */
#frame-howto {
  padding-top: 30px;
}
.title-howto {
}
.parts-howto {
}
/* 概要 */
#frame-information {
  --height-frame-information: 420;
  padding-top: 30px;
  position: relative;
  height: calc(var(--height-frame-information) * 1px);
}
.title-information {
}
.parts-information {
border: solid yellow 0px;
}
.text-information {
  --width-text-information: 440;

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

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

  font-family: 'GenJyuuGothic-Medium';
  font-size: 18px;
  background-color: #002C53;
  color: #92852a;
}
.text-information .contents {
  text-align: left;
  padding: 5px 10px;

  font-family: 'GenJyuuGothic-Medium';
  font-size: 14px;
  background-color: #002C53;
  color: white;
  line-height: 140%;
}

/* ナゾトキマーケット */
#frame-market {
  position: relative;
  padding-top: 30px;
}
.sale {
}
.button-market {
  --top-button-market: 130;
  --width-button-market: 287;

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: calc(var(--top-button-market) * 1px);
}
/* ロゴ */
#frame-logo {
  position: relative;
}
.logo {
}
.text-copyright {
  color: white;

  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
bottom: 0%;

  font-size: 12px;
  line-height: 120%;

  margin-bottom: 30px;
}

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