/*----------------------------------------
    top page
------------------------------------------*/

/* fv
------------------------------------------*/


/* ==========================================
   Audition Page Styles
========================================== */

.fix_btn{position: fixed;bottom: 0;right: 0;width: min(30%,200px);z-index: 200;}

.section_title{text-align: center;margin-bottom: 50px;
    &:not(:has(img)){font-size: clamp(34px,7vw,60px);line-height: 1.3em;font-weight: bold;position: relative;color: var(--c_theme_color);padding-bottom: 50px;
        @media screen and (max-width: 835px) {padding-bottom: 30px;}
        &:before{position: absolute;content: attr(data-title);font-size: .35em;line-height: 1.3em; left: 50%;transform: translateX(-50%);bottom: 0;white-space: nowrap;}
    }
}
.content_title{text-align: center;font-weight: bold;color: var(--c_theme_color);font-size: clamp(28px,5vw,40px);line-height: 1.4em;margin-bottom: 40px;}

/* ==========================================
   Hero Section
========================================== */
.audition_hero {position: relative; width: 100%;   margin-bottom: 10vw;
    img{width: 100%;}
    .hero_flex{display: flex;
        .hero_kv { width: 40%; z-index: 0;
            img {width: 100%; height: 100%; object-fit: cover; }
        }
        .hero_content {position: relative; z-index: 1; text-align: center; color: #fff; padding: 5% 0 ;width: 60%;  
            .hero_title{width: 70%; margin:0 auto 4vw;}
            .hero_logo{width: 60%;margin: 0 auto;}
        }
    }
    .hero_notice {width: 90%;margin-right: 0;margin-left: auto;margin-top: -18vw;position: relative;z-index: 5;margin-bottom: 3vw;}
}
@media screen and (max-width: 835px) {
    .audition_hero{padding-top: 40px;
        .hero_flex{flex-direction: column-reverse;
            .hero_kv{width: 100%;margin: 0 auto;}
            .hero_content{width: 100%;
                .hero_title{width: 85%;margin: 0 auto 6vw;}
                .hero_logo{width: 60%;margin: 0 auto 5vw;}
            }
        }
        .hero_notice{margin-top: 5vw;width: 100%; margin: 5vw 0;}
    }
}


