@charset "UTF-8";

*{
margin:0;
padding:0;
font-family:"メイリオ","Hiragino Kaku Gothic ProN",sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-feature-settings: "palt" 1;
letter-spacing: 0.05em;
font-style: normal;
box-sizing: border-box;
text-align: center;
border: none;
outline: none;
font-size: 0;
}
a img {
border: none;
}
img {
vertical-align: bottom;
height: auto;
}
li {
list-style-type: none;
}
iframe {
width: 100%;
border: none;
}
.responsive {
width: 100%;
height: auto;
}
.SPhover {
opacity: 0.7;
}
html {
font-size: 4.2vw;
line-height: 1.8;
}
body {
color: #000;
}
.pc{
display: none;
}
.mobile {
display: block;
}
.popFont{
font-family: "Mochiy Pop One", sans-serif;
font-weight: 400;
letter-spacing: 0.05em;
}
.layer{
position: absolute;
}
.effect{
transition: 0.6s all;
/*transition-delay: 0.3s;*/
transform: translate(0, 2rem);
opacity: 0;
}
.effect.active{
transform: translate(0, 0);
opacity: 1;
}

#curtain{
position:fixed;
top:0;
left:0;
width:100vw;
height:100lvh;
background:url("../../20250529/images/bg.png") #AC1920;
background:url("../images/bg_white.png") #FFF;
background-size: 50%;
z-index:10;
}
#curtain .loading{
position:absolute;
top:40%;
left:40%;
width:20%;
animation-name:dance;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 1s;
transform-origin:50% 100%;
}
@keyframes dance {
0% {
transform: rotate(-10deg);
}
100% {
transform: rotate(10deg);
}
}
#popup{
display: none;
}
#curtain iframe{
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
border-radius: 1.5vw;
}
#close{
position: absolute;
width: 10vw;
height: 10vw;
top:2vw;
right: 2vw;
background:url("../images/close.png");
background-size: 100%;
}
#contents{
display:none;
overflow: hidden;
}

main{
background: url("../images/main_frame_mobile.png") center center no-repeat, url("../images/bg_yellow.png") center center ;
background-size: 100%, 75%;
padding: 3vw;
width: 100%;
aspect-ratio:960/3280;
}
#mainTTL{
margin: 0 auto;
background: url("../images/logobg_mobile.png") center 80% no-repeat;
background-size: 100%;
width: 90%;
aspect-ratio:800/1350;
position: relative;
}
#mainTTL h1{
position: absolute;
background: url("../images/main_logo.png") center center no-repeat;
background-size: 100%;
text-indent: -99999px;
aspect-ratio:1600/940;
width:98%;
top:51vw;
left: 1vw;
z-index: 1;
}
#mainTTL .chara{
width: 28vw;
aspect-ratio:240/280;
}
#mainTTL .shinchan{
top:25vw;
left: -1vw;
}
#mainTTL .bo{
top:26vw;
left: 59vw;
}
#mainTTL .shiro{
top: 18vw;
left: 28vw;
}
#mainTTL .kazama{
top:101vw;
left: -1vw;
}
#mainTTL .nene{
top:100vw;
left: 57vw;
}
#mainTTL .masao{
top: 109vw;
left: 28vw;
}
#fukidashi{
display: block;
position: absolute;
background: url("../images/fukidashi_mobile.png") no-repeat;
background-size: 100%;
width: 55%;
aspect-ratio:940/380;
text-indent: -99999px;
top:7vw;
left: 14vw;
}
.mainRead{
font-size: 1.15rem;
color:#ed2626;
line-height: 1.4;
}
.mainRead span{
font-size: 0.9rem;
}
#about{
width:90%;
margin: 5vw auto;
position: relative;
}
#about1,#about2{
display: block;
width:100%;
text-indent: -99999px;
aspect-ratio:1160/500;
margin: 2vw auto;
}
#about1{
background: url("../images/about1.png") center center no-repeat;
background-size: 100%;
}
#about2{
background: url("../images/about2.png") center center no-repeat;
background-size: 100%;
}
#about1.effect,
#about2.effect{
transform: scale(0);
transition: 1.0s all cubic-bezier(0.19, 1, 0.22, 1);
}
#about2.effect{
transition-delay: 0.3s;
}
#about1.effect.active,
#about2.effect.active{
transform: scale(1);
}
#aboutAnd{
position: absolute;
width: 12vw;
top: 32vw;
left: 37vw;
z-index: 1;
}
#about .cautions{
padding: 0 3vw;
text-align: justify;
font-size: 0.7rem;
line-height: 1.4;
color:#ed2626;
}
.headingH2{
width: 44%;
text-indent: -99999px;
aspect-ratio:640/180;
margin: 0vw auto 6vw auto;
}
#end .headingH2{
background: url("../images/heading_end.png") center center no-repeat;
background-size: 100%;
margin: 2vw auto;
}
#end .mainRead{
font-size: 1.35rem;
}
#end .mainRead span{
font-size: 1.1rem;
}

