#fuiqyun #contents.fq_top h1,#fuiqyun #contents.fq_top h2,#fuiqyun #contents.fq_top h3{font-weight:600; line-height:160%; text-align:center;}
#fuiqyun #contents.fq_top h1{font-size:200%;
animation: slideh1 .5s ease 0s 1 forwards;}
#fuiqyun #contents.fq_top h2{font-size:260%; text-align:center; background: url(./img/tape.png) no-repeat center bottom; padding:0 0 .2em; background-size:220px auto; margin:1em auto 0;}

#fuiqyun #contents ol#join {margin:2em auto; width:98%; counter-reset:list;}
#fuiqyun #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;}
#fuiqyun #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: #f3568d;
  border-radius: 50%;
  top:0;
}
.sample{width:680px; height:560px; background: url(./img/screen.png) no-repeat right center; background-size:contain; margin:2em auto 1.5em;}
#fuiqyun #contents ol#join li span.f80{line-height:140% !important; display:inline-block; padding:.5em 0 0;}

#fuiqyun #contents.fq_top h3{font-size:200%; margin:1.2em 0 1.2em;}
#fuiqyun #contents .caution h4{padding:.2em 0; font-size:160%; font-weight:600; line-height:140%; text-align:center;}
#fuiqyun #contents .caution {padding:.8em 1.2em; margin:0 auto .5em; border:1px dashed #000; border-radius:14px;}
#fuiqyun #contents .caution ul {margin:1em auto 0; line-height:140%;}
#fuiqyun #contents .caution ul li {margin:.6em 0; line-height:140%; text-indent:-1em; padding-left:1em;}

/*result*/
#fuiqyun #contents.fqgraph{padding:2em 0 2em;}
#fuiqyun #contents.fqgraph h1{width:100%; height:100px; margin:0 auto; text-align:center; background: url(./img/result/ttl_pc.svg) no-repeat center center; background-size:contain;}
#fuiqyun #contents.fqgraph h2{font-size:200%; text-align:center; margin:0 auto; line-height: 1.4;}

#contents.fqgraph .graph{width:800px; height:664px; margin:3.8em auto 0; border-radius:16px; background: url(./img/result/graph1.png) no-repeat center center; background-size:cover; position:relative;}
#contents.fqgraph .speech{position: absolute; top:-45px; right:-5px; width:60%;}
#contents.fqgraph .graph h3{font-size:140%; font-size:22px; font-weight:600; line-height:150%; text-align:center;}
#contents.fqgraph .graph h3 span.num{font-size:250%; letter-spacing:-.01em;
font-family: balloon-d, sans-serif;
font-weight: 800;
font-style: normal;
}
#contents.fqgraph .graph h3 {
  position: relative;
  width:100%;
  padding:1.3em 0 .6em;
  background-color:rgba(255,255,255,0.9);
  border: 3px solid rgba(1,196,238,0.5);
  text-align: center;
  box-shadow: 5px 5px 0 rgba(0,137,167,0.15);
  border-radius:22px;
}
#contents.fqgraph .graph h3::before,
#contents.fqgraph .graph h3::after {
  content: '';
  position: absolute;
  width:0;
  height:0;
}
#contents.fqgraph .graph h3::before {
  right: 88px;
  bottom:-32px;
  border-top: 30px solid rgba(1,196,238,0.5);
  border-right: 14px solid transparent;
  border-left: 14px solid transparent;
  /*transform-origin: left top;
  transform: skewX(40deg);*/
}
#contents.fqgraph .graph h3::after {
  right:92px;
  top:100%;
  border-top: 26px solid rgba(255,255,255,0.8);
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
  /*transform-origin: left top;
  transform: skewX(40deg);*/
}
#contents.fqgraph.ep2 .graph{background-image:url(./img/result/graph2.png);}
#contents.fqgraph.ep2 .graph h3::before{right:133px;}
#contents.fqgraph.ep2 .graph h3::after{right:137px;}
#contents.fqgraph.ep3 .graph{background-image:url(./img/result/graph3.png);}
#contents.fqgraph.ep3 .graph h3::before{right:90px;}
#contents.fqgraph.ep3 .graph h3::after{right:94px;}
#contents.fqgraph.ep4 .graph{background-image:url(./img/result/graph4.png);}
#contents.fqgraph.ep4 .graph h3::before{right:102px;}
#contents.fqgraph.ep4 .graph h3::after{right:106px;}
#contents.fqgraph.ep5 .graph{background-image:url(./img/result/graph5.png);}
#contents.fqgraph.ep5 .graph h3::before{right:286px;}
#contents.fqgraph.ep5 .graph h3::after{right:290px;}
#contents.fqgraph.ep6 .graph{background-image:url(./img/result/graph6.png?1);}
#contents.fqgraph.ep6 .graph h3::before{right:220px;}
#contents.fqgraph.ep6 .graph h3::after{right:224px;}
#contents.fqgraph.ep7 .graph{background-image:url(./img/result/graph7.png);}
#contents.fqgraph.ep7 .graph h3::before{right:91px;}
#contents.fqgraph.ep7 .graph h3::after{right:95px;}
#contents.fqgraph.ep8 .graph{background-image:url(./img/result/graph8.png);}
#contents.fqgraph.ep8 .graph h3::before{right:101px;}
#contents.fqgraph.ep8 .graph h3::after{right:105px;}
#contents.fqgraph.ep9 .graph{background-image:url(./img/result/graph9.png);}
#contents.fqgraph.ep9 .graph h3::before{right:101px;}
#contents.fqgraph.ep9 .graph h3::after{right:105px;}
#contents.fqgraph.ep10 .graph{background-image:url(./img/result/graph10.png);}
#contents.fqgraph.ep10 .graph h3::before{right:124px;}
#contents.fqgraph.ep10 .graph h3::after{right:128px;}

