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

.guide-char img {
  width: 22vw;
  max-width: 300px; }
.guide-char .char02 img {
  width: 30vw;
  max-width: 340px;
  margin-right: -2vw; }
.guide-char .char03 img {
  width: 30vw;
  max-width: 340px;
  margin-right: -2vw; }

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

@media screen and (max-width: 660px) {
  .guide-char {
    right: -5vw; }
    .guide-char img {
      width: 46vw; }
    .guide-char .char-img.char02 {
      right: -6vw; }
      .guide-char .char-img.char02 img {
        width: 59vw; }
    .guide-char .char-img.char03 {
      right: -7vw; }
      .guide-char .char-img.char03 img {
        width: 65vw; }

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