body { background: url(../images/back_comic.png) repeat-y center / 100%;}

#page { overflow: hidden;}

.wrapper {
  max-width: 1152px;
  width: 60%;
  margin: 0 auto;
}

/* .page_header { 
  width: 100%;
  height: 100vh;
  background: url(../images/top_back_pc.png) no-repeat top center / cover;
} */

.page_header { 
  width: 100%;
  padding-top: 56.25%;
  background: url(../images/top_back_pc.png) no-repeat top center / 100%;
  position: relative;
}

#movie, #tver, #tw { position: relative;}

section .back_fukidashi { 
  position: absolute;
  width: 12%;
}

section .turn_left { animation: TurnLeft 1.5s infinite;}

section .turn_right { animation: TurnRight 1.5s infinite;}

.page_header div {
  max-width: 1920px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  /* position: relative; */
  position: absolute;
  top: 0;
  left: calc(50% - 50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ng_manga_logo { 
  width: 73%;
  margin-bottom: 4%;
  transform: scale(0);
  transform-origin: center;
  animation: Logo .5s ease both;
}

.top_catch_left, .top_catch_right,
.top_sidecatch_left, .top_sidecatch_right { position: absolute;}

.top_catch_left {
  width: 54%;
  top: 1%;
  left: -100%;
  animation: SideCatchLeft .5s ease both;
}

.top_catch_right {
  width: 52%;
  top: 2%;
  right: -100%;
  animation: SideCatchRight .5s ease both;
}

.page_header picture { display: block;}

.page_header picture img { max-width: 100%;}

.top_sidecatch_left {
  width: 20%;
  left: 0;
  bottom: 8%;
  z-index: 5;
  transform: scale(0);
  transform-origin: center;
  animation: Logo .5s ease both;
}

.top_sidecatch_right {
  width: 23%;
  right: 0;
  bottom: 10%;
  z-index: 5;
  transform: scale(0);
  transform-origin: center;
  animation: Logo .5s ease both;
}

.top_time {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
}

#concept {
  width: 100%;
  padding: 15% 10% 20%;
  background: url(../images/concept_back_pc_top.png) no-repeat top center / 100%,
  url(../images/concept_back_pc_bottom.png) no-repeat bottom center / 100%, #f4e8c3;
  color: #000;
  font-family: ruika,sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: 3.6vw;
  position: relative;
}

#concept div {
  position: relative;
}

.fukidashi { position: absolute;}

.fukidashi img { max-width: 100%;}

#concept .fukidashi {
  width: 20%;
  top: -45%;
  left: -9%;
}

#concept li {
  margin-bottom: 3%;
  text-shadow: 3px 3px 0 #ffd658;
  position: relative;
  padding-left: 5.5%;
}

#concept li::before {
  content: "";
  position: absolute;
  display: block;
  width: 4.5%;
  height: 100%;
  top: 0;
  left: 0;
}

#concept li:last-child::before { height: 50%;}

#concept li:nth-child(1):before { background: url(../images/1.png) no-repeat center / 100%;}

#concept li:nth-child(2):before { background: url(../images/2.png) no-repeat center / 100%;}

#concept li:nth-child(3):before { background: url(../images/3.png) no-repeat center / 100%;}

#concept li:last-child { margin-bottom: 0;}

#concept li span, #concept02 li span { color: #d20a0a;}

#concept li br { display: none;}

#concept .ng, #concept02 .ng { 
  color: #000;
  display: inline-block;
  position: relative;
  padding-left: 17%;
}

#concept .ng::before {
  content: "";
  display: inline-block;
  width: 40%;
  height: 145%;
  background: url(../images/satsuei_logo_mini.png) no-repeat center / 100%;
  position: absolute;
  top: -32%;
  left: 0;
}

#concept02 {
  width: 100%;
  padding-top: 56.25%;  
  background: url(../images/concept_back_pc02.png) no-repeat center / 100%;
  margin-bottom: 15%;
  color: #000;
  font-family: ruika,sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: 3vw;
  position: relative;
}

#concept02 ul {
  position: absolute;
  top: 34%;
  left: 18%;
}

#concept02 li { 
  position: relative;
  margin-bottom: 3%
}

#concept02 li br { display: none;}

#concept02 li:last-child { margin-bottom: 0;}

