@charset "UTF-8";
.takumi {
font-family: "tk-takumi-okiraku-markertaip", sans-serif;
font-weight: 700;
font-style: normal;
}
#spmov{
  width:100%;
  background-color:#dce977;
  position: relative;
  font-family: ryo-gothic-plusn, sans-serif;
  font-weight: 700;
  font-style: normal;
}
#nav_wrapper {
  position: fixed;
  z-index: 0;
  width:350px;
  top:calc(8% + 215px);
  border-radius:50px 0 0 50px;
  background:#f5ff9c;
  padding:5.8em 0 1em 2.4em;
  box-sizing: border-box;
  transition: top 0.25s ease;
}
/*#nav_wrapper.is-scrolled {
  top:180px;
}*/
.shachihoko{position:absolute;right:9%;top:23%; width:85px; }
#nav_wrapper .logo{
  width:250px;
  aspect-ratio: 241 / 206;
  background: url(../img/sp/logo.png?1) no-repeat 0 0;
  background-size:contain;
  z-index:1;
  position:absolute; left:15%; top:-160px;
}
#nav_wrapper .logo a{
  width:100%;
  height:100%;
  display:block;
}
#nav_wrapper .nav_list {
  position: relative;
  width:90%;
  margin:0; 
}
#nav_wrapper .nav_list:before{
  content: '';
  position: absolute;
  top:0;
  left:10px;
  height:100%;
  border-left:3px dotted #ff9c00;
}
#nav_wrapper .nav_list li {
  opacity: 0;
  animation: slide-in 1s ease forwards;
  margin:0 0 1.8em;
  font-family: "tk-takumi-okiraku-markertaip", sans-serif;
  font-weight: 700;
  font-style: normal;
}
#nav_wrapper .nav_list li a {
  position: relative;
  color: #ff9c00;
  font-size:170%;
  padding:0 0 0 32px;
}
#nav_wrapper .nav_list li a:before{
  content: '';
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  width:38px;
  height:auto;
  background-image: url(../img/sp/no1.svg);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:0 0;
}
#nav_wrapper .nav_list li:nth-child(2) a:before{
  background-image: url(../img/sp/no2.svg);
}
#nav_wrapper .nav_list li:nth-child(3) a:before{
  background-image: url(../img/sp/no3.svg);
}
#nav_wrapper .nav_list li:nth-child(4) a:before{
  background-image: url(../img/sp/no4.svg);
}
#nav_wrapper .nav_list li:nth-child(5) a:before{
  background-image: url(../img/sp/no5.svg);
}
#nav_wrapper .nav_list li:nth-child(6) a:before{
  background-image: url(../img/sp/no6.svg);
}

#nav_wrapper .nav_list li:nth-child(1) {
  animation-delay: 0.15s;
}
#nav_wrapper .nav_list li:nth-child(2) {
  animation-delay: 0.3s;
}
#nav_wrapper .nav_list li:nth-child(3) {
  animation-delay: 0.45s;
}
#nav_wrapper .nav_list li:nth-child(4) {
  animation-delay: 0.6s;
}
#nav_wrapper .nav_list li:nth-child(5) {
  animation-delay: 0.75s;
}
#nav_wrapper .nav_list li:nth-child(6) {
  animation-delay: 0.9s;
}

@media all and (min-width: 768px) {
#nav_wrapper {left:calc(50% - 435px);}
}
@media screen and (max-width:767px) {
#nav_wrapper {display: none;}
}

.mainwrap {
  width: 486px;
  position: relative;
  background-color:#fbffd9;
  margin-left: calc(50% - 100px);
}

