.hid {
  visibility: hidden;
}

@media all and (min-width: 768px) {
  .movie {
    width: 600px;
    margin: 2em auto;
    border: 20px #e4ee58 solid;
    padding: 1em;
  }
}

@media all and (max-width: 767px) {
  .movie {
    margin: 1em auto;
    border: 2vw #e4ee58 solid;
    padding: 1vw;
  }
}

#hakusyo #contents.nn_top h1, #hakusyo #contents.nn_top h2, #hakusyo #contents.nn_top h3 {
  font-weight: 600;
  line-height: 160%;
  text-align: center;
}

#hakusyo #contents.nn_top h1 {
  font-size: 200%;
  animation: slideh1 .5s ease 0s 1 forwards;
}

#hakusyo #contents.nn_top h2 {
  font-size: 260%;
  text-align: center;
  padding: 0 0 .2em;
  background-size: 220px auto;
  margin: 1em auto 0;
}

#hakusyo #contents ol#join {
  margin: 2em auto;
  width: 98%;
  counter-reset: list;
}

#hakusyo #contents ol#join li {
  position: relative;
  line-height: 140%;
  font-size: 130%;
  border-bottom: 1px dashed #f898b9;
  padding: 0 0 .6em 2em;
  margin: .8em 0 .5em;
}

#hakusyo #contents ol#join li::before {
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: 0;
  width: 30px;
  height: 30px;
  text-align: center;
  color: #fff;
  line-height: 30px;
  background: #e84a86;
  border-radius: 50%;
  top: 0;
}

.sample {
  width: 440px;
  height: 539px;
  background: url(../hakusyo/img/screen.png) no-repeat right center;
  background-size: contain;
  margin: 2em auto 1.5em;
}

#hakusyo #contents ol#join li span.f80 {
  line-height: 140% !important;
  display: inline-block;
  padding: .5em 0 0;
}

#hakusyo #contents.nn_top h3 {
  font-size: 200%;
  margin: 1.2em 0 1.2em;
}

#hakusyo #contents .caution h4 {
  padding: .2em 0;
  font-size: 160%;
  font-weight: 600;
  line-height: 140%;
  text-align: center;
}

#hakusyo #contents .caution {
  padding: .8em 1.2em;
  margin: 0 auto .5em;
  border: 1px dashed #000;
  border-radius: 14px;
}

#hakusyo #contents .caution ul {
  margin: 1em auto 0;
  line-height: 140%;
}

#hakusyo #contents .caution ul li {
  margin: .6em 0;
  line-height: 140%;
  text-indent: -1em;
  padding-left: 1em;
}

/*result*/
#hakusyo #contents.nngraph h1 {
  /* width: 100%; */
  height: 196px;
  margin: -60px -60px 0;
  text-align: center;
  background: url(../hakusyo/img/ttl_pc.png) no-repeat center center;
  ku: cover;
}

#hakusyo #contents.nngraph h2 {
  font-size: 200%;
  text-align: center;
  margin: 0 auto;
  line-height: 1.4;
}

#contents.nngraph .graph {
  width: 800px;
  height: 726px;
  margin: 20px auto 0;
  border-radius: 16px;
  background-size: cover;
  position: relative;
}

#contents.nngraph .speech {
  position: absolute;
  top: -45px;
  right: 67px;
  width: 60%;
}

#contents.nngraph .graph h3 {
  font-size: 140%;
  font-size: 22px;
  font-weight: 600;
  line-height: 150%;
  text-align: center;
}

#contents.nngraph .graph h3 span.num {
  font-size: 250%;
  letter-spacing: -.01em;
  font-family: balloon-d, sans-serif;
  font-weight: 800;
  font-style: normal;
}

#contents.nngraph .graph h3 {
  position: relative;
  width: 100%;
  padding: 1.3em 0 .6em;
  background-color: rgba(255, 255, 255, 0.9);
  border: 3px solid #42af7c;
  text-align: center;
  box-shadow: 5px 5px 0 #42af7c;
  border-radius: 22px;
}