#contents.fqgraph .mainph{width:800px; height:533px; background-color:#ffeae8; padding:20px; margin:4em auto 3em; background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative; /*background-image:url(./img/result/ep1.jpg);*/ border:10px solid #ffe7e7; position: relative;}
#contents.fqgraph .mainph::before,
#contents.fqgraph .mainph::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  z-index: 1;
}
#contents.fqgraph .mainph::before {
  top: -10px;
  right: -10px;
  border-top: 40px solid #ffe7e7;
  border-right: 40px solid #ffe7e7;
  border-bottom: 40px solid transparent;
  border-left: 40px solid transparent;
}
#contents.fqgraph .mainph::after {
  bottom: -10px;
  left: -10px;
  border-top: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 40px solid #ffe7e7;
  border-left: 40px solid #ffe7e7;
}

#fuiqyun #contents.fqgraph h4{width:500px; height:96px; margin:0 auto; text-align:center; background: url(./img/result/qvoice.png?1) no-repeat center center; background-size:contain;}
.qvoice{
width:95%; height:0; margin:1em auto; padding:30% 0 0;
background: url(./img/result/talk.png) no-repeat center center; background-size:contain;
}
#fuiqyun #contents.fqgraph.ep2 .qvoice{width:90%; background-image: url('./img/result/talk2.png');}
#fuiqyun #contents.fqgraph.ep3 .qvoice{width:90%; background-image: url('./img/result/talk3.png');}
#fuiqyun #contents.fqgraph.ep4 .qvoice{width:90%; background-image: url('./img/result/talk4.png');}
#fuiqyun #contents.fqgraph.ep5 .qvoice{width:90%; background-image: url('./img/result/talk5.png'); padding:20% 0 0;}
#fuiqyun #contents.fqgraph.ep6 .qvoice{width:90%; background-image: url('./img/result/talk6.png');}
#fuiqyun #contents.fqgraph.ep7 .qvoice{width:90%; background-image: url('./img/result/talk7.png?1'); padding:31% 0 0; background-position: center bottom; margin:1.5em auto 1em;}
#fuiqyun #contents.fqgraph.ep8 .qvoice{width:90%; background-image: url('./img/result/talk8.png');}
#fuiqyun #contents.fqgraph.ep9 .qvoice{width:90%; background-image: url('./img/result/talk9.png');}
#fuiqyun #contents.fqgraph.ep10 .qvoice{width:90%; background-image: url('./img/result/talk10.png');}

