#page-header {
  background: url("../img/c2.head.jpg") center top no-repeat;
  background-size: cover; }

.guide-char img {
  width: 22vw;
  max-width: 250px; }
.guide-char .char-img.char02 img, .guide-char .char-img.char03 img {
  width: 28vw;
  max-width: 320px; }
.guide-char .char-img.char04 img {
  width: 30vw;
  max-width: 350px; }
.guide-char .char-img.char00 img {
  width: 28vw;
  max-width: 350px; }

#c2-bg {
  position: fixed;
  background: #000;
  width: 100vw;
  height: 100vh;
  bottom: 0; }
  #c2-bg ul li {
    position: absolute;
    bottom: 0;
    left: 0;
    background-size: cover;
    width: 100vw;
    height: 100vh; }
    #c2-bg ul li.sc0 {
      background-image: url("../img/c2.bg0.jpg");
      opacity: 1; }
    #c2-bg ul li.sc1 {
      background-image: url("../img/c2.bg1.jpg");
      opacity: 0; }
    #c2-bg ul li.sc2 {
      background-image: url("../img/c2.bg2.jpg");
      opacity: 0; }
    #c2-bg ul li.sc3 {
      background-image: url("../img/c2.bg3.jpg");
      opacity: 0; }
    #c2-bg ul li.sc4 {
      background-image: url("../img/c2.bg4.jpg");
      opacity: 0; }

@media screen and (max-width: 660px) {
  .guide-char {
    right: -5vw; }
    .guide-char img {
      width: 40vw; }
    .guide-char .char-img.char00 img {
      width: 55vw; }
    .guide-char .char-img.char02, .guide-char .char-img.char03 {
      right: -7vw; }
      .guide-char .char-img.char02 img, .guide-char .char-img.char03 img {
        width: 55vw; }
    .guide-char .char-img.char04 {
      right: -7vw; }
      .guide-char .char-img.char04 img {
        width: 60vw; }

  #c2-bg ul li.sc0 {
    background-image: url("../img/c2.bg0.sp.jpg");
    opacity: 1; }
  #c2-bg ul li.sc1 {
    background-image: url("../img/c2.bg1.sp.jpg");
    opacity: 0; }
  #c2-bg ul li.sc2 {
    background-image: url("../img/c2.bg2.sp.jpg");
    opacity: 0; }
  #c2-bg ul li.sc3 {
    background-image: url("../img/c2.bg3.sp.jpg");
    opacity: 0; }
  #c2-bg ul li.sc4 {
    background-image: url("../img/c2.bg4.sp.jpg");
    opacity: 0; } }