#contents.nngraph .graph h3::before,
#contents.nngraph .graph h3::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
}

#contents.nngraph .graph h3::before {
  right: 70px;
  bottom: -32px;
  border-top: 30px solid #42af7c;
  border-right: 14px solid transparent;
  border-left: 14px solid transparent;
  /*transform-origin: left top;
  transform: skewX(40deg);*/
}

#contents.nngraph .graph h3::after {
  right: 73px;
  top: 100%;
  border-top: 26px solid rgba(255, 255, 255, 1);
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
  /*transform-origin: left top;
  transform: skewX(40deg);*/
}


#contents.nngraph.ep2 .graph h3::before {
  right: 98px;
}

#contents.nngraph.ep2 .graph h3::after {
  right: 103px;
}

#contents.nngraph .mainph {
  width: 800px;
  height: 835px;
  /* background-color: #e4ee58; */
  padding: 20px;
  /* margin: 4em auto 3em; */
  background-size: cover;
  background-repeat: no-repeat;
  /* background-position: center center; */
  position: relative;
  /*background-image:url(../img/hakusyo/result/ep1.jpg);*/
  /* border: 10px solid #e4ee58; */
  position: relative;
  border-radius: 15px;
}

#contents.nngraph .mainph_s {
  width: 400px;
  height: 266px;
  padding: 0;
  border: 5px solid #e4ee58;
  margin: auto;
}

#contents.nngraph .mainph::before,
#contents.nngraph .mainph::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  z-index: 1;
}

#contents.nngraph .mainph::before {
  /* top: -10px; */
  /* right: -10px; */
  /* border-top: 40px solid #e4ee58; */
  /* border-right: 40px solid #e4ee58; */
  /* border-bottom: 40px solid transparent; */
  /* border-left: 40px solid transparent; */
}

#contents.nngraph .mainph::after {
  /* bottom: -10px; */
  /* left: -10px; */
  /* border-top: 40px solid transparent; */
  /* border-right: 40px solid transparent; */
  /* border-bottom: 40px solid #e4ee58; */
  /* border-left: 40px solid #e4ee58; */
}

#contents.nngraph .mainph_s::before {
  top: -5px;
  right: -5px;
  border-top: 20px solid #e4ee58;
  border-right: 20px solid #e4ee58;
  border-bottom: 20px solid transparent;
  border-left: 20px solid transparent;
}

#contents.nngraph .mainph_s::after {
  bottom: -5px;
  left: -5px;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid #e4ee58;
  border-left: 20px solid #e4ee58;
}

#hakusyo #contents.nngraph h4 {
  width: 500px;
  height: 96px;
  margin: 0 auto;
  text-align: center;
  background-size: contain;
}

.qvoice {
  width: 95%;
  height: 0;
  margin: 1em auto;
  padding: 40% 0 0;
  background-size: contain;
}


#hakusyo #contents.nngraph .ph_area {
  margin: 2em auto;
  text-align: center;
  width: 96%;
}

#hakusyo #contents.nngraph .ph_s {
  width: 46%;
  padding: 30% 0 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  display: inline-block;
  margin: 0 1.5% 0;
  font-size: 0;
  /*background-image:url(../img/hakusyo/result/ep1_2.jpg);*/
  border: 5px solid #ffe7e7;
  background-color: #ffeae8;
}

#hakusyo #contents.nngraph h5 {
  font-size: 160%;
  text-align: center;
  margin: 0 auto;
  line-height: 160%;
  font-weight: 600;
}

ul.streambnr {
  width: 90%;
  /* margin: 2em auto 0; */
  padding: 0em 0 2em;
}

#hakusyo a.btn_df {
  width: 50%;
  color: #ff4083;
}

#hakusyo a.btn_df::before {
  border: 2px solid #ff4083;
}

#hakusyo a.btn_df::after {
  background-color: #ffe7e7;
}