#fuiqyun #contents.fqgraph .ph_area{margin:2em auto; text-align:center; width:96%;}
#fuiqyun #contents.fqgraph .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/result/ep1_2.jpg);*/ border:5px solid #ffe7e7; background-color:#ffeae8;}

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

ul.streambnr{width:100%; margin:2em auto 0;}

#fuiqyun a.btn_df{width:50%; color:#ff4083;}
#fuiqyun a.btn_df::before {border:2px solid #ff4083;}
#fuiqyun a.btn_df::after{background-color:#ffe7e7;}

#fuiqyun #contents.fqgraph #bknm{width:100%; margin:4em auto .5em;}
#fuiqyun #contents.fqgraph #bknm h3{letter-spacing:.05em; font-size:350%; position:relative; padding:0 0 0 4%; margin:4% 0 0;}
#fuiqyun #contents.fqgraph #bknm h3::first-letter{color:#e95589;}
#fuiqyun #contents.fqgraph #bknm ul{margin:1em auto 0; display: flex; flex-flow: row wrap; width:95%;}
#fuiqyun #contents.fqgraph #bknm li{margin:0 0 1em 1.2em; position:relative; width:210px; height:140px; border-radius:14px;}
#fuiqyun #contents.fqgraph #bknm li a{display:block; width:100%; height:100%; text-align:center; position:relative; background-size: cover; background-repeat: no-repeat; background-position: center center; border-radius:14px; transition:.5s; background-color:rgba(255,255,255,0.5); border:2px solid #ffeae8; box-shadow:4px 4px #ffeae8; overflow: hidden;}
#fuiqyun #contents.fqgraph #bknm li a:after{
position: absolute;content: "";display: block;width: 100%;height: 100%;top: 0;background-size: cover; background-repeat: no-repeat; background-position: center center;
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   -ms-transition: all .3s ease-out;
   transition: all .3s ease-out;}
#fuiqyun #contents.fqgraph #bknm li a:hover:after{
   -moz-transform: scale(1.2);
   -webkit-transform: scale(1.2);
   -ms-transform: scale(1.2);
   transform: scale(1.2);
}
#fuiqyun #contents.fqgraph #bknm li span.enum {padding:1.5% 5.5%; font-size:200%; position: absolute; bottom:-5%; right:-3%; z-index:1; color:#fff; letter-spacing:-.1em; line-height:130%;
background: url(./img/heart.svg) no-repeat center center; background-size:98%;}
#fuiqyun #contents.fqgraph #bknm li span.nmb{font-size:130%;
font-family: balloon-urw, sans-serif;
font-weight: 700;
font-style: normal;}
#fuiqyun #contents.fqgraph #bknm li.bk1 a:after{background-image:url(./img/result/ep1.jpg);}
#fuiqyun #contents.fqgraph #bknm li.bk2 a:after{background-image:url(./img/result/ep2.jpg);}
#fuiqyun #contents.fqgraph #bknm li.bk3 a:after{background-image:url(./img/result/ep3.jpg);}
#fuiqyun #contents.fqgraph #bknm li.bk4 a:after{background-image:url(./img/result/ep4.jpg);}
#fuiqyun #contents.fqgraph #bknm li.bk5 a:after{background-image:url(./img/result/ep5.jpg);}
#fuiqyun #contents.fqgraph #bknm li.bk6 a:after{background-image:url(./img/result/ep6.jpg);}
#fuiqyun #contents.fqgraph #bknm li.bk7 a:after{background-image:url(./img/result/ep7.jpg);}
#fuiqyun #contents.fqgraph #bknm li.bk8 a:after{background-image:url(./img/result/ep8.jpg);}
#fuiqyun #contents.fqgraph #bknm li.bk9 a:after{background-image:url(./img/result/ep9.jpg);}
#fuiqyun #contents.fqgraph #bknm li.bk10 a:after{background-image:url(./img/result/ep10.jpg);}
#fuiqyun #contents.fqgraph #bknm li.bk10 span.enum{letter-spacing:-.2em;}