/* ==========================================
   Section Common Styles
========================================== */
.audition_types_section { position: relative;}
.section_title_box {text-align: center;}
.section_title {
	.title_main {display: block; font-size: clamp(22px, 4vw, 36px); font-weight: bold; line-height: 1.5em; background: var(--audition_gradient_multi); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}
}
.section_subtitle {font-size: clamp(14px, 2.5vw, 18px); line-height: 1.8; margin-top: 20px; color: #666;}


/* ==========================================
   About Academy
========================================== */
.about_academy_box {background: #fff; border: 2px solid var(--c_theme_color); border-radius: 16px; padding: clamp(24px, 5vw, 60px); text-align: center;position: relative;
    &:before{position: absolute;content: "";background: var(--c_accent_color);width: 100%;height: 100%;top: 20px;left: 20px;z-index: -1;border-radius: 16px;}
    .academy_title {font-size: clamp(20px, 3.5vw, 40px);line-height: 1.4em; font-weight: bold;  color: var(--c_theme_color);position: relative;z-index: 2;margin-bottom:clamp(30px,4vw,60px);}
    .academy_logo {margin-bottom: clamp(30px,4vw,60px);position: relative;z-index: 2;
        img {max-width: 500px; margin: 0 auto;width: 90%;}
    }
    .academy_description {font-size: clamp(16px, 2.5vw, 18px); line-height: 1.9;text-align: left;position: relative;z-index: 2;
        p {margin-bottom: 16px;}
    }
	.academy_logo2{ display: flex; justify-content: center;margin-top: 2em;
		img{ width: 40%; max-width: 250px; margin: 0 5%;}
	}
}

.badge_link{ position: absolute; top: -5%; right: -5%; width: 20%; z-index: 2;
	img{ width: 100%;}
}

@media screen and (max-width: 835px) {
    .about_academy_box {
        &:before {top: 10px;
            left: 10px;}
    }
	.badge_link{
		position: inherit; top: 0; left: 0; width: 50%; margin: 2em auto 0;
	}
}


/* ==========================================
   受賞者特典セクション Campaign Benefits Section
========================================== */

.campaign_benefits_section {color: white;padding: clamp(60px, 8vw, 100px) 0;position: relative; margin-bottom:calc(var(--base_distance)*1);
    &:before{position: absolute;content: "";background:var(--c_theme_color);top: 0;left: 0;width: 100%;height: 100%;opacity: .8;}
    .section_title{color: #fff;}
}

.benefits_header {text-align: center;margin-bottom: 60px;}

.benefits_description {font-size: clamp(14px, 2.5vw, 16px);line-height: 1.9;text-align: center;}
.benefits_card {background: white;border-radius: 20px; position: relative;}
.benefits_card .badge{ position: absolute; background-color: #ff0; padding: 2% 5%; color: #000; text-align: center; position: absolute; right: 0; top: -15px; font-weight: bold; border-radius: 10px;box-shadow: 8px 8px black; line-height: 1.5em;}

.card_content {padding: clamp(28px, 5vw, 70px) clamp(22px,3vw,40px);}
.department_title {font-size: clamp(24px, 4vw, 32px);font-weight: bold;line-height: 1.5em;color: var(--c_theme_color);margin-bottom: 1em;text-align: center;position: relative;}


.benefit_items {display: flex;flex-direction: column;gap: 24px;}
.benefit_item {display: flex;gap: 30px;padding: 24px;align-items: center;
    .benefit_rank {text-align: center;padding: 20px;width: 25%;
        .rank_label {display: block;font-size: clamp(18px, 3vw, 22px);font-weight: bold;color: var(--c_theme_color);margin-bottom: 0;line-height: 1.4;}
    }
    .benefit_details {border-left: 2px solid var(--c_theme_color);width: 75%;padding: 20px;color: var(--c_font_color);font-size: clamp(16px,2vw,20px);line-height: 1.5em;font-weight: 500;}
    .benefit_note {font-size: clamp(14px, 2vw, 16px);line-height: 1.5em;}
}

@media screen and (max-width: 835px) {
    .benefits_description{text-align: left;}
    .benefit_item{padding: 0;flex-direction: column;gap:6px;
        .benefit_rank{width: 100%;padding: 0;}
        .benefit_details{width: 100%;border-left:none;border-top: 1px solid var(--c_theme_color);padding: 14px 0;}
    }
	.benefits_card .badge{ font-size: 14px; top: -20px; right: -5px; box-shadow: 5px 5px black;}
}


/* ==========================================
   Skill Sheet Banner
========================================== */
.skill_sheet_banner {border: 4px solid var(--c_accent_color);border-radius: 20px;color: #fff; padding: clamp(30px, 5vw, 60px) clamp(20px,4vw,70px);position: relative;font-size: clamp(14px, 2.5vw, 20px);font-weight: bold;
    .banner_title {font-size: clamp(18px, 4vw, 32px);font-weight: bold;line-height: 1.4em; margin-bottom: clamp(20px,3vw,40px);text-align: center;}
    .banner_description {margin-bottom: 24px;}
    .banner_highlight {border: 1px solid #fff; color: white;padding: 20px 20px;text-align: center;margin-bottom: 40px;
        p {margin: 0;}
        .pc_only{ display: inline-block;}
    }
	.skill_img{ background-color: #050508; text-align: center; padding-bottom: 1em; margin-bottom: 1em;
		img{ width: 100%; max-width: 400px; margin: 0 auto 0.5em;}
		.skill_imgtxt{ font-weight: 300; font-size: 14px; margin-bottom: 0; line-height: 1.5em;}
	}
    .banner_footer {}
}
@media screen and (max-width: 835px) {
    .skill_sheet_banner{
        .banner_highlight{padding: 16px 12px;margin-bottom: 24px; text-align: left;}
    }
	.skill_img{ padding: 5%;}
}


.person_types_grid{
    .person_type_item{display: flex;align-items: flex-start;gap:40px;
        &:not(:last-of-type){margin-bottom: 40px;}
        .type_label{background: var(--c_theme_color);color: #fff;display: flex;align-items: center;justify-content: center;width: 25%;font-size: clamp(18px,3vw,24px);line-height: 1.4em;min-height: 70px;}
        .type_content{font-weight: 500;font-size: clamp(15px,2vw,18px);line-height: 1.6em; width: calc(100% - 25%);
            p:last-of-type{margin: 0;}
        }
    }
}
@media screen and (max-width: 835px) {
    .person_types_grid{
        .person_type_item{flex-direction: column;gap:16px;
            .type_label{width: 100%;min-height: initial;padding: 6px 0;}
			.type_content{ width: 100%;}
			
        }
    }
}


.requirements_list{background: rgba(255, 255, 255, 0.733);padding: clamp(24px,4vw,50px);
    .requirement_row{display: flex;padding-bottom: 20px;margin-bottom: 20px;border-bottom: 1px solid #ccc;gap:30px;align-items: flex-start;
        .requirement_label{background: #000;color: #fff;padding: .5em 1em;width: 14%;text-align: center;}
        .requirement_value{font-weight: 500;font-size: clamp(15px,2vw,18px);line-height: 1.5em;padding-top: .4em;
            p{margin-bottom: 0;
                &:not(:last-of-type){margin-bottom: 1em;}
            }
        }
    }
}
@media screen and (max-width: 835px) {
    .requirements_list{
        .requirement_row{flex-direction: column;gap:10px;
            .requirement_label{width: 100%;}
        }
    }
}

.achievements_section{    padding: 0 0 calc(var(--base_distance) * 1.5); }

.achievments{
	ul{ border-top: 1px dashed #ccc;}
	li{display: flex; align-items: center; padding: 0.7em 0; border-bottom: 1px dashed #ccc; line-height: 1.5em; 
		
		&:before{ content: ""; display: block; background-image: url("../images/badge.webp"); width: 65px; height: 50px; background-size: contain; background-repeat: no-repeat;}
		
		p{ margin: 0; width: calc(100% - 65px);}
	}
	
}

.evaluation_section{
    .evaluation_description{font-weight: bold;text-align: center;}
    .entry_period_box{border: 3px solid var(--c_theme_color);padding: 30px 20px;text-align: center;
        .entry_period_label{font-weight: bold;color: var(--c_theme_color);font-size: clamp(16px,2vw,22px);line-height: 1.5em;margin-bottom: 0.5em;}
        .entry_period_date{font-size: min(24px, 2vw); line-height:2em;font-weight: bold;margin-bottom: 0;
            .big{font-size: 32px;line-height: 1.1em;}
        }
    }
}
@media screen and (max-width: 835px) {
    .evaluation_section{
        .entry_period_box{padding: 20px 14px;
            .entry_period_date{font-size: 16px;line-height: 1.3em;
                .big{font-size: 28px;line-height: 1.3em;}
            }
        }
    }
}

.entry_wrap{background: rgba(255, 255, 255, 0.733);padding: clamp(24px,4vw,50px) clamp(12px,3vw,40px);}


.department_selection_box{display: flex;gap:40px;margin-bottom: 40px;
    .department_box{width: calc((100% - 40px)/2);display: block;text-align: center;padding: .7em;font-weight: bold;font-size: 20px;line-height: 1.3em;position: relative;
        &:before{position: absolute;content: "";background: var(--c_font_color);width: 20px;height:14px;left: 50%;transform: translateX(-50%);bottom: -28px;clip-path: polygon(50% 100%, 0 0, 100% 0);}
        &.actor_dept{background: var(--c_theme_color);color: #fff;}
        &.producer_dept{background: var(--c_accent_color);}
    }
}

.flow_chart{
    .flow_step{border: 4px solid #ccc;padding: 24px 20px;text-align: center;font-weight: 500;margin-bottom: 40px;position: relative;
        &.final_step{
            &:before{display: none;}
        }
        &:before{position: absolute;content: "";background: var(--c_font_color);width: 20px;height:14px;left: 50%;transform: translateX(-50%);bottom: -28px;clip-path: polygon(50% 100%, 0 0, 100% 0);}
        .step_box{font-size: clamp(16px,2vw,20px);line-height: 1.5em;
            &.producer_box{
                .step_title{color: var(--c_accent_color_dark);}
            }
        }
        .step_title{font-weight: bold;text-align: center;color: var(--c_theme_color);font-size: clamp(20px,2.2vw,28px);line-height: 1.3em;margin-bottom: 14px;}
        .step_date{margin-bottom: 0;}
        .step_description{margin-bottom: 0;}
    }
    .flow_step_split{display: flex;gap:40px;
        .flow_step{width: calc((100% - 40px)/2);}
    }
}
@media screen and (max-width: 835px) {
    .department_selection_box{gap:18px;
        .department_box{width: calc((100% - 18px)/2);display: flex;align-items: center;justify-content: center;font-size: 17px;}
    }
    .flow_chart{
        .flow_step{padding: 18px 12px;
            .step_title{}
            .step_date{margin-bottom: 8px;}
            .step_description{text-align: left;}
        }
        .flow_step_split{gap:18px;
            .flow_step{width: calc((100% - 18px)/2);}
        }
    }
}


.sns_wrap{margin-bottom: 100px;
    .tit{text-align: center;font-weight: bold;margin-bottom: 20px;font-family: var(--f_en);font-size: clamp(20px,2vw,26px);line-height: 1.2em;}
    .sns{display: flex;justify-content: center;gap:30px;
        a{display: block;width: 40px;}
    }
}



.fix_bg {position: fixed; background: url(../images/bg.webp) no-repeat center; background-size: cover; width: 100%; height: 100%; top: 0; left: 0; opacity: 0.2;z-index: -1;}




/** contact *************************************************************/
#contactarea{margin-bottom: 120px; background-color: #fff; padding: 5vw 0;}
#contactarea .container{max-width: 800px;}
#contactarea form{ max-width: 1200px; width: 100%; margin: 0 auto; position: relative;}
#contactarea .f_contents{ display: table; width: 100%; margin-bottom: 30px;}
#contactarea .f_contents p{display: table-cell;width: 24%;font-size: 0.94em;line-height: 1.6em;text-align: left;vertical-align: middle;}
#contactarea .top.f_contents p{ vertical-align: top;}
#contactarea .f_contents p:nth-child(2){ display: table-cell; width: 76%;}
#contactarea .f_contents input,
#contactarea .f_contents textarea{ width: 100%; font-size: 16px; line-height: 1.5em; display: block; vertical-align: middle; padding: 12px 16px; background-color: rgba(255,255,255,0.8); border: 1px solid #bababa; color: #000;font-family:var(--fontd);}
#contactarea .f_contents textarea{height: 16vw; vertical-align: inherit;}
#contactarea .send{width: 100%;background: rgb(255 0 79);border: none;font-size: 24px;line-height: 1.5em;padding: 26px 0;cursor: pointer;transition: 0.3s;display: block;margin-left: auto;-webkit-appearance: none;color: #fff;letter-spacing: 0.1em;font-family:var(--fontd);}
#contactarea .send:hover{opacity: 0.8;}
#contactarea .f_contents input::placeholder{color: #ccc;font-size: 14px;}
#contactarea .f_contents .subtxt{ display: block;font-size: 12px; line-height: 1.5em;}

#contactarea .other_contact .f_contents p{ font-size: 20px;}

.wpcf7-radio{ display:flex; flex-wrap:wrap;}
.wpcf7-radio .wpcf7-list-item{ margin: 0; text-align: left; margin-right:2em;}
.wpcf7-radio .wpcf7-list-item label{ display:flex; align-items:center;}
.wpcf7-radio .wpcf7-list-item input{height: 20px;width: 20px !important;margin-right:0.5em;-webkit-appearance: auto;}
.wpcf7-radio .wpcf7-list-item .wpcf7-list-item-label{ }

span.wpcf7-not-valid-tip{font-size: 12px !important;line-height: 2em;font-weight: bold !important}
div.wpcf7-validation-errors, 
div.wpcf7-acceptance-missing{ border:none !important; color: #ff0000; background-color: #fff; font-size: 14px; font-weight: bold;}
div.wpcf7-mail-sent-ok{ border:none !important; color: #000; background-color: #fff; font-size: 14px; font-weight: bold;}
div.wpcf7-response-output{margin: 0 !important;width: 100%;margin-top: -2.6em !important;margin-left: auto !important;border: none !important;color: #dc3232;font-weight: bold;font-size: 0.9em;text-align: center;}

#contactarea .other_contact div.wpcf7-response-output{ margin: 0 !important; width: 76%; margin-top: inherit !important; margin-left: inherit !important; position: absolute; bottom: -7px; right: 0;}

.form_note{ margin-top: 4em;}

.entry_end{ background-color: var(--c_theme_color); color: #fff; text-align: center; padding: 5% 0;}

@media only screen and (max-width: 768px){
	#contactarea{}
	#contactarea .notice{ font-size: 12px; line-height: 1.5em; margin-bottom: 20px;}
	#contactarea .f_contents{ display: block; margin-bottom: 12px;}
	#contactarea .f_contents p{display: block;width: 100%;font-size: 1.1em;line-height: 1.5em;margin-bottom: 0;}
	#contactarea .f_contents p:nth-child(2){ display:block; width: 100%;}
	#contactarea .f_contents input,
	#contactarea .f_contents textarea{ display: block; padding: 6px;  }
	#contactarea .f_contents textarea{height: 50vw;}
	#contactarea .send{ width: 100%; font-size: 18px; padding: 12px 0; margin-left: 0;}
	#contactarea .other_contact .f_contents p{ font-size: 18px; margin-bottom: 4px;}

	.wpcf7-radio .wpcf7-list-item{ width:100%; margin-bottom:0.5em;}

	#contactarea .other_contact div.wpcf7-response-output,
	div.wpcf7-response-output{ width: 100%;}
}

.movie{}
.youtube {position:relative;width:100%;padding-top:56.25%;}
.youtube iframe {position:absolute;top:0;right:0;width:100% !important;height:100% !important;}



            /* Swiper Navigation Buttons Styling */
            .carousel-section {
                position: relative;
                padding: 0vw 0 7vw;
              }
              
              .mySwiper {
                position: relative;
                padding: 0 50px;
              }
              
              /* Next and Previous Button Styling */
              .swiper-button-next,
              .swiper-button-prev {
                width: 44px;
                height: 44px;
                color: var(--c_theme_color);
                border-radius: 50%;
                margin-top: -22px;
              }
              
              .swiper-button-next:after,
              .swiper-button-prev:after {
                font-size: 20px;
                font-weight: bold;
              }
              
              .swiper-button-next:hover,
              .swiper-button-prev:hover {
                background: rgba(255, 255, 255, 0.5);
              }
              
              .swiper-button-next {
                right: 0;
              }
              
              .swiper-button-prev {
                left: 0;
              }
              
              /* Pagination Styling */
              .swiper-pagination {
                position: relative;
                margin-top: 20px;
              }
              
              .swiper-pagination-bullet {
                width: 12px;
                height: 12px;
                background: #999;
                opacity: 0.5;
              }
              
              .swiper-pagination-bullet-active {
                opacity: 1;
                background: #000;
              }
              
              /* Responsive adjustments */
              @media (max-width: 768px) {
                .mySwiper {
                  padding: 0 5%;
                }
                
                .swiper-button-next,
                .swiper-button-prev {
                  width: 36px;
                  height: 36px;
                  margin-top: -18px;
                }
                
                .swiper-button-next:after,
                .swiper-button-prev:after {
                  font-size: 16px;
                }
              }