@media all and (min-width: 768px) {
  section#contents {
    margin: 2em 0 0;
  }

  .btn a>span {
    font-size: 100%;
  }

  .btn a {
    width: 70%;
  }

  #hakusyo #contents h1.subtxt, .qbtn, p.error {
    display: none;
  }

  #hakusyo #contents.nngraph {
    margin: 2em 0;
  }

  .qr_pc {
    width: 850px;
    height: 284px;
    background: url(../hakusyo/img/qr_pc.png?2) no-repeat center center;
    background-size: cover;
    margin: 1.5em auto 2.5em;
    border-radius: 20px;
    border: 2px solid #fff;
  }

  #hakusyo #contents.nngraph .ph_s:nth-of-type(3n) {
    margin: 2.5% auto 0;
  }

  #hakusyo #contents.nngraph.ep10 .ph_s {
    margin: 0 1.5% 2%;
  }

  .qr_pc a {
    /* display: block; */
    /* margin: 1em auto 4em; */
    /* border-radius: 24px; */
    /* width: 500px; */
    /* height: 146px; */
    /* transition: all 0.3s ease; */
    /* background-size: cover; */
    /* border: 3px solid #fff; */
    /* box-shadow: 7px 7px #df336f; */
    /* transition: .5s; */
    /* pointer-events: none; */
    /* cursor: default; */
    /* opacity: 0.7; */
    display: block;
    margin: 1em auto 4em;
    border-radius: 24px;
    width: 500px;
    height: 146px;
    transition: all 0.3s ease;
    background-size: cover;
    /* border: 3px solid #fff; */
    /* box-shadow: 7px 7px #df336f; */
    transition: .5s;
    box-shadow: 4px 4px #9c9c9c;
    pointer-events: none;
    cursor: default;
    /* opacity: 0.7; */
  }
}