#prize{
background:url("../images/bg_india.png") center center, url("../images/bg_yellow2.png") center center;
background-size: 150%, 100%;
padding: 15vw 0;
width: 100%;
}
#prize .headingH2{
background: url("../images/heading_prize.png") center center no-repeat;
background-size: 100%;
}
#prize .read{
font-size: 1rem;
line-height: 1.5;
color: #582300;
}
#prize .read strong{
font-size: 1rem;
background: #ffff65;
padding: 0.25em;
border-radius: 0.15em;
margin-right: 0.25em;
color: #ed2626;
font-weight: 600;
line-height: 1;
}
#prize .prizePhoto{
width: 80%;
margin-top: -7vw;
}
#prize .wrap .effect{
transition-delay: 0.3s;
filter: brightness(2);
}
#prize .wrap .effect.active{
filter: brightness(1);
}

#howto{
background:url("../images/bg_yellow.png") center center;
background-size: 75%;
padding: 15vw 0;
width: 100%;
}
#howto .headingH2{
background: url("../images/heading_howto.png") center center no-repeat;
background-size: 100%;
}


.step1.effect,
.step2.effect,
.step3.effect{
transition-delay: 0.3s;
}
#howto .shinchan.effect{
transition: 0.3s all;
transition-delay: 1.3s;
transform: translate(2rem, 0);
}
#howto .nene.effect,
#howto .shiro.effect,
#howto .masao.effect,
#howto .kazama.effect{
transition: 0.3s all;
transition-delay: 1.2s;
transform: translate(2rem, 0);
}
#howto .shinchan.effect.active,
#howto .nene.effect.active,
#howto .shiro.effect.active,
#howto .masao.effect.active,
#howto .kazama.effect.active{
transform: translate(0, 0);
opacity: 1;
}
.step1{
position: relative;
background: url("../images/bg_red.png") center center;
background-size: 100%;
border-radius: 3vw;
padding: 5vw 0;
width: 94%;
margin:0 auto;
}
#courseA, #courseB{
display: inline-block;
margin: 0;
width: 45.5%;
vertical-align: top;
}
#courseA{
margin-right: 3%;
}
#courseA .step2,
#courseA .step3,
#courseB .step2,
#courseB .step3{
position: relative;
border-radius: 3vw;
padding: 5vw 0;
width: 100%;
margin:0 auto;
}
#courseA .step2,
#courseA .step3{
background: url("../images/bg_orange.png") center center;
background-size: 100%;
}
#courseB .step2{
background: url("../images/bg_green.png") center center;
background-size: 100%;
}
#courseB .step3{
background:url("../images/bg_form_mobile.png") center bottom no-repeat, url("../images/bg_green.png") center center;
background-size: 100%;
padding: 5vw 0 28.5vw 0;
}
#courseA .step2,
#courseB .step2{
margin-top: 10vw;
}
#courseA .step2{
padding: 5vw 0 11.7vw 0;
}
#courseB .step2{
padding: 5vw 0 1.5vw 0;
}
.headingStep{
width: 35vw;
text-indent: -99999px;
aspect-ratio:640/140;
margin: 0vw auto 3vw auto;
}
.step1 .headingStep{
background: url("../images/step1.png") center center no-repeat;
background-size: 100%;
}
.step2 .headingStep{
background: url("../images/step2.png") center center no-repeat;
background-size: 100%;
}
.step3 .headingStep{
background: url("../images/step3.png") center center no-repeat;
background-size: 100%;
}
.headingRibbon{
position: absolute;
width: 100%;
text-indent: -99999px;
aspect-ratio:880/320;
top:-10.2vw;
}
#courseA .headingRibbon{
background: url("../images/ribbon_a.png") center center no-repeat;
background-size: 100%;
}
#courseB .headingRibbon{
background: url("../images/ribbon_b.png") center center no-repeat;
background-size: 100%;
}
.step1 .chara{
top: -13vw;
left: 2vw;
width: 30%;
aspect-ratio:580/600;
}
#courseA .chara,
#courseB .chara{
top: -5vw;
left: -5vw;
width: 48%;
aspect-ratio:420/480;
}
.step1 .example{
display: block;
margin: 4vw auto 0 auto;
width: 90%;
vertical-align: top;
}
.step1 .example iframe{
width: 100%;
aspect-ratio:16/9;
border-radius: 1.5vw;
}
.step1 .example p{
color: #FFF;
font-size: 0.75rem;
margin-top: 0.25em;
}
#howto p.popFont{
font-size: 1.0rem;
line-height: 1.2;
color: #FFF;
}
#howto p.popFont strong{
font-size: 1.0rem;
line-height: 1.2;
font-weight: normal;
color: #ffff65;
}
#howto .step2 p.popFont,
#howto .step2 p.popFont strong,
#howto .step3 p.popFont,
#howto .step3 p.popFont strong{
font-size: 0.9rem;
}
#courseA .step3 p.popFont{
transform: scale(0.95, 1);
}
.howtoBTN{
display: block;
width: 90%;
text-indent: -99999px;
aspect-ratio:360/104;
margin: 2vw auto 0vw auto;
}
#courseA .step2 .howtoBTN:nth-of-type(1){
background: url("../images/btn_song_tiktok_mobile.png") center center no-repeat;
background-size: 100%;
}
#courseA .step2 .howtoBTN:nth-of-type(2){
background: url("../images/btn_song_insta_mobile.png") center center no-repeat;
background-size: 100%;
}
#courseA .step3 .howtoBTN:nth-of-type(1){
background: url("../images/btn_sns_tiktok_mobile.png") center center no-repeat;
background-size: 100%;
}
#courseA .step3 .howtoBTN:nth-of-type(2){
background: url("../images/btn_sns_insta_mobile.png") center center no-repeat;
background-size: 100%;
}
#courseB .step3 .howtoBTN:nth-of-type(1){
background: url("../images/btn_form_mobile.png") center center no-repeat;
background-size: 100%;
}
#courseB picture img{
width: 90%;
}
.arrow{
width: 5vw;
margin: 1vw auto;
}
.arrow.effect{
transform: translate(0, -3rem);
}
.effect.active{
transform: translate(0, 0);
opacity: 1;
}
#howto h5{
display: inline-block;
color: #fff;
font-weight: bold;
background: #e5300b;
margin: 10vw auto 2vw auto;
font-size: 1rem;
padding: 0.3em 0.5em;
border-radius: 1vw;
line-height: 1;
}
#howto .cautions{
display: block;
margin: 0 auto;
width: 90%;
text-align: justify;
font-size: 0.75rem;
line-height: 1.6;
color: #e5300b;
}

