header{ padding: 0 10px; padding-top: env(safe-area-inset-top); top: 10px;}
header.scroll.is-scroll{ align-items: flex-start; transition: .2s ease-in-out;}
header .logo.forSP{ max-width: 175px;}
header .h_btn{ font-size: 14px; max-width: 140px; padding: 13px 10px; margin-right: 10px;}
.cp_cont,
.cp_offcm01 #cp_toggle01 ~ label{ width: 50px; height: 50px;}

p, a, li{ line-height: 1.6;}
p.notes{ font-size: 12px; padding-left: 15px;}
h2.title{ max-width: 350px;}


/* NAV */
.cp_offcm01 .cp_menu{ top: 70px; padding: 20px 10px; max-width: 160px; border-radius: 20px;}
.cp_offcm01 .cp_menu::before{ right: 14px;}
.cp_offcm01 .cp_menu li a{ font-size: 14px; padding: 0 0 10px;}
.cp_offcm01 #cp_toggle01:checked ~ .cp_menu{ -webkit-transform: translateX(-310px); transform: translateX(-310px);}
.cp_offcm01 .cp_menu .btn{ margin-bottom: 10px;}
.cp_offcm01 .cp_menu .btn a{ padding: 8px 5px; font-size: 16px;}
.cp_offcm01 .cp_menu li.contact span{ width: 18; position: absolute; top: 3px; left: 7%; margin: auto;}
.cp_offcm01 .cp_menu .sns_btn a{ width: 30%;}

/* MV */
section.mv{ height: 90vh; max-height: 810px; min-height: 800px;}
section.mv .para_wrap .para01_inner{ width: 160px; left: inherit;}
section.mv .para_wrap .para02_inner{ width: 180px;}
section.mv .para_wrap .para03_inner{ width: 70px; top: 100px; bottom: inherit; left: -30px;}
section.mv .para_wrap .para04_inner{ bottom: 40px;}
section.mv .para_wrap .para05_inner{ bottom: 10px; left: -40px; margin: auto; width: 140px;}
section.mv .wrap .left.forSP{ padding-left: 30px; padding-right: 30px;}
section.mv .wrap .left.forSP img{ max-width: 620px;}
section.mv .wrap .right{ background-image: url(../images/sp/mv_character.png); background-size: 1000px;}
/*@media screen and (max-height: 1059px) {
	section.mv {
		min-height: auto;
	}
}*/
@media screen and (max-width: 1024px){
	section.mv{ height: 880px;}
}
@media screen and (max-width: 768px){
	section.mv{ height: 810px;}
	section.mv .wrap .right{ background-size: 900px;}
	section.mv .wrap .left.forSP img{ max-width: 600px;}
}
@media screen and (max-width: 600px){
	section.mv{ height: 100%; min-height: 620px; max-height: 620px;}
	section.mv .wrap .right{ background-size: 660px;}
	section.mv .wrap .left.forSP img{ max-width: 420px;}
}
@media screen and (max-width: 400px){
	section.mv{ height: 100%; min-height: 540px; max-height: 540px;}
	section.mv .wrap .right{ background-size: 550px;}
}

/* ABOUT */
section.about .wrap{ flex-direction: column;}
section.about .para_wrap{ overflow: hidden;}
section.about .para_wrap .para04_inner{ width: 170px; top: -10px; left: -100px;}
section.about .para_wrap .para05_inner{ width: 70px; left: -30px; bottom: 170px;}
section.about .para_wrap .para06_inner{ width: 40px; height: 40px; top: 100px; right: -5px; bottom: inherit;}
section.about .para_wrap .para07_inner{ width: 90px; right: -56px; bottom: -40px;}
section.about .wrap .left{ max-width: 100%; border-right: 0 none; order: 2;}
section.about .wrap .left .forPC{ display: none;}
section.about .wrap .left .forSP{ display: block;}
section.about .wrap .right{ max-width: 100%; order: 1; padding: 80px 30px;}
section.about .wrap .right div{ max-width: 650px;}
section.about .wrap .right div h3{ font-size: 24px; margin: 30px 0 0 -10px;}
section.about .wrap .right div .p1{ font-size: 14px; margin: 5px 0 0;}
section.about .wrap .right div h4{ font-size: 16px; padding: 0 10px 0 20px; margin: 30px 0 0;}
section.about .wrap .right div .p2{ font-size: 14px; color: var(--color__white); margin: 10px 0 0;}

