/* ************************************************************** */
/* System                                                         */
/* ************************************************************** */
.top_title {
  position: relative;
  display: block;
  width: 90%;
  max-width: 960px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8em;
  line-height: 0;
}
/* + media query ++++++++++++++++++++++++++++++++++++++++++++++++ */
@media all and (min-width: 768px) {
  .top_title>div {
    width: 22.5%;
  }
}
@media all and (max-width: 767px) {
  .top_title>div {
    width: 40%;
  }
}
.top_title>div::before {
  content: "";
  display: block;
  padding-top: 34.8%;
}
.top_title>div>img {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.scene_common,
.scene_common>div {
  position: relative;
  display: block;
  width: 100%;
  background-position: center center;
  background-repeat: no-repeat;
}
.scene_common {
  background-size: cover;
  overflow: hidden;
}
.scene_common>div {
  height: 100%;
  transition: opacity 1s, margin-top 1.5s;
}
.scene_common>div.hddn {
  opacity: 0;
  margin-top: 5%;
}
@media all and (min-width: 768px) {
  .scene_common {
    height: calc( 100vh - 5em );
  }
  #scene_01 { background-image: url('../../img/system/wide/scene_img_01.png'); }
  #scene_02 { background-image: url('../../img/system/wide/scene_img_02.png'); }
  #scene_03 { background-image: url('../../img/system/wide/scene_img_03.png'); }
  #scene_04 { background-image: url('../../img/system/wide/scene_img_04.png'); }
  #scene_05 { background-image: url('../../img/system/wide/scene_img_05.png'); }
  #scene_06 { background-image: url('../../img/system/wide/scene_img_06.png'); }
  #scene_01>div { background-image: url('../../img/system/wide/scene_txt_01.png'); }
  #scene_02>div { background-image: url('../../img/system/wide/scene_txt_02.png'); }
  #scene_03>div { background-image: url('../../img/system/wide/scene_txt_03.png'); }
  #scene_04>div { background-image: url('../../img/system/wide/scene_txt_04.png'); }
  #scene_05>div { background-image: url('../../img/system/wide/scene_txt_05.png'); }
  #scene_06>div { background-image: url('../../img/system/wide/scene_txt_06.png'); }
  .scene_common>div {
    background-size: auto 80%;
  }
}
@media all and (max-width: 767px) {
  .scene_common {
    height: calc( 100vh - 4.5em );
  }
  #scene_01 { background-image: url('../../img/system/nrrw/scene_img_01.png'); }
  #scene_02 { background-image: url('../../img/system/nrrw/scene_img_02.png'); }
  #scene_03 { background-image: url('../../img/system/nrrw/scene_img_03.png'); }
  #scene_04 { background-image: url('../../img/system/nrrw/scene_img_04.png'); }
  #scene_05 { background-image: url('../../img/system/nrrw/scene_img_05.png'); }
  #scene_06 { background-image: url('../../img/system/nrrw/scene_img_06.png'); }
  #scene_01>div { background-image: url('../../img/system/nrrw/scene_txt_01.png'); }
  #scene_02>div { background-image: url('../../img/system/nrrw/scene_txt_02.png'); }
  #scene_03>div { background-image: url('../../img/system/nrrw/scene_txt_03.png'); }
  #scene_04>div { background-image: url('../../img/system/nrrw/scene_txt_04.png'); }
  #scene_05>div { background-image: url('../../img/system/nrrw/scene_txt_05.png'); }
  #scene_06>div { background-image: url('../../img/system/nrrw/scene_txt_06.png'); }
  .scene_common>div {
    background-size: contain;
  }
}