@media all and (min-width: 768px) {
#fuiqyun #contents h1.subtxt,.qbtn,p.error{display: none;}
/*.qr_pc{width:850px; height:284px; background: url(./img/qr_pc.png) no-repeat center center; background-size:cover; margin:1.5em auto 2.5em; border-radius:20px; border:2px solid #fff;}*/
#fuiqyun #contents.fqgraph .ph_s:nth-of-type(3n){margin:2.5% auto 0;}
#fuiqyun #contents.fqgraph.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: url(./img/btn.png?1) no-repeat center center; background-size:cover; border:3px solid #fff; box-shadow:7px 7px #df336f; transition:.5s;
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; /*cursor: pointer;*/ transition: all 0.3s ease;}
.qbtn a{display:block; border-radius:24px; background: url(./img/btn.png?1) no-repeat center center; background-size:cover; border:3px solid #fff; box-shadow:7px 7px #df336f; transition:.5s;
pointer-events: none; cursor: default; opacity:0.7;}
.qbtn a:hover{transform: translate(7px,7px); box-shadow:none;}
.qr_pc,#fuiqyun #contents h1 span.subtxt{display: none;}
#fuiqyun #contents.fq_top h1{font-size:5.8vw; line-height:140%;}
#fuiqyun #contents h1.subtxt{font-size:5.3vw;}
#fuiqyun #contents.fq_top h2{font-size:6.8vw; background-size:40%; margin:8% auto 0;}

#fuiqyun #contents ol#join {margin:5% auto; width:94%;}
#fuiqyun #contents ol#join li{font-size:4.6vw; padding:0 0 3% 10%; margin:0 0 4%; line-height:160%;}
#fuiqyun #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;}
.sample img,.qbtn a {position:absolute;left:0;top:0; width:100%; height:100%;}

#fuiqyun #contents.fq_top h3{font-size:4.4vw; line-height:150%;}
#fuiqyun #contents .caution h4{font-size:4.5vw; padding:0 0 2.5%; margin:0 auto;}
#fuiqyun #contents .caution{width:94%; padding:2.5% 4% 2.5% 2.5%;}
#fuiqyun #contents .caution ul li{font-size:90%;}

/*result*/
#fuiqyun #contents.fqgraph{padding:4% 0 6%;}
#fuiqyun #contents.fqgraph h1{width:80%; height:0; margin:0 auto 1.5%; text-align:center; background: url(./img/result/ttl_sp.svg) no-repeat center center; background-size:contain; padding:20% 0 0;}
#fuiqyun #contents.fqgraph h2{font-size:5vw; width:100%;}

#contents.fqgraph .graph{width:95%; height:auto; padding:80% 0 0; margin:10% auto 0;} 
#contents.fqgraph .speech{position: absolute; top:-12%; right:-1.5%; width:77%;}
#contents.fqgraph .graph h3{font-size:3.2vw; line-height:150%; 
padding:6% 0 2.5%;
border-radius:16px;
border: 2px solid rgba(1,196,238,0.5);
box-shadow: 3px 3px 0 rgba(0,137,167,0.15);
}
#contents.fqgraph .graph h3::before {
  right: 14.2%;
  top:105%;
  border-top: 4.8vw solid rgba(1,196,238,0.5);
  border-right: 2vw solid transparent;
  border-left: 2vw solid transparent;
}
#contents.fqgraph .graph h3::after {
  right:14.8%;
  top:100%;
  border-top: 4.6vw solid rgba(255,255,255,0.8);
  border-right: 1.8vw solid transparent;
  border-left: 1.8vw solid transparent;
}
#contents.fqgraph.ep2 .graph h3::before{right:21.7%;}
#contents.fqgraph.ep2 .graph h3::after{right:22.3%;}
#contents.fqgraph.ep3 .graph h3::before{right:14.4%;}
#contents.fqgraph.ep3 .graph h3::after{right:15%;}
#contents.fqgraph.ep4 .graph h3::before{right:16.6%;
  border-top: 4.2vw solid rgba(1,196,238,0.5);
}
#contents.fqgraph.ep4 .graph h3::after{right:17.2%;
  border-top: 4vw solid rgba(255,255,255,0.8);
}
#contents.fqgraph.ep5 .graph h3::before{right:47.2%;}
#contents.fqgraph.ep5 .graph h3::after{right:47.8%;}
#contents.fqgraph.ep6 .graph h3::before{right:36%;}
#contents.fqgraph.ep6 .graph h3::after{right:36.7%;}
#contents.fqgraph.ep7 .graph h3::before{right:14.4%;
  border-top: 4.2vw solid rgba(1,196,238,0.5);
}
#contents.fqgraph.ep7 .graph h3::after{right:15%;
  border-top: 4vw solid rgba(255,255,255,0.8);
}
#contents.fqgraph.ep8 .graph h3::before{right:16.3%;
  border-top: 4vw solid rgba(1,196,238,0.5);
}
#contents.fqgraph.ep8 .graph h3::after{right:17.1%;
  border-top: 3.8vw solid rgba(255,255,255,0.8);
}
#contents.fqgraph.ep9 .graph h3::before{right:16.3%;
  border-top: 4vw solid rgba(1,196,238,0.5);
}
#contents.fqgraph.ep9 .graph h3::after{right:17.1%;
  border-top: 3.8vw solid rgba(255,255,255,0.8);
}
#contents.fqgraph.ep10 .graph h3::before{right:19.8%;}
#contents.fqgraph.ep10 .graph h3::after{right:20.6%;}


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

