@charset "UTF-8";
/* -----------------------------------------
 Reset
------------------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}
em {
  font-style: normal;
}
a {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  background: transparent;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ddd;
  margin: .8rem 0;
  padding: 0;
}
input, select {
  vertical-align: middle;
}
/* -----------------------------------------
 基本
------------------------------------------- */
html {
  font-size: 62.5%;
  font-size: calc(1em*.625);
}
body {
  color: #333;
  background: #fff;
  font-size: 1.6rem;
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
  -webkit-text-size-adjust: 100%;
  line-height: 1.4;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
*, *::before, *::after {
  box-sizing: border-box;
}
.pc-only {
  display: block;
}
.tab-only {
  display: none;
}
.sp-only {
  display: none;
}

/* -----------------------------------------
 文字装飾
------------------------------------------- */
.bold {
  font-weight: bold;
}
.f14 {
  font-size: 1.4rem;
}
.f16 {
  font-size: 1.6rem;
}
.txt_c {
  text-align: center;
}
.txt_r {
  text-align: right;
}
.txt_l {
  text-align: left;
}
.mb10 {
  margin-bottom: 10px;
}
.mb15 {
  margin-bottom: 15px;
}
.mb20 {
  margin-bottom: 20px;
}
.mt20 {
  margin-top: 20px;
}
.mb40 {
  margin-bottom: 40px;
}
.hide {
  display: none !important;
}
/* リンク
------------------------------------------- */
a:link {
  color: #333;
  text-decoration: none;
}
a:visited {
  color: #333;
  text-decoration: none;
}
a:active {
  text-decoration: none;
}
a:hover {
  opacity: .7;
  text-decoration: none;
}
a.link-txt:hover {
  text-decoration: underline;
}
/* pagetop
--------------------------------------------------------- */
#pagetop-fix a {
  position: fixed;
  right: 1rem;
  bottom: 4.5rem;
  width: 5.4rem;
  height: 5.4rem;
  background: url("../img/pagetop.png") no-repeat 0 0;
  background-size: contain;
  cursor: pointer;
  z-index: 8001;
}

/* header
----------------------------------------------- */
header {
  background-color: #fff;
  padding: 3rem 0;
  border-bottom: solid 2px #10488c;
  text-align: center;
}
header a.logo{
  width: 16rem;
  height: 2.2rem;
  display: block;
  margin: 0 auto;
}

/* footer
----------------------------------------------- */
footer {
  font-size: 1.2rem;
  background-color: #fff;
  text-align: center;
  padding: 2rem 0;
}

/* main
----------------------------------------------- */
main{
background-color: #fcd61d;
min-width: 32rem;
}
.top_main{
  width: 100%;
  height: 47.7rem;
  background-color: #fcd61d;
  padding: 8rem 0 5rem;
  background-size: contain;
  position: relative;
  z-index: 1;
}
.top_main::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 47.7rem;
  background-image: url("../img/main_bg_1.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
.main_bg{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  height: 47.7rem;
  background-image: url("../img/main_bg_2.png");
  background-position: center center;
  background-size: cover;
  z-index: -1;
}
.top_main.zoomIn::before, .main_bg.zoomIn { 
  animation-name: zoomIn;
  animation-duration: 1s;
}
@keyframes zoomIn {
    from {
        transform: scale(5);
        opacity: 0;
    }
}
.top_logo{
  width: 60.7rem;
  height: 27.1rem;
  margin: 0 auto;
  z-index: 2;
  position: relative;
  opacity: 0;
}
.top_logo, a.btn_start{
  animation: fadeIn 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
  animation-delay: .5s;
}
 
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
.q_icon::before{
  content: "";
  position: absolute;
  bottom: -5rem;
  right: -5rem;
  width: 17.7rem;
  height: 19rem;
  background-image: url("../img/denryoq_icon.png");
  background-size: contain;
  background-position: center center;
  z-index: 3;
  opacity: 0;
}
.q_icon::before {
  animation: slide-skew 0.8s cubic-bezier(0.3, 1, 0.5, 1) 1 forwards;
  animation-delay: .75s;
}
@keyframes slide-skew {
  0% {
    transform: translate(-60px,-60px);
    opacity: 0;
  }
  100% {
    transform: translate(0,0);
  }
  50%,100% {
    opacity: 1;
  }
}

a.btn_start{
  width: 23rem;
  height: 4rem;
  padding: .5rem 0;
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 0 auto;
  color: #fff;
  font-size: 2.2rem;
  font-weight: bold;
  display: block;
  opacity: 0;
}
a.btn_start:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  background: #333;
  transform: skewX(-25deg);
  box-shadow: 8px 8px 0px 2px rgba(0, 0, 0, 0.5);
}
a.btn_start:after{
  content: "";
  position: absolute;
  top: 50%;
  right: 2.5rem;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: -.7rem;
  border-bottom: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
}