#terms{
background:url("../images/footer_line.png") bottom center repeat-x, url("../images/bg_india_line.png") center center, url("../images/bg_white.png") center center;
background-size: 7.2%, 116%, 100%;
padding: 15vw 0;
width: 100%;
}
#terms .headingH2{
background: url("../images/heading_terms.png") center center no-repeat;
background-size: 100%;
margin: 2vw auto;
}
#terms p{
display: block;
font-size: 0.7rem;
color: #000;
text-align: justify;
width: 75%;
margin: 0 auto;
line-height: 2.0;
}
#terms p.cautions{
text-align: center;
font-weight: bold;
font-size: 0.75rem;
color: #f00000;
margin-bottom: 5vw;
}
#terms p a{
font-size: 0.7rem;
}
#terms h3{
text-align: center;
font-weight: bold;
font-size: 0.75rem;
color: #000;
margin-top: 3em;
margin-bottom: 1em;
}

#footerLogo{
display: block;
background: url("../images/footer_logo.png") center center no-repeat;
background-size: 100%;
width: 70%;
text-indent: -99999px;
aspect-ratio:1120/580;
margin: 10vw auto 2vw auto;
}
#terms p.cr{
text-align: center;
font-size:0.5rem;
color: #000;
}

/*PC*/
@media screen and (min-width:640px){

.pc{
display: block;
}
.mobile {
display: none;
}
html {
font-size: 1.8vw;
}
#curtain .loading{
top:36%;
left:42%;
width:135px;
}
#curtain iframe{
border-radius: 0.5rem;
}
#close{
width: 3rem;
height: 3rem;
top:1rem;
right: 1rem;
}