#concept02 li::before {
  position: absolute;
  display: block;
  content: "";
  width: 4.5%;
  padding-top: 5%;
  top: 0;
  left: -5%;
}

#concept02 li:nth-child(1)::before { background: url(../images/1.png) no-repeat center / 100%;}

#concept02 li:nth-child(2)::before { background: url(../images/2.png) no-repeat center / 100%;}

#concept02 li:nth-child(3)::before { background: url(../images/3.png) no-repeat center / 100%;}

#concept02 .ng::before {
  display: block;
  content: "";
  width: 40%;
  padding-top: 18.55%;
  background: url(../images/satsuei_logo_mini.png) no-repeat center / 100%;
  position: absolute;
  top: -34%;
  left: 0;
}

#concept02 .fukidashi {
  position: absolute;
  display: block;
  width: 15%;
  padding-top: 8.5%;
  background: url(../images/fukidashi_concept.png) no-repeat center / 100%;
  top: 18%;
  left: 9%;
  z-index: 10;
}

#movie { 
  padding-top: 10%;
  margin-bottom: 12%;
}

#movie a {
  display: block;
  width: 100%;
  transition: all .1s;
  margin-bottom: 20%;
}

#movie a:hover, #tver a:hover { opacity: .6;}

#movie picture, #tver picture { 
  display: block;
  width: 100%;
}

#movie .back_fukidashi:nth-of-type(1) {
  top: 5%;
  left: 6%;
}

#movie .back_fukidashi:nth-of-type(2) {
  top: 40%;
  right: 5%;
}

#movie .back_fukidashi:nth-of-type(3) {
  bottom: 10%;
  left: 1%;
}

#movie picture img, #tver picture img { max-width: 100%;}

.youtube {
    position: relative;
    width: 100%;
}

.youtube::before {
  content: "";
  display: block;
  padding-top: calc(100% / (16/9));
}

.youtube > * {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.tvo-video {
  height: 100%;
  width: 100%;
}

.bc-player-default_default {
  font-size: 14px;
}

.vjs-social-overlay {
  font-size: 10px;
}

.youtube .fukidashi {
  width: 27%;
  top: -15%;
  left: -10%;
  z-index: 5;
}

#tver { margin-bottom: 10%;}

#tver a {
  display: block;
  width: 100%;
  transition: all .1s;
}

#tver .back_fukidashi {
  top: -5%;
  right: 0;
}

#tw .twitter_wrap {
  margin: 0 auto 18% auto;
  width: 65%;
  position: relative;
}

#tw .twitter_wrap::before {
  content: "";
  display: block;
  width: 50%;
  height: 30%;
  position: absolute;
  top: -27%;
  left: -27%;
  background: url(../images/fukidashi_twitter.png) no-repeat center / 100%;
}

#tw .twitter_wrap iframe { width: 100% !important;}

#tw .back_fukidashi:nth-of-type(1) {
  top: -30%;
  left: 5%;
}

#tw .back_fukidashi:nth-of-type(2) {
  top: 0;
  right: 5%;
}

#tw .back_fukidashi:nth-of-type(3) {
  bottom: -25%;
  left: 5%;
}

#tw .back_fukidashi:nth-of-type(4) {
  bottom: -45%;
  right: 5%;
}

#buzzooka {
  text-align: center;
  color: #fff;
  font-family: source-han-sans-japanese,sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.3vw;
  line-height: 1.8;
  margin-bottom: 5%;
}

#buzzooka img {
  width: 25%;
  margin-bottom: 1%;
}

@keyframes SideCatchLeft {
  from { left: -100%;}
  to { left: 0;}
}

@keyframes SideCatchRight {
  from { right: -100%;}
  to { right: 0;}
}


@keyframes Logo {
  from { transform: scale(0);}
  to { transform: scale(1);}
}

@keyframes TurnRight {
  0% { transform: rotate(0);}
  50% { transform: rotate(10deg);}
  100% { transform: rotate(0);} 
}

@keyframes TurnLeft {
  0% { transform: rotate(0);}
  50% { transform: rotate(-10deg);}
  100% { transform: rotate(0);} 
}

/* ----------------------- 縺薙％縺九ｉ繝ｬ繧ｹ繝昴Φ繧ｷ繝�  ----------------------- */