@media all and (max-width: 767px) {
  p.error {
    font-size: 5vw;
    text-align: center;
    margin: 0 auto 1em;
    line-height: 140%;
  }

  .qbtn {
    margin: 5% auto 6%;
    border-radius: 24px;
    width: 86%;
    position: relative;
    padding: 25% 0 0;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .qbtn a {
    display: block;
    border-radius: 2vw;
    background: url(../hakusyo/img/btn.png?2) no-repeat center center;
    background-size: cover;
    /* border: 3px solid #fff; */
    box-shadow: 4px 4px #9c9c9c;
    /* transition: .5s; */
  }

  .qbtn a:hover {
    /* transform: translate(7px, 7px); */
    box-shadow: none;
  }

  .qr_pc, #hakusyo #contents h1 span.subtxt {
    display: none;
  }

  #hakusyo #contents.nn_top h1 {
    font-size: 5vw;
    line-height: 140%;
  }

  #hakusyo #contents h1.subtxt {
    font-size: 5.3vw;
  }

  #hakusyo #contents.nn_top h2 {
    font-size: 6.8vw;
    background-size: 40%;
    margin: 8% auto 0;
  }

  #hakusyo #contents ol#join {
    margin: 5% auto;
    width: 94%;
  }

  #hakusyo #contents ol#join li {
    font-size: 4.6vw;
    padding: 0 0 3% 10%;
    margin: 0 0 4%;
    line-height: 160%;
  }

  #hakusyo #contents ol#join li::before {
    top: 3%;
    width: 7vw;
    height: 6.8vw;
    line-height: 7vw;
    /*max-width:30px;
max-height:30px;*/
  }

  .sample {
    width: 100%;
    height: 0;
    padding: 95% 0 0;
    margin: 2em auto 1.5em;
    position: relative;
    background-position: center;
  }

  .sample img, .qbtn a {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  #hakusyo #contents.nn_top h3 {
    font-size: 4.4vw;
    line-height: 150%;
  }

  #hakusyo #contents .caution h4 {
    font-size: 4.5vw;
    padding: 0 0 2.5%;
    margin: 0 auto;
  }

  #hakusyo #contents .caution {
    width: 94%;
    padding: 2.5% 4% 2.5% 2.5%;
  }

  #hakusyo #contents .caution ul li {
    font-size: 90%;
  }

  /*result*/
  #hakusyo #contents.nngraph {
    padding: 4% 3% 0;
  }

  #hakusyo #contents.nngraph h1 {
    /* width: 80%; */
    height: 0;
    margin: -4vw -3vw 0;
    text-align: center;
    background: url(../hakusyo/img/ttl_pc.png) no-repeat center center;
    background-size: cover;
    padding: 20% 0 0;
  }

  #hakusyo #contents.nngraph h2 {
    font-size: 5vw;
    width: 100%;
  }

  #contents.nngraph .graph {
    width: 95%;
    height: auto;
    padding: 86% 0 0;
    margin: 10% auto 0;
  }

  #contents.nngraph .speech {
    position: absolute;
    top: -12%;
    right: -1.5%;
    width: 77%;
  }

  #contents.nngraph .graph h3 {
    font-size: 3.0vw;
    line-height: 150%;
    padding: 6% 0 2.5%;
    border-radius: 16px;
    border: 2px solid #42af7c;
    box-shadow: 3px 3px 0 #42af7c;
  }

  #contents.nngraph .graph h3::before {
    right: 10.2%;
    top: 105%;
    border-top: 4.8vw solid #42af7c;
    border-right: 2vw solid transparent;
    border-left: 2vw solid transparent;
  }

  #contents.nngraph .graph h3::after {
    right: 11.2%;
    top: 100%;
    border-top: 4.6vw solid rgba(255, 255, 255, 1);
    border-right: 1.8vw solid transparent;
    border-left: 1.8vw solid transparent;
  }

  #contents.nngraph.ep2 .graph h3::before {
    right: 15.7%;
  }

  #contents.nngraph.ep2 .graph h3::after {
    right: 17.3%;
  }

  #contents.nngraph.ep3 .graph h3::before {
    right: 12.1%;
  }

  #contents.nngraph.ep3 .graph h3::after {
    right: 13%;
  }

  #contents.nngraph.ep4 .graph h3::before {
    right: 23%;
    /* border-top: 4.2vw solid rgba(1, 196, 238, 0.5); */
  }

  #contents.nngraph.ep4 .graph h3::after {
    right: 24.2%;
    /* border-top: 4vw solid rgba(255, 255, 255, 0.8); */
  }

  #contents.nngraph.ep5 .graph h3::before {
    right: 47.2%;
  }

  #contents.nngraph.ep5 .graph h3::after {
    right: 47.8%;
  }

  #contents.nngraph.ep6 .graph h3::before {
    right: 36%;
  }

  #contents.nngraph.ep6 .graph h3::after {
    right: 36.7%;
  }

  #contents.nngraph.ep7 .graph h3::before {
    right: 48.8%;
    border-top: 4.2vw solid rgba(1, 196, 238, 0.5);
  }

  #contents.nngraph.ep7 .graph h3::after {
    right: 49.5%;
    border-top: 4vw solid rgba(255, 255, 255, 0.8);
  }

  #contents.nngraph.ep8 .graph h3::before {
    right: 77.5%;
    border-top: 4vw solid rgba(1, 196, 238, 0.5);
  }

  #contents.nngraph.ep8 .graph h3::after {
    right: 78.1%;
    border-top: 3.8vw solid rgba(255, 255, 255, 0.8);
  }

  #contents.nngraph.ep9 .graph h3::before {
    right: 39.3%;
    border-top: 4vw solid rgba(1, 196, 238, 0.5);
  }

  #contents.nngraph.ep9 .graph h3::after {
    right: 40.1%;
    border-top: 3.8vw solid rgba(255, 255, 255, 0.8);
  }

  #contents.nngraph.ep10 .graph h3::before {
    right: 23.8%;
  }

  #contents.nngraph.ep10 .graph h3::after {
    right: 24.6%;
  }

  @media all and (max-width: 320px) {}

  #contents.nngraph .mainph {
    width: 100%;
    /* margin: 6% auto 6%; */
    height: auto;
    padding: 104.431818% 0 0;
    /* border: 6px solid #e4ee58; */
  }

  #contents.nngraph .mainph::before {
    /* top: -6px; */
    /* right: -6px; */
    /* border-top: 20px solid #e4ee58; */
    /* border-right: 20px solid #e4ee58; */
    /* border-bottom: 20px solid transparent; */
    border-left: 20px solid transparent;
  }

  #contents.nngraph .mainph::after {
    /* bottom: -6px; */
    /* left: -6px; */
    /* border-top: 20px solid transparent; */
    /* border-right: 20px solid transparent; */
    /* border-bottom: 20px solid #e4ee58; */
    /* border-left: 20px solid #e4ee58; */
  }

  #hakusyo #contents.nngraph h4 {
    width: 80%;
    height: auto;
    padding: 15% 0 0;
    margin: 0 auto;
  }

  .qvoice {
    width: 100%;
    height: 0;
    margin: 0 auto 1em;
    padding: 40% 0 0;
  }

  #hakusyo #contents.nngraph.ep7 .qvoice {
    padding: 44% 0 0;
    margin: 0 auto;
  }

  #hakusyo #contents.nngraph .ph_area {
    margin: 5% auto;
    width: 98%;
  }

  #hakusyo #contents.nngraph .ph_s {
    width: 90%;
    border: 4px solid #ffe7e7;
    margin: 0 auto 2%;
    padding: 60% 0 0;
  }

  #hakusyo #contents.nngraph h5 {
    font-size: 4.8vw;
  }

  #hakusyo #contents.nngraph h5 span.backslash {
    display: none;
  }

  ul.streambnr {
    width: 70%;
    margin: 2% auto;
  }

  #hakusyo a.btn_df {
    width: 85%;
    margin: 8% auto 3%;
    padding: 6.5% 0;
    font-size: 4.4vw;
    letter-spacing: .05em;
  }

  @keyframes heart {
    0% {
      transform: translateY(0) scale(1);
      opacity: 0;
    }

    25% {
      opacity: 1;
    }

    75% {
      opacity: 1;
    }

    100% {
      transform: translateY(-20px) scale(1.4);
      opacity: 0;
    }
  }
}