/* MOVIE */
section.movie .para_wrap{ overflow: hidden;}
section.movie .para_wrap .para08_inner{ bottom: -50px; right: -50px;}
section.movie .wrap{ display: block; padding: 80px 30px 80px; max-width: 650px; margin: auto;}
section.movie .wrap .left{ width: 100%; max-width: 720px;}
section.movie .wrap .left h3{ font-size: 16px; margin-top: 30px;}
section.movie .wrap .left h3 span:nth-child(1){ width: 30px;}
section.movie .wrap .left h3 span:nth-child(2){ display: inline-block;}
section.movie .wrap .left > .c{ display: none;}
section.movie .wrap .right{ width: 100%; min-width: 100%; margin-top: 30px;}
section.movie .wrap .right .yt_box .icon{ max-width: 42px;}
section.movie .wrap > .c{ display: block; position: absolute; bottom: -30px; left: 10px; right: inherit; margin: auto; width: 25%; min-width: 103px; max-width: 300px;}
@media screen and (max-width: 1024px){
	section.movie .wrap{ padding: 60px 30px 100px;}
	section.movie .wrap .right .yt_box{ border-radius: 10px;}
}
@media screen and (max-width: 500px){
	section.movie .wrap{ padding: 60px 30px 60px;}
}

/* AUDITION */
section.audition{ padding: 80px 10px 80px;}
section.audition .wrap{ width: 100%; max-width: 540px; margin: auto; padding: 0 0 0;}
section.audition .wrap h2{ text-align: center; display: block; margin: auto;}
section.audition .wrap h2 .item{ max-width: 40px;}
section.audition .wrap h3{ font-size: clamp(26px, 2.5vw + 10px, 50px); margin: 30px 0 0;}
section.audition .wrap .p1{ font-size: clamp(14px, 1.3vw + 10px, 20px); margin: 30px 0 0;}
section.audition .wrap .p1 br.forSP{ display: block;}
section.audition .wrap .flex{ width: 100%; max-width: 540px; display: block; margin: 30px auto 0;}
section.audition .wrap .flex .left{ width: 100%; max-width: 100%;}
section.audition .wrap .flex .right{ width: 100%; max-width: 100%; margin: 40px auto 0; padding: 0 20px; box-sizing: border-box;}
section.audition .wrap .flex .right div:nth-child(2){ margin-top: 40px;}
section.audition .wrap .flex .right div h4{ font-size: 16px; padding-left: 30px;}
section.audition .wrap .flex .right div h4::before{ width: 20px; height: 20px;}
section.audition .wrap .flex .right div ul{ padding: 0; margin-top: 15px;}
section.audition .wrap .flex .right div ul li{ padding: 0 0 0 20px; font-size: 14px;}
section.audition .wrap .flex .right div ul li::before{ top: 3px;}
section.audition .wrap .text_box.forPC{ display: none;}
section.audition .wrap .text_box.forSP{ display: block; width: 100%;}
section.audition .wrap .text_box.forSP .notes{ width: calc(100% - 40px);}
section.audition .wrap:nth-child(n+2){ margin-top: 80px; padding: 0 20px; box-sizing: border-box;}
section.audition .wrap .s_title_box{ width: 100%;}
section.audition .wrap .s_title_box h4{ font-size: clamp(25px, 2.5vw + 10px, 30px);}
section.audition .wrap .s_title_box h5{ width: 100%; max-width: 120px;}
section.audition .wrap .s_title_box h5 img{ vertical-align: text-top;}
@media screen and (max-width: 460px){
	section.audition .wrap .p1{ font-size: 13.5px;}
}
section.audition .wrap .t_box{ padding: 0 0; margin-top: 20px;}
section.audition .wrap .t_box table th,
section.audition .wrap .t_box table td{ display: block; width: 100%; padding: 30px 0 0;}
section.audition .wrap .t_box table tr:nth-child(1) th,
section.audition .wrap .t_box table tr:nth-child(1) td{ padding: 0 0 30px;}
section.audition .wrap .t_box table td{ padding: 30px 0;}
section.audition .wrap .t_box table tr:last-child td{ padding-bottom: 0;}
section.audition .wrap .t_box table th span{ font-size: 18px; padding-left: 30px;}
section.audition .wrap .t_box table th span::before{ width: 20px; height: 20px;}
section.audition .wrap .t_box table td ul li{ padding: 0 0 0 20px; font-size: 14px;}
section.audition .wrap .t_box table td ul li::before{ top: 3px;}
section.audition .wrap .t_box table td h6{ font-size: 16px;}