#contents.fqgraph .mainph{width:95%; margin:6% auto 6%; height:auto; padding:60% 0 0; border:6px solid #ffe7e7;}
#contents.fqgraph .mainph::before {
  top: -6px;
  right: -6px;
  border-top: 20px solid #ffe7e7;
  border-right: 20px solid #ffe7e7;
  border-bottom: 20px solid transparent;
  border-left: 20px solid transparent;
}
#contents.fqgraph .mainph::after {
  bottom: -6px;
  left: -6px;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid #ffe7e7;
  border-left: 20px solid #ffe7e7;
}
#fuiqyun #contents.fqgraph h4{width:80%; height:auto; padding:15% 0 0; margin:0 auto; }
.qvoice{width:100%; height:0; margin:0 auto; padding:30% 0 0;}
#fuiqyun #contents.fqgraph.ep7 .qvoice{padding:34% 0 0; margin:0 auto;}

#fuiqyun #contents.fqgraph .ph_area{margin:5% auto; width:98%;}
#fuiqyun #contents.fqgraph .ph_s{width:90%; border:4px solid #ffe7e7; margin:0 auto 2%; padding:60% 0 0;}
#fuiqyun #contents.fqgraph h5{font-size:4.8vw;}
#fuiqyun #contents.fqgraph h5 span.backslash{display: none;}
ul.streambnr{width:70%; margin:2% auto;}

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

#fuiqyun #contents.fqgraph #bknm{margin:8% auto 0;}
#fuiqyun #contents.fqgraph #bknm h3{font-size:10vw; margin:0;}
#fuiqyun #contents.fqgraph #bknm ul{margin:1% auto 0; width:95%;}
#fuiqyun #contents.fqgraph #bknm li{margin:2% 1.5% 1.5% 3%; height:auto; border-radius:10px;
width: -webkit-calc(100% / 2 - 5%) ;
width: calc(100% / 2 - 5%);}
#fuiqyun #contents.fqgraph #bknm li a{height:0; padding:60% 0 0; border-radius:10px;}
#fuiqyun #contents.fqgraph #bknm li img{position:absolute; top:0; left:0; width:100%; height:100%;}
#fuiqyun #contents.fqgraph #bknm li span.enum{font-size:6vw; bottom:-2%;}

/* ボタン */
/*.qbtn::before,
.qbtn::after {
  content: "";
  background-size:contain;
  background-repeat: no-repeat;
  width:16%;
  height:55%;
  position: absolute;
  opacity: 0;
  z-index:11;
}
.qbtn::before {
  background-image: url('./img/heart_l.svg');
  bottom: -20%;
  left: -5%;
}
.qbtn::after {
  background-image: url('./img/heart_r.svg');
  top:3%;
  right: -5%;
  background-position:right 2% top 0;
}
.qbtn::before {
  animation: heart 1.5s infinite ease-out;
}
.qbtn::after {
  animation: heart 1.5s 0.2s infinite ease-out;
}*/
@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);}
}