@media (max-width:767px) {
  .wrapper { width: 90%;}

  section .back_fukidashi { display: none;}

  .page_header { 
    padding-top: 145%;
    background: url(../images/top_back_sp.png) no-repeat center / 100%;
  }

  .ng_manga_logo { 
    width: 95%;
    margin-bottom: 35%;
  }

  .top_catch_left, .top_catch_right { width: 95%;}

  .top_catch_right { top: 7%;}

  .top_sidecatch_left, .top_sidecatch_right { 
    width: 40%;
    bottom: 27%;
  }

  #concept {
    padding: 40% 0;
    color: #fff;
    font-size: 6.4vw;
    background: url(../images/concept_back_sp_top.png) no-repeat top center / 100%, 
    url(../images/concept_back_sp_bottom.png) no-repeat bottom center / 100%, #0a1e37
  }

  #concept ul { 
    width: 90%;
    margin: 0 auto 5% auto;
    padding-left: 7.5%;
  }

  #concept li {
    text-shadow:3px 3px 2px #000, -3px -3px 2px #000,
    -3px 3px 2px #000,  3px -3px 2px #000,
     3px 0px 2px #000, -3px -0px 2px #000,
     0px 3px 2px #000,  0px -3px 2px #000;
     text-align: justify;
     padding-left: 2%;
     line-height: 1.2;
  }

  #concept li:nth-child(1):before { background: url(../images/1_sp.png) no-repeat center / 100%;}

  #concept li:nth-child(2):before { background: url(../images/2_sp.png) no-repeat center / 100%;}

  #concept li:nth-child(3):before { background: url(../images/3_sp.png) no-repeat center / 100%;}

  #concept li::before {
    width: 10%;
    height: 60%;
    top: -5%;
    left: -10%;
  }

  #concept li:last-child::before { 
    height: 35%;
    top: 5%;
  }

  #concept li span, #concept02 li span { color: #fcff00;}

  #concept li br, #concept02 li br { display: block;}

  #concept .ng {
    color: #fff;
    padding-left: 40%;
    margin-bottom: 5%;
  }

  #concept .ng::before {
    width: 50%;
    height: 195%;
    top: -32%;
  }

  #concept .fukidashi {
    width: 40%;
    top: -40%;
    left: 0;
  }

  #concept02 {
    padding-top: 145%;
    background: url(../images/concept_back_sp.png) no-repeat top center / 100%;
    color: #fff;
    font-size: 6.4vw;
    margin-bottom: 30%;
  }

  #concept02 .fukidashi {
    width: 35%;
    padding-top: 18.5%;
    top: 15%;
    left: 3%;
  }

  #concept02 ul {
    top: 29%;
    left: 17%;
}

  #concept02 li { margin-bottom: 8%;}

  #concept02 li::before {
    width: 10%;
    padding-top: 10%;
    top: -1%;
    left: -11%;
  }

  #concept02 li:last-child:before { top: 3% !important;}

  #concept02 .ng {
    color: #fff;
    padding-left: 40%;
    margin-bottom: 5%;
  }

  #concept02 .ng::before {
    width: 50%;
    padding-top: 21.55%;
    top: -34%;
    left: 0;
  }

  #concept02 li:nth-child(1)::before { background: url(../images/1_sp.png) no-repeat center / 100%;}

  #concept02 li:nth-child(2)::before { background: url(../images/2_sp.png) no-repeat center / 100%;}

  #concept02 li:nth-child(3)::before { background: url(../images/3_sp.png) no-repeat center / 100%;}

  #movie { padding-top: 15%;}

  #movie a { margin-bottom: 30%;}

  .youtube .fukidashi {
    width: 40%;
    top: -35%;
    left: -5%;
  }

  #tver {
    margin-bottom: 15%;
  }

  #tw .twitter_wrap { 
    width: 100%;
    margin-bottom: 30%;
  }

  #tw .twitter_wrap::before {
    height: 25%;
    top: -20%;
    left: -5%;
  }

  #buzzooka { font-size: 4vw;}

  #buzzooka img { width: 50%;}

  #buzzooka p { text-align: justify;}
}
/* 
@media (max-width:375px) {
  .page_header { height: 90vh;}  
} */