@keyframes slideh1 {
  0% {
    opacity: 0;
    transform: translateX(-25%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.animation {
  opacity: 0;
  -webkit-transform: translate3d(0, 100px, 0);
  transform: translate3d(0, 100px, 0);
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.animation.active {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.animation1 {
  opacity: 0;
  animation: anime1 1s ease 0.1s 1 forwards;
}

@keyframes anime1 {
  0% {
    opacity: 0;
    transform: translate3d(0, 100px, 0);
    -webkit-transform: translate3d(0, 100px, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
}

#bknm_hakusyo h3 {
  font-size: 4vw;
  margin: 0 0 2vw;
  padding: 0.5em;
  background-color: #434343;
  color: #fff;
}

#bknm_hakusyo ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#bknm_hakusyo li a {
  display: block;
  border-radius: 140%;
  background-color: #ea519a;
  color: #fff;
  width: 2.5em;
  height: 2.5em;
  box-sizing: border-box;
  text-align: center;
  font-size: 30px;
  padding: 20px 0;
}

@media all and (min-width: 768px) {
  #bknm_hakusyo h3 {
    font-size: 1.5rem;
    margin: 0 0 4%;
  }
}

@media all and (max-width: 767px) {
  #bknm_hakusyo li a {
    width: 15vw;
    height: 15vw;
    font-size: 6vw;
    padding: 4.5vw 0;
    margin-bottom: 2vw;
  }

  .btn a>span {
    font-size: 100% !important;
  }
}

#hakusyo #contents.nngraph {
  background-image: url(../hakusyo/img/bg.jpg);
  background-size: contain;
}

.inner {
  background: hsla(0, 0%, 100%, 0.75);
  border-radius: 15px;
}

.tbsdrama-stream {
  padding: 2em;
}

@media all and (min-width: 768px) {
  #bknm_hakusyo ul li:not(:last-child) {
    margin-right: 0.7em;
  }
}

@media all and (max-width: 767px) {
  #bknm_hakusyo ul li:not(:nth-child(5n)){
    /* margin-right: 3.5vw; */
  }
}