@media all and (min-width: 768px) {
.logo_sp {display: none;}
#spmov{
  background-image:url(../img/sp/jujutanbo.svg);
  background-repeat:no-repeat;
  background-position:left calc(50% + 420px) top 100px;
  background-size:35px auto;
  background-attachment: fixed;
}
}
@media screen and (max-width: 767px) {
.mainwrap {
  margin:0 auto; width:100%;
  background-image:linear-gradient(to top, #dce977, #dce977);
  background-repeat:no-repeat;
  background-size:auto 40vw;
  background-position:0 0;
}
}
.logo_sp {
  background-color:#dce977;
  padding:3vw 0;
}
.logo_sp a{
  width:78%;
  margin:0 auto;
  display:block;
  aspect-ratio: 2455 / 616;
  background: url(../img/sp/logo_sp.png) no-repeat center center; background-size:contain;
} 
.mainwrap h1{
  position: relative;
}
.mainwrap h1 span{
  position: absolute;
  bottom:-5%;
  left:0;
  right:0;
  margin:auto;
  width:80%;
  aspect-ratio: 848 / 215;
  display:block;
  z-index:11;
}
.mainwrap h1 figure{
  box-sizing: border-box;
  width:100%;
  margin:0 auto;
  border-radius:0 0 0 50px;
  overflow: hidden;
}
.mainwrap p.intro{
  position: relative;
  font-family: "tk-takumi-okiraku-markertaip", sans-serif;
  font-weight: 700;
  font-style: normal;
  color:#164de5;
  text-align:center;
  line-height:150%;
  font-size:150%;
  padding:2em 0 0;
}
.mainwrap p.intro::before {
  content: "";
  position: absolute;
  bottom:-40%;
  right:-1.5%;
  width:72px;
  aspect-ratio: 60 / 107;
  background-image: url(../img/sp/kugisaki.png);
  background-repeat:no-repeat;
  background-position:0 0;
  background-size:contain;
}
.mainwrap p.intro::after {
  content: "";
  position: absolute;
  top:10%;
  left:-2%;
  width:90px;
  aspect-ratio: 50 / 73;
  background-image: url(../img/sp/itadori.png);
  background-repeat:no-repeat;
  background-position:0 0;
  background-size:contain;
}
.mainwrap p.intro span{
  padding:0 .5em;
  border-bottom:2px dotted #ff9c00;
}
.mainwrap h2{
  position: relative;
  font-family: "vdl-logojrblack", sans-serif;
  font-weight: 900;
  font-style: normal;
  color:#ff9c00;
  padding:.25em 1em .1em 2.4em;
  font-size:245%;
  line-height:145%;
  background-color:#f5ff9c;
  border-radius:0 40px 0 0;
  display:inline-block;
  margin:1em 0 0;
}
.mainwrap h2#miraitower{
  padding:.3em 1em .15em 2.4em;
  line-height:115%;
  width: fit-content;
  box-sizing: border-box;
}
.mainwrap h2::before {
  content: "";
  position: absolute;
  bottom:10%;
  left:2.5%;
  width:60px;
  height:60px;
  background-image: url(../img/sp/no1.svg);
  background-repeat:no-repeat;
  background-position:0 0;
  background-size:contain;
}
.mainwrap h2#meijyo::before {
  background-image: url(../img/sp/no2.svg);
}
.mainwrap h2#kinshachi::before {
  background-image: url(../img/sp/no3.svg);
}
.mainwrap h2#tenman::before {
  background-image: url(../img/sp/no4.svg);
}
.mainwrap h2#flarie::before {
  background-image: url(../img/sp/no5.svg);
}
.mainwrap h2#miraitower::before {
  background-image: url(../img/sp/no6.svg);
  top:-5%;
  left:2.5%;
}
.sp-video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
@media screen and (max-width: 767px) {
.mainwrap h1 figure{
  border-radius:9.5vw 9.5vw 0 0;
}
.mainwrap p.intro{
  font-size:4.25vw;
  padding:7vw 0 3vw;
}
.mainwrap p.intro::before {
  width:14%;
  right:2.5%;
  bottom:-30%;
}
.mainwrap p.intro::after {
  top:15.5%;
  left:.5%;
  width:16%;
}
.mainwrap h2{
  padding:1.2vw 5.5vw .8vw 16vw;
  font-size:7vw;
  margin:3vw 0 0;
}
.mainwrap h2#miraitower{
  padding:1.6vw 5.5vw .9vw 16vw;
  font-size:7vw;
  margin:3vw 0 0;
}
.mainwrap h2::before {
  bottom:10%;
  left:2%;
  width:12vw;
  height:12vw;
}
}

/* クイズ */
#spquiz{
  position: relative;
  background-color:#fffd54;
  border-radius:0 50px 0 0;
  padding:5% 5% 1.5em;
  margin:4em auto 3em;
}
#spquiz h3{
  position: absolute;
  top:-.4em;
  left:4.5%;
  font-family: "vdl-logojrblack", sans-serif;
  font-weight: 900;
  font-style: normal;
  color:#164de5;
  text-shadow:2px 2px 0 #c9d857; -webkit-text-stroke: 1px #c9d857; text-stroke: 1px #c9d857;
  font-size:290%;
  line-height:100%;
}
#spquiz h4{
  color:#ff9c00;
  text-align:center;
  line-height:140%;
  font-size:150%;
  font-weight:700;
  padding:1em 0 .5em;
}
#spquiz h4 + p{
  font-size:120%;
  color:#164de5;
  line-height:150%;
}
#spquiz h4 + p span {
  background: linear-gradient(transparent 60%, rgba(255,156,0,0.4) 60%); 
  padding:0 .2em .1em;
  line-height:150%;
}
#spquiz h5{
  font-size:140%;
  line-height:140%;
  font-weight:700;
  color:#ff9c00;
  border-bottom:1px solid #ff9c00;
  padding:0 0 .1em;
  margin:1em 0 .5em;
}
#spquiz h5 + p{
  font-size:110%;
  line-height:140%;
  color:#111;
  font-weight:600;
  padding:0 !important;
  margin:0 !important;
}
#spquiz figure.sample{
  position: relative;
  box-sizing: border-box;
  width:92%;
  margin:0 auto;
  border-radius:1vw;
  overflow: hidden;
}
#spquiz ul.kome li{
  font-size:88%;
  font-weight: 500;
  line-height:140%;
  margin:0 0 .5em;
}