main{
background: url("../images/main_frame_pc.png") center center no-repeat, url("../images/bg_yellow.png") center center ;
background-size: 100%, 30%;
padding: 12vw 0 0 0;
width: 100%;
aspect-ratio:2800/3700;
}
#mainTTL{
margin: 0 auto;
background: url("../images/logobg_pc.png") center 80% no-repeat;
background-size: 100%;
width: 70%;
aspect-ratio:2000/1600;
}
#mainTTL h1{
top:10vw;
left: 7.5vw;
position: absolute;
background: url("../images/main_logo.png") center center no-repeat;
background-size: 100%;
text-indent: -99999px;
aspect-ratio:1600/940;
width:79%;
}
#mainTTL .chara{
width: 17vw;
}
#mainTTL .shinchan{
top: 0vw;
left: 3vw;
}
#mainTTL .bo{
top: 0vw;
left: 51vw;
}
#mainTTL .shiro{
top: 37vw;
left: 49vw;
}
#mainTTL .kazama{
top: 18vw;
left: -9vw;
}
#mainTTL .nene{
top: 18vw;
left: 63vw;
}
#mainTTL .masao{
top: 36vw;
left: 4vw;
}
#fukidashi{
background: url("../images/fukidashi_pc.png") no-repeat;
background-size: 100%;
aspect-ratio: 680/280;
width: 31%;
top: -7vw;
left: 10vw;
transform-origin: 50% 100%;
}
.mainRead{
font-size: 1.8rem;
font-size: 3.1vw;
line-height: 1.4;
}
.mainRead span{
font-size: 1.3rem;
font-size: 2.3vw;
}
#about{
width:88%;
margin: 1vw auto 0 auto;
}
#about .wrap{
display: inline-block;
width:48%;
vertical-align: top;
}
#about1,#about2{
margin: 1vw auto;
}
#aboutAnd{
width: 6vw;
top: 7vw;
left: 41vw;
}
#about .cautions{
font-size: 0.7rem;
}
.headingH2{
width: 15rem;
margin: 0 auto 2rem auto;
}
#end .headingH2{
margin: 2vw auto;
}
#end .mainRead{
font-size: 2.0rem;
font-size: 3.3vw;
}
#end .mainRead span{
font-size: 1.7rem;
font-size: 2.3vw;
}

#prize{
background:url("../images/bg_india.png") center center, url("../images/bg_yellow2.png") center center;
background-size: 150%, 50%;
padding: 6rem 0;
}
#prize .read,#prize .read strong{
font-size: 1.4rem;
padding: 0.05em 0.25em;
}
#prize .prizePhoto{
width: 34%;
margin: 0.5rem -0.5rem 0 -0.5rem;
}
#prize .wrap .effect:nth-of-type(1){
transition-delay: 0s;
}
#prize .wrap .effect:nth-of-type(2){
transition-delay: 0.2s;
}
#prize .wrap .effect:nth-of-type(3){
transition-delay: 0.4s;
}