section.audition .wrap .process_ul{ margin-top: 20px; display: block;}
section.audition .wrap .process_ul li{ width: 100%; padding: 20px 20px;}
section.audition .wrap .process_ul li:nth-child(even){ margin: 10px 0;}
section.audition .wrap .process_ul li:last-child{ margin: 10px 0 0;}
section.audition .wrap .process_ul li .icon{ width: 100%; max-width: 80px;}
section.audition .wrap .process_ul li h6{ height: auto !important; font-size: 16px;}
section.audition .wrap .process_ul li h6 br{ display: none;}
section.audition .wrap .process_ul li .text_box > div > p{ font-size: 14px;}
section.audition .wrap .process_ul li .text_box > div > span{ padding: 0 10px;}
section.audition .wrap .process_ul li .text_box > .notes{ font-size: 12px;}

section.audition .wrap .box{ margin-top: 20px;}
section.audition .wrap .box h6{ font-size: 16px;}
section.audition .wrap .box > div{ padding: 20px;}
section.audition .wrap .box ul{ display: block;}
section.audition .wrap .box ul li{ padding: 0 0 0 20px; font-size: 14px;}
section.audition .wrap .box ul li::before{ top: 3px;}
section.audition .wrap .box ul li:nth-child(even){ margin: 10px 0;}
section.audition .wrap .box ul li:last-child{ margin: 10px 0 0;}
section.audition .wrap .box .notes{ margin-top: 10px;}

section.audition .wrap .noetes_box{ margin-top: 20px;}
section.audition .wrap .noetes_box h6{ font-size: 16px;}
section.audition .wrap .noetes_box > div{ padding: 20px;}
section.audition .wrap .noetes_box ul li{ padding: 0 0 0 20px; font-size: 14px;}
section.audition .wrap .noetes_box ul li::before{ top: 3px;}
section.audition .wrap .noetes_box ul li:nth-child(even){ margin: 10px 0;}
section.audition .wrap .noetes_box ul li:last-child{ margin-bottom: 0;}
section.audition .wrap .noetes_box ul li a{ font-size: 14px; display: inline-block;}

/* FAQ */
section.faq{ padding: 80px 30px 80px;}
section.faq .wrap{ max-width: 540px;}
section.faq .wrap h2 .item{ max-width: 40px; top: -50px; left: 0; right: 0; margin: auto;}
section.faq .wrap h3{ font-size: clamp(26px, 2.5vw + 10px, 50px); margin: 30px 0 0;}
section.faq .wrap .faq_box{ margin: 30px 0 0;}
.accordion-header{ padding: 10px 25px 10px 10px; margin: 10px 0 0;}
.accordion-header::before,
.accordion-header::after{ top: 1px; right: 10px; bottom: 0; width: 11px; height: 3px;}
.accordion-header > span{ font-size: 14px; padding-left: 50px;}
.accordion-header > span .i{ width: 33px; height: 33px; top: 0; bottom: 0; margin: auto;}
.accordion-content{ padding: 10px 10px 10px;}
.accordion-content > span{ font-size: 14px; padding-left: 50px;}
.accordion-content > span .i{ position: absolute; top: -6px; left: 0; width: 33px;}
section.faq .wrap .contact_box{ max-width: 250px; margin: 30px auto 0;}
section.faq .wrap .contact_box a{ padding: 0 0 0 50px; font-size: 18px;}
section.faq .wrap .contact_box a > span{ width: 40px;}

/* FOOTER */
footer{ padding: 60px 30px 120px;}
footer .wrap{ max-width: 540px;}
footer .wrap .box{ display: block;}
footer .wrap .box .bnr{ max-width: 100%; margin: 0;}
footer .wrap .box .share{ max-width: 220px; margin: 20px auto 0;}
footer .wrap .box .share > img{ max-width: 80px;}
footer .wrap .box .share > div{ padding: 10px 20px;}
footer .wrap .box.f{ margin-top: 80px;}
footer .wrap .box.f img{ min-width: 240px; max-width: 60%;}
footer .wrap .box.f p{ font-size: 12px;}

#toTop img{ max-width: 91px;}