ol.circle-list {
  list-style: none;
  counter-reset: number;
}
ol.circle-list li {
  position: relative;
  padding-left: 1.5em;
  line-height:140%;
  margin:0 0 .25em;
}
ol.circle-list li::before {
  counter-increment: number;
  content: counter(number);
  position: absolute;
  top:.3em;
  left: 0;
  width: 1.2em;
  height: 1.2em;
  border: 1px solid #000;
  border-radius: 50%;
  font-size: 10px;
  text-align: center;
  line-height: 1.2;
}
@media screen and (max-width: 767px) {
#spquiz{
  border-radius:0 50px 0 0;
  padding:4% 5%;
  margin:8vw auto 9vw;
}
#spquiz h3{
  top:-.4em;
  left:4%;
  font-size:8.2vw;
}
#spquiz h4{
  font-size:4.25vw;
  padding:1em 0 .5em;
}
#spquiz h4 + p{
  font-size:3.6vw;
}
#spquiz h5{
  font-size:4.5vw;
  margin:4.5vw 0 .5em;
}
#spquiz h5 + p,
ol.circle-list li{
  font-size:3.6vw;
  padding-left: 1.25em;
}
#spquiz figure.sample{
  width:95%;
}
#spquiz ul.kome li{
  font-size:3vw;
}
ol.circle-list li {
  margin:0 0 1.5vw;
}
ol.circle-list li::before {
  top:.7vw;
  width:3.4vw;
  height:3.4vw;
  font-size:3vw;
  line-height:120%;
}
}

#footagelink {
  position: relative;
  width: 90%;
  margin:0 auto 3em;
  border: 2px solid #ff9c00;
  border-top: 0;
  border-radius: 25px; 
  box-sizing: border-box;
  background-color: #fff;
  padding:6% 5% 5%;
}
#footagelink h3 {
  position: absolute;
  display: flex;
  align-items: flex-start; 
  top: 0;
  left: -2px; 
  width: calc(100% + 4px);
  height: 25px;
  margin: 0;
  padding: 0;
  transform: translateY(-2px);
  background: transparent;
  pointer-events: none;
}
#footagelink h3::before,
#footagelink h3::after {
  content: "";
  flex-grow: 1;
  height: 25px;
  border: 2px solid #ff9c00;
  border-bottom: 0;
}
#footagelink h3::before {
  border-right: 0;
  border-radius: 25px 0 0 0;
}
#footagelink h3::after {
  border-left: 0;
  border-radius: 0 25px 0 0;
}
#footagelink h3 span {
  color: #ff9c00;
  font-size: 180%;
  font-weight: 700;
  margin: 0 15px;
  white-space: nowrap;
  transform: translateY(-50%);
  margin-top: 2px; 
  pointer-events: auto;
}
#footagelink p{
  color:#111;
  font-size:100%;
  line-height:140%;
  padding:0 0 1em;
}
#footagelink figure{
  position: relative;
  box-sizing: border-box;
  width:100%;
  margin:0 auto;
}
#footagelink figure img{
  border-radius:2.5vw;
}
#footagelink figure::before {
  content: "";
  width:38.5%;
  aspect-ratio: 421 / 196;
  z-index:1;
  position:absolute; bottom:-12.5%; left:13.5%;
  background: url(../img/shinansen/release.png) no-repeat 0 0;
  background-size:contain;  
}
#footagelink a{
  background-color: #e6f447;
  display:block;
  color:#ff9c00;
  font-size:120%;
  margin:1em auto 0;
  width: fit-content;
  padding:.5em 2em;
  border-radius:100vh;
  text-align:center;
} 
@media screen and (max-width: 767px) {
#footagelink {
  margin:0 auto 5vw;
}  
#footagelink h3 {
  font-size:3.5vw;
}
#footagelink p{
  font-size:3.4vw;
}
#footagelink a{
  font-size:4vw;
  margin:2.5vw auto 0;
  width:45vw;
  padding:.6vw 0;
}
#footagelink figure::before {
  width:38.5%;
  position:absolute; bottom:-6vw; left:8vw;
} 
}

.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);}
}
@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media all and (min-width: 768px) {
#whitebase {
width: 486px !important;
overflow: hidden;
}
}
@media screen and (max-width: 767px) {
#whitebase {
width:100%;
}
}