#howto{
background:url("../images/bg_yellow.png") center center;
background-size: 30%;
padding: 6rem 0;
}  
.step1,
#courseA .step2,
#courseA .step3,
#courseB .step2,
#courseB .step3{
border-radius: 1rem;
padding: 2.5rem 0;
}
.step1{
background: url("../images/bg_red.png") center center;
background-size: 50%;
}
#courseA .step2,
#courseA .step3{
background: url("../images/bg_orange.png") center center;
background-size: 50%;
}
#courseB .step2{
background: url("../images/bg_green.png") center center;
background-size: 50%;
}
#courseB .step3{
background:url("../images/bg_form_pc.png") center bottom no-repeat, url("../images/bg_green.png") center center;
background-size: 100%, 50%;
padding: 2.5rem 0 10.8rem 0;
}
#courseA .step2,
#courseB .step2{
margin-top: 4rem;
}
#courseA .step2{
padding: 2rem 0 4.3rem 0;
}
#courseB .step2{
padding: 2rem 0 0.75rem 0;
}
.headingStep{
width: 26vw;
margin: 0vw auto 1rem auto;
}
.headingRibbon{
width: 80%;
top:-4rem;
left: 10%;
}
.step1 .chara{
top: -3.5rem;
left: 2rem;
width: 25%;
}
#courseA .chara,
#courseB .chara{
top: -2.6rem;
left: -1.5rem;
width: 38%;
}
.step1 .example{
display: inline-block;
margin: 1rem 0.5rem 0 0.5rem;
width: 45%;
}
.step1 .example iframe{
border-radius: 0.5rem;
}
#howto p.popFont{
font-size: 1.5rem;
padding-bottom: 0.5rem;
}
#howto p.popFont strong{
font-size: 1.5rem;
}
#howto .step2 p.popFont,
#howto .step2 p.popFont strong,
#howto .step3 p.popFont,
#howto .step3 p.popFont strong{
font-size: 1.4rem;
}
.howtoBTN{
aspect-ratio:940/160;
margin: 0.75rem auto 0vw auto;
}
#courseA .step2 .howtoBTN:nth-of-type(1){
background: url("../images/btn_song_tiktok_pc.png") center center no-repeat;
background-size: 100%;
}
#courseA .step2 .howtoBTN:nth-of-type(2){
background: url("../images/btn_song_insta_pc.png") center center no-repeat;
background-size: 100%;
}
#courseA .step3 .howtoBTN:nth-of-type(1){
background: url("../images/btn_sns_tiktok_pc.png") center center no-repeat;
background-size: 100%;
}
#courseA .step3 .howtoBTN:nth-of-type(2){
background: url("../images/btn_sns_insta_pc.png") center center no-repeat;
background-size: 100%;
}
#courseB .step3 .howtoBTN:nth-of-type(1){
background: url("../images/btn_form_pc.png") center center no-repeat;
background-size: 100%;
}
.arrow{
width: 2rem;
margin: 0.5rem auto;
}
#howto h5{
margin: 3rem auto 1rem auto;
font-size: 1.3rem;
padding: 0.3em 0.5em;
border-radius: 0.5rem;
}
#howto .cautions{
display: inline-block;
margin: 0 auto;
width: auto;
font-size: 0.9rem;
}

#terms{
background:url("../images/footer_line.png") bottom center repeat-x, url("../images/bg_india_line.png") center center, url("../images/bg_white.png") center center;
background-size: 3.5%, 100%, 50%;
padding: 6rem 0 7rem 0;
width: 100%;
}
#terms p{
width: 66%;
}
#footerLogo{
width: 48%;
margin: 5rem auto 1rem auto;
}

@media (orientation: portrait){

/*デバイスが縦向きの場合*/

}

}
/*PC*/
@media screen and (min-width:1400px){

html {
font-size: 1.8vw;
font-size: 24.5px;
}
#prize .wrap,
#howto .wrap,
#terms .wrap{
margin: 0 auto;
width: 1400px;
}
}