/*read
----------------------------------------------- */
.read{
  background-image: url( "../img/read_bg.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  padding: 8rem 0;
}
.read.active .txt{
  opacity: 0;
}
.read.active .txt{
  animation: fadeup1 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
  animation-delay: 1.5s;
}
@keyframes fadeup1 {
  0% {
    transform: translateY(80px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.read p{
  white-space: nowrap;
}
.read p span{
  font-size: 1.8rem;
  font-weight: bold;
  background-color: #fff;
  padding: .5rem 1rem;
  margin-bottom: 1rem;
  display: inline;
  line-height: 2;
}
.read p span.yellow{
  font-size: 2.8rem;
  font-weight: bold;
  background-color: #fcd61d;
  padding: .5rem 1rem;
  margin-bottom: 1rem;
  display: inline;
  line-height: 2;
}


/* challenge
----------------------------------------------- */
.challenge{
  padding: 6rem 0 8rem;
  text-align: center;
  background-color: #fff;
}
.icon{
  width: 86.3rem;
  height: 14rem;
  margin: 0 auto;
  position: relative;
}

.icon::before{
  content: "";
  position: absolute;
  top: 0;
  right: -3rem;
  width: 6.1rem;
  height: 6.3rem;
  background-image: url("../img/icon_energy_01.png");
  background-size: contain;
  background-position: 0 0;
  background-repeat: no-repeat;
}
.tegaki{
  position: relative;
}
.challenge.active .tegaki::after{
  content: "";
  position: absolute;
  bottom: 0;
  right: 3rem;
  width: 46rem;
  height: 2.2rem;
  background-image: url("../img/tegaki_line.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0;
  animation: tegaki 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transform-origin: left center;
  animation-delay: 1s;
  opacity: 0;
}
@keyframes tegaki {
  0% {
    opacity: 0;
    transform: scaleX(0) translateX(-5%);
  }
  30% {
    transform: scaleX(1) translateX(0);
  }
  100% {
    transform: scaleX(1) translateX(0);
  }
  30%, 100% {
    opacity: 1;
  }
}


/* q1 q2 q3 q4
----------------------------------------------- */
.q1{background-color: #f43858;}
.q2{background-color: #54b99f;}
.q3{background-color: #f43858;}
.q4{background-color: #fcd61d;}
.q5{background-color: #f43858;}
.q6{background-color: #25aace;}
.q7{background-color: #54b99f;}
.q8{background-color: #fcd61d;}


.q1, .q2, .q3, .q4, .q5, .q6, .q7, .q8{
  position: relative;
}
.q1::before,
.q2::before,
.q3::before,
.q4::before,
.q5::before,
.q6::before,
.q7::before,
.q8::before
{
  content: "";
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  width: 50rem;
  height: 15rem;
  background-size: contain;
  background-position: right center;
  background-repeat: no-repeat;
}
.q1::before{
  background-image: url("../img/name1.png");
}
.q2::before{
  background-image: url("../img/name2.png");
}
.q3::before{
  background-image: url("../img/name3.png");
}
.q4::before{
  background-image: url("../img/name4.png");
}
.q5::before{
  background-image: url("../img/name5.png");
}
.q6::before{
  background-image: url("../img/name6.png");
}
.q7::before{
  background-image: url("../img/name7.png");
  height: 18rem;
  bottom: -2rem;
}
.soon::before{
  background-image: none;
}
/*
.q8::before{
  background-image: url("../img/name8.png");
}*/
.content_inner{
  width: 100%;
  max-width: 100rem;
  margin: 0 auto;
  padding: 0 0 8rem;
  position: relative;
}
.icon_q1, .icon_q2, .icon_q3, .icon_q4,
.icon_q5, .icon_q6, .icon_q7, .icon_q8{
  width: 17.8rem;
  height: 11rem;
  position: absolute;
  top: -5rem;
  left: 0;
  opacity: 0;
  z-index: 2;
}
.q1.active .icon_q1,
.q2.active .icon_q2,
.q3.active .icon_q3,
.q4.active .icon_q4,
.q5.active .icon_q5,
.q6.active .icon_q6,
.q7.active .icon_q7,
.q8.active .icon_q8
{
  animation: zoomIn 0.6s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
  animation-delay: 1s;
}
@keyframes zoomIn {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.icon_q1::before, .icon_q2::before, .icon_q3::before, .icon_q4::before,
.icon_q5::before, .icon_q6::before, .icon_q7::before, .icon_q8::before{
  content: "";
  position: absolute;
  top: -5rem;
  left: 0;
  width: 7.1rem;
  height: 12.1rem;
  background-image: url("../img/icon_energy.png");
  background-size: contain;
  opacity: 0;
}

.q1.active .icon_q1::before{
  animation: slide-skew2 0.6s cubic-bezier(0.3, 1, 0.5, 1) 1 forwards;
  animation-delay: 1s;
}
.q2.active .icon_q2::before,
.q3.active .icon_q3::before,
.q4.active .icon_q4::before,
.q5.active .icon_q5::before,
.q6.active .icon_q6::before,
.q7.active .icon_q7::before,
.q8.active .icon_q8::before {
  animation: slide-skew2 0.6s cubic-bezier(0.3, 1, 0.5, 1) 1 forwards;
  animation-delay: 1s;
}
@keyframes slide-skew2 {
  0% {
    transform: translate(60px,-60px);
    opacity: 0;
  }
  100% {
    transform: translate(0,0);
  }
  50%,100% {
    opacity: 1;
  }
}

.question{
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 4rem;
  padding-top: 8rem;
  position: relative;
  opacity: 0;
}
.black .question{
  color: #333;
}
.active .question {
  animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
  animation-delay: 1.25s;
}
@keyframes slideIn {
  0% {
    transform: translateX(180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}

.hash{
  position: relative;
  padding-left: 5rem;
}
.hash::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4.1rem;
  height: 3.8rem;
  background-image: url("../img/hash.png");
  background-size: contain;
  background-repeat: no-repeat;
}
.black .question .hash::before{
  background-image: url("../img/hash_b.png");
}
.question .bg{
  position: relative;
}

.ttl_main{
  padding: .5rem 1rem;
  position: relative;
  z-index: 1;
  text-align: center;
  color: #333;
  font-size: 5rem;
  font-weight: bold;
  display: inline-block;
}
.ttl_main::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  background: #fff;
  transform: skewX(-25deg);
}
.movie_wrap{
  display: flex;
  justify-content: flex-start;
  flex-flow: row-reverse;
  margin: 5rem 0;
}
.prof{
  width: 40rem;
  padding-right: 3rem;
  margin-left: 2rem;
  color: #fff;
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.6;
  opacity: 0;
}
.black .prof{
  color: #333;
}
.photo{
  width: 17.6rem;
  height: 17.6rem;
  margin-bottom: 2rem;
}
.photo span{
  position: relative;
  display: inline-block;
}
.photo span::before{
  content: "";
  position: absolute;
  top: 8rem;
  right: -11rem;
  width: 14rem;
  height: 8.1rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center 0;
}

.q1 .photo span::before{ background-image: url("../img/icon_txt_1.png"); }
.q2 .photo span::before{ background-image: url("../img/icon_txt_2.png"); }
.q3 .photo span::before{ background-image: url("../img/icon_txt_3.png"); }
.q4 .photo span::before{ background-image: url("../img/icon_txt_4.png"); }
.q5 .photo span::before{ background-image: url("../img/icon_txt_5.png"); }
.q6 .photo span::before{ background-image: url("../img/icon_txt_6.png"); }
.q7 .photo span::before{ background-image: url("../img/icon_txt_7.png"); }
.soon .photo span::before{ background-image: url("../img/icon_txt_soon.png"); }

.name{
  font-size: 3.4rem;
  margin-bottom: 1rem;
  display: inline-block;
  white-space: nowrap;
  z-index: 1;
  position: relative;
}
.name_1::before, .name_2::before, .name_3::before, .name_4::before,
.name_5::before, .name_6::before, .name_7::before, .name_8::before{
  content: "";
  position: absolute;
  bottom: 0;
  left: -1.5rem;
  width: 115%;
  height: 2rem;
  z-index: -1;
  background-size: auto auto;
  background-color: rgba(255, 255, 255, 0);
  background-image: repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(255, 255, 255, .3) 3px, rgba(255, 255, 255, .3) 6px );
  transform: skew(-30deg, 0);
}

.movie_block{
  width: 60rem;
  margin-left: 6rem;
  opacity: 0;
}
.movie_block a{
  display: block;
  position: relative;
  border:solid 5px #333;
  background-color: #333;
}
.movie_block a .thumbnail{
  background-size: cover;
  background-position: center center;
  position: relative;
}
.movie_block a .thumbnail::before{
  content: "";
  display: block;
  padding-top: 56.25%;
}
.btn_youtube{
  width: 23rem;
  height: 4rem;
  padding: .5rem 0 .5rem 3rem;
  position: absolute;
  bottom: -2rem;
  right: -2rem;
  z-index: 1;
  text-align: center;
  margin: 0 auto;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  display: block;
  border: none;
}
.btn_youtube:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  background: #333;
  transform: skewX(-25deg);
}
.btn_youtube:after{
  content: "";
  position: absolute;
  top: 50%;
  left: 2rem;
  width: 3rem;
  height: 2.2rem;
  margin-top: -1.1rem;
  background-image: url("../img/icon_youtube.png");
  background-size: contain;
}

.active .movie_block{
  animation: fadeupyoutube 1.5s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
  animation-delay: 1.75s;
}
.active .prof{
  animation: fadeupyoutube 1.5s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
  animation-delay: 1.5s;
}
@keyframes fadeupyoutube {
  0% {
    transform: translateY(80px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/* end_contents
----------------------------------------------- */
.end_contents{
  background-color: #fcd61d;
  padding-top: 10rem;
  padding-bottom: 2rem;
  text-align: center;
  position: relative;
  z-index: 1;
}
.end_contents::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  height: 50rem;
  background-image: url("../img/main_bg_2.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
  opacity: 0;
}
.end_contents p{
  font-size: 3rem;
  font-weight: bold;
  line-height: 2;
  opacity: 0;
}
.active.end_contents::before{
  animation: fadeIn 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
  animation-delay: 1s;
}
.active .end_txt{
  animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
  animation-delay: 1s;
}
.active .tegaki_foot{
  animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
  animation-delay: 1.5s;
}
.active .bnr_energy{
  animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
  animation-delay: 2s;
}
@keyframes fadeup {
  0% {
    transform: translateY(80px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.end_contents span{
  font-size: 4rem;
}
.end_contents .end_bg{
  font-size: 3rem;
  color: #fff;
  background-color: #333;
  padding: .5em .5em .5em 1em;
  line-height: 2;
}
.tegaki_foot{
  width: 72.7rem;
  height: auto;
  margin: 5rem auto;
  opacity: 0;
}
.bnr_energy{
  width: 77.7rem;
  height: auto;
  margin: 0 auto 3rem;
  opacity: 0;
}
a.txt_link{
  font-size: 1.6rem;
  position: relative;
  padding-left: 2.5rem;
}
a.txt_link::before{
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 1.4rem;
  height: 1.4rem;
  background-color: #333;
  border-radius: 3px;
}
a.txt_link::after{
  content: "";
  position: absolute;
  top: 50%;
  left: .5rem;
  width: .6rem;
  height: .6rem;
  margin-top: -.3rem;
  border-top: solid 2px #fff;
  border-left: solid 2px #fff;
  transform: rotate(-45deg);
}

/*アニメーション
ーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.read, .challenge, .q1, .q2, .q3, .q4, .q5, .q6, .q7, .q8 .end_contents{
  opacity: 0;
}

.challenge.active, .q1.active, .q2.active, .q3.active, .q4.active,
.q5.active, .q6.active, .q7.active, .q8.active, .end_contents.active{
  animation: fadeupBlock 1.3s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
  animation-delay: .5s;
}
.read.active{
  animation: fadeupBlock 1.3s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
  animation-delay: 1s;
}
@keyframes fadeupBlock {
  0% {
    transform: translateY(80px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*================================================
* tablet Style
================================================*/
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 1060px) {
.movie_block{ width:100%; padding-right: 2rem; }
}

/*================================================
* tablet Style
================================================*/
@media screen and (max-width: 900px) {
.pc-only {
  display: none;
}
.sp-only {
  display: block;
}
.sp-hide{
  display: none;  
}
  
/* header
----------------------------------------------- */
header {
  padding: 1.5rem 0;
}
header a.logo{
  width: 12.5rem;
  height: 1.7rem;
}

/* main
----------------------------------------------- */
.top_main{
  height: 38rem;
  background-color: #fcd61d;
  padding: 5rem 0;
}
.top_main::before{
  height: 34rem;
}
.main_bg{
  height: 34rem;
}
.top_logo{
  width: 60%;
  height: auto;
  margin-bottom: 2rem;
}
.q_icon::before{
  bottom: -2.5rem;
  right: -9.5rem;
  width: 60%;
  height: 60%;
  background-repeat: no-repeat;
}
a.btn_start{
  width: 18rem;
  height: 4rem;
  font-size: 2rem;
}
a.btn_start:before {
  box-shadow: 6px 6px 0px 2px rgba(0, 0, 0, 0.5);
}
/*read
----------------------------------------------- */
.read{
  padding: 4rem 0;
}
.read p{
  margin-bottom: 0;
}
.mb20{
  margin-bottom: 2rem !important;
}
.read p span{
  font-size: 1.6rem;
  font-weight: bold;
  background-color: #fff;
  padding: .5rem 1rem;
  margin-bottom: 1rem;
  display: inline;
  line-height: 2;
}
.read p span.yellow{
  font-size: 2rem;
  font-weight: bold;
  background-color: #fcd61d;
  padding: 1rem;
  display: inline;
  line-height: 2.4;
}

/* challenge
----------------------------------------------- */
.challenge{
  padding: 5rem 0 9rem;
  text-align: center;
}
.icon{
  width: 60%;
  height: auto;
}
.icon::before{
  top: 6rem;
  right: -2rem;
  width: 4.5rem;
  height: 4.5rem;
} 
.challenge.active .tegaki::after{
  content: "";
  position: absolute;
  bottom: -1.5rem;
  right: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 1.7rem;
  background-size: cover;
}
  
/* q1 q2 q3 q4
----------------------------------------------- */
.q1, .q2, .q3, .q4, .q5, .q6, .q7{
  padding: 4rem 0;
}
.q8{
  padding: 4rem 0 3rem;
}
.q1::before, .q2::before, .q3::before, .q4::before,
.q5::before, .q6::before, .q7::before, .q8::before{
  width: 40%;
  height: 8rem;
  bottom: 1.5rem;
}
.q7::before{
  width: 60%;
  height: 10rem;
  bottom: -2rem;
  right: 1rem;
}
.content_inner{
  width: 100%;
  padding: 0 1.5rem;
}
.q1 h2, .q2 h2, .q3 h2, .q4 h2,
.q5 h2, .q6 h2, .q7 h2, .q8 h2{
  width: 100%;
  overflow: hidden;
}
.icon_q1, .icon_q2, .icon_q3, .icon_q4,
.icon_q5, .icon_q6, .icon_q7, .icon_q8{
  width: 9.5rem;
  height: 6rem;
  top: -6.5rem;
  left: 0;
  right: 0;
  margin: auto;
}
.icon_q1::before, .icon_q2::before, .icon_q3::before, .icon_q4::before,
.icon_q5::before, .icon_q6::before, .icon_q7::before, .icon_q8::before{
  top: -2.5rem;
  width: 3.5rem;
  height: 6rem;
}
.question{
  font-size: 2.8rem;
  padding-top: 1rem;
}
.hash{
  position: relative;
  padding-left: 2rem;
  line-height: 1.8;
}
.hash::before{
  content: "";
  position: absolute;
  top: 0;
  left: -1rem;
  width: 2.2rem;
  height: 2.4rem;
}
.ttl_main{
  padding: .3rem 1rem;
  font-size: 2.8rem;
  line-height: 1.3;
}

.movie_wrap{
  display: block;
  margin: 3rem 0;
  flex-flow:wrap;
}
.movie_block{
  width: 90%;
  margin: 0 auto 5rem;
}
.btn_youtube{
  width: 18rem;
  height: 3.5rem;
  padding: .5rem 0 .5rem 2.5rem;
  bottom: -2rem;
  font-size: 1.6rem;
}
.btn_youtube:after{
  content: "";
  position: absolute;
  top: 50%;
  left: 1.5rem;
  width: 2.4rem;
  height: 1.8rem;
  margin-top: -1.1rem;
}
.prof{
  width: 96%;
  padding-right: 0;
  margin: 0 auto;
  font-size: 1.8rem;
  display: flex;
}
.photo{
  width: 30%;
  height: auto;
  margin-bottom: 2rem;
  margin-right: 3rem;
}
.photo span::before{
  top: 90%;
  right: 0;
  left: 0;
  margin: auto;
}
.name_block{
  flex: 1;
}
.name{
  font-size: 2.2rem;
  margin-bottom: 1rem;
}
.name::before{
  left: -1rem;
  width: 120%;
  height: 1.5rem;
}
/*
.q3 .name, .q4 .name{
  padding-top: 5rem;
  font-size: 2.4rem;
}
*/
/* end_contents
----------------------------------------------- */
.end_contents{
  padding-top: 5rem;
  padding-bottom: 2rem;
}
.end_contents::before{
  width: 100%;
  height: 30rem;
}
.end_contents p{
  font-size: 2rem;
  line-height: 1.8;
}
.end_contents span{
  font-size: 2.4rem;
  line-height: 1.6;
}
.end_contents .bg{
  font-size: 2rem;
  padding: .7rem;
}
.tegaki_foot{
  width: 80%;
  height: auto;
  margin: 4rem auto 3rem;
}
.bnr_energy{
  width: 80%;
  height: auto;
  margin: 0 auto 3rem;
}
a.txt_link{
  font-size: 1.6rem;
  position: relative;
  padding-left: 2.5rem;
}
a.txt_link::before{
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 1.4rem;
  height: 1.4rem;
  background-color: #333;
  border-radius: 3px;
}
a.txt_link::after{
  content: "";
  position: absolute;
  top: 50%;
  left: .5rem;
  width: .6rem;
  height: .6rem;
  margin-top: -.3rem;
  border-top: solid 2px #fff;
  border-left: solid 2px #fff;
  transform: rotate(-45deg);
}

.active .movie_block{
  animation-delay: 1.5s;
}
.active .prof{
  animation-delay: 1.75s;
}

}
 
 
/*================================================
* Smartphone Style
================================================*/
@media screen and  (max-width: 639px){
body{
  overflow-x: hidden;
}
.name::before{
  width: 100%;
}
.top_main{
  height: 34rem;
  background-color: #fcd61d;
  padding: 8rem 0 5rem;
}
.top_logo{
  width: 30.3rem;
  height: 13.5rem;
  margin-bottom: 2rem;
}
.q_icon::before{
  bottom: -2.5rem;
  right: -2.5rem;
  width: 8.8rem;
  height: 9.5rem;
}
.read{
  background-image: url( "../img/read_bg_sp.jpg");
  background-position: 0 bottom;
  background-size: cover;
  padding: 4rem 0;
}
.hash::before{
  content: "";
  position: absolute;
  top: 0;
  left: -.5rem;
  width: 2rem;
  height: 2rem;
}
/* challenge
----------------------------------------------- */
.challenge{
  padding: 4rem 0 6rem;
  text-align: center;
}
.icon{
  width: 80%;
  height: auto;
}
.icon::before{
  top: 4rem;
  right: -1.5rem;
  width: 3.5rem;
  height: 3.5rem;
}
.question{
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 1.8rem;
  padding-top: 1rem;
}
.prof{
  font-size: 1.6rem;
}
.ttl_main{
  font-size: 2rem;
}
.photo span::before{
  width: 100%;
}

/*
.q3 .photo span::before,
.q4 .photo span::before{
  width: 11rem;
  height: 4rem;
  right: -1rem;
}*/

.tegaki_foot{
  width: 90%;
}
.bnr_energy{
  width: 90%;
}
}