@media only screen and (min-device-width:320px) {
    html {
        font-size: 62.5%;
    }
}

@media only screen and (min-device-width:360px) {
    html {
        font-size: 70.3125%;
    }
}

@media only screen and (min-device-width:375px) {
    html {
        font-size: 73.2421%;
    }
}

@media only screen and (min-device-width:412px) {
    html {
        font-size: 80.4688%;
    }
}

@media only screen and (min-device-width:414px) {
    html {
        font-size: 80.8594%;
    }
}

@media only screen and (min-device-width:640px) {
    html {
        font-size: 125%;
    }
}

@media only screen and (min-device-width:768px) {
    html {
        font-size: 152%;
    }
}

@media only screen and (min-device-width:800px) {
    html {
        font-size: 155%;
    }
}

@media only screen and (min-device-width:960px) {
    html {
        font-size: 188%;
    }
}

@media only screen and (min-device-width:1024px) {
    html {
        font-size: 198%;
    }
}

@media only screen and (min-device-width:1199px) {
    html {
        font-size: 220%;
    }
}


html {
	font-size: 80%;
}


@media only screen and (max-width:1199px) {

	input{
		-webkit-appearance:none;
		-webkit-border-radius:0;
	}
	
	/* main style */
	header{
		height:auto;
	}		

	header .logo{
		margin:12px 20px;
		width:83px;
	}
	header .navi{
		margin:0;
	}

	header .navi ul{
		display: none;
	}

	header .navi ul.mobile-navi{
		display: block;
	}
	
	header .navi ul li {
		margin:0 8px;
		width:auto;
	}

	header .global{
		display: none;
	}
	

	.gnb-title{
		margin:8.4rem 2.4rem 3.6rem;
		font-size: 4.8rem;
		font-weight: 400;
		line-height: 5.6rem; /* 116.667% */
	}

	.contest-photo{
		margin-top:32px;
	}

	.contest-photo h1{
		font-size: 4rem;
		line-height: 5.6rem; /* 140% */		
		margin-bottom:40px;
	}

	.contest-photo .photo-list ul:first-child{
		height: 12rem;
		margin-bottom: 8px;		
	}

	.contest-photo .photo-list ul:nth-child(2){
	    height: 24rem;
	}

	.audition-menu{
	    min-height: 76.8rem;		
	}

	
	.audition-menu .audition-menu-list{
	    padding: 64px 24px;	
	}

	.audition-menu .audition-menu-list ul li{
	    padding: 32px 0;		
	    display: block;
	}

	.audition-menu .audition-menu-list ul li .menu-name dd:first-child{
		font-size: 3.2rem;
		line-height: 4rem; /* 125% */
	}

	.audition-menu .audition-menu-list ul li .menu-name dd:last-child{
		font-size: 2rem;		
	}

	.audition-menu .audition-menu-list ul li .menu-detail dd{
		margin-top: 24px;
		display: inline-block;
	    padding: 10px 32px;
	    font-size: 2rem;
	}

	.sitemap{
	    max-width: 100%;		
	}

	.sitemap h1{
	    margin: 80px 0 53px;		
		font-size: 4.0rem;
		line-height: 5.6rem; 
	}

	.sitemap .sitemap-list ul{
	    margin-bottom: 40px;
	}
	.sitemap .sitemap-list ul li:last-child{
	    padding: 16px 24px;
	    display: block;		
	}

	.sitemap .sitemap-list ul li .menu-name dd:first-child{
		font-size: 3.2rem;
		line-height: 4rem;
        margin-bottom: 6px;
	}

	.sitemap .sitemap-list ul li .menu-name dd:last-child{
		font-size: 2rem;		
	}

	.sitemap .sitemap-list ul li .menu-detail dd{
		margin-top:24px;
		padding: 10px 32px;
		font-size: 2rem;
	    display: inline-block;
	}

	footer{
	    padding: 40px 24px;		
	}

	footer .footer-info{
	    max-width: 100%;
	}

	.scroll-menu{
	    padding-bottom: 34rem;		
	}

	.content{
	    padding: 0 24px;		
	    margin: 0 auto 64px;
	}

	.visual{
        min-height: 160px;
        background: url(../images/visual_01.png) lightgray 50% / cover no-repeat;
	}

	.visual h1{
        font-size: 32px;
        width: 100%;
        bottom: 24px;
        left: 0;
        padding-left: 24px;
        transform: unset;
	}

	.content h1{
	    margin: 40px 0;
		font-size: 24px;		
	}

	.group-list ul{
	    flex-wrap: wrap;		
	}

	.group-list ul li{
	    flex-basis: 50%;		
		font-size: 18px;
	}

	.greeting-list .tab-menu ul li img{
	    width: 32px;		
	}

	.greeting-list .tab-menu ul li span{
		font-size: 18px;		
	}

	.info ul{
	    display: block;		
	}

	.greeting-list .tab-menu{
	    margin-bottom: 4.5rem;		
	}

	.info ul li:first-child{
        padding: 32px 0;
	    border-right:none;
		border-bottom:1px solid #eee;
	}

	.info ul li:first-child img{
		width:120px;
	}

	.info ul li .name{
		font-size: 20px;		
	}

	.info ul li .title{
		font-size: 18px;		
	}

	.info ul li:last-child{
		padding:0px;
	}

	.info ul li:last-child h3{
		font-size: 20px;
        text-align: left;
		margin-top:32px;
	}

	.info ul li:last-child h3 em{
	    font-size: 20px;		
	}

	.info .history{
		padding: 24px;
		margin-top: 40px;
	    display: block;		
	}
	.info .history .history-list{
		margin:0;
	}

	.info .history .history-list h3{
		font-size: 18px;
		text-align: left;
		margin:0;
	}

	.info .history .history-list p{
		font-size: 16px;		
	}


	.info .history .history-img img{
		width:100%;
        margin: 0 0 16px 0;
	}
	
	.info .history .history-img img:last-child{
	    margin: 0;
	}

	.vision-list .vision-info ul{
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	    padding: 0 32px;
	}

	.vision-list .vision-info ul li{
		width: 263px;
		height: 263px;		
	    border-radius: 50%;
        margin-bottom: 16px;
	}

	.vision-list .vision-info ul li span{
		font-size:20px;
	    margin-top: 83px;
	}

	.vision-list .vision-info ul li p{
		font-size:16px;
	    padding: 0;
		opacity: 0.6;	
	}
	.vision-list .vision-value{
	    margin-top: 40px;
	}
	.vision-list .vision-value h1{
	    font-size: 20px;		
	}

	.vision-list .vision-value ul{
	    flex-wrap: wrap;		
	}
    
	.vision-list .vision-value ul li{
		margin-bottom: 24px;
	}

	.vision-list .vision-value ul li span{
		font-size: 18px;		
	}
	
	.vision-list .vision-value ul li p{
		font-size: 16px;
	}
	
	.history-list h1{
		font-size:20px;
        margin: 18px 0;
	}

	.history-list ul li{
	    font-size: 16px;		
	    margin-bottom: 20px;
	}
	
	.organization-list ul{
	    align-items: center;		
	}

	.organization-list ul li{
	    font-size: 16px;	
	    padding: 16px 0 0;
	}

	.intro{
	    padding-bottom: 4rem;		
	}

	.intro.section-01 ul{
	    flex-wrap: wrap;	
	}

	.intro.section-01 ul li:first-child{
	    flex-basis: 100%;
		font-size: 20px;
		margin-bottom:20px;
	}

	.intro.section-01 ul li h1{
		font-size: 20px;		
	}

	.intro.section-01 ul li h1 em{
		font-size: 20px;		
	}

	.intro.section-01 ul li:last-child{
	    flex-basis: 100%;
		font-size: 16px;	
	}

	.content h1.sub-title{
		font-size: 20px;
		margin: 4rem 0 0 0;		
	}

	.content h1.sub-title em{
		font-size: 20px;
	}

	.intro.section-02{
	    margin-top: 32px;		
	}

	.intro.section-02 ul{
	    flex-wrap: wrap;		
	    margin-bottom: 0;
	}

	.intro.section-02 ul li{
	    flex-basis: 100%;	
        margin-bottom: 20px;		
	}
	
	.intro.section-02 ul li img{
		width:48px;
	}

	.intro.section-02 ul li span{
	    margin-left: 12px;
		font-size: 18px;			
	}
	
	.content h3{
	    margin-top: 8px;
		font-size:16px;
	    text-align: left;
	}
	
	.intro.section-03{
	    margin-top: 32px;		
	}

	.intro.section-03 ul{
	    flex-wrap: wrap;		
	}

	.intro.section-03 ul li{
		margin:0 0 8px 0;
	}

	.intro.section-04 ul{
	    flex-wrap: wrap;		
	}

	.intro.section-04 ul li{
	    flex-basis: 100%;
        margin-bottom: 24px;	
		border:none;
	}

	.intro.section-04 ul li .icon{
	    margin: 0 16px 0 0px;		
	}

	.intro.section-04 ul li dl{
		padding	:0;
	}

	.intro.section-04 ul li dl .title{
		font-size:20px;
	}

	.intro.section-04 ul li dl .detail{
		font-size:18px;
	}

	.culture ul{
	    flex-wrap: wrap;		
	}

	.culture ul li:first-child{
	    flex-basis: 100%;
		border-right:none;		
        border-bottom: 1px solid #eee;
        padding-bottom: 40px;
	}

	.culture ul li .col{
		font-size: 16px;
        margin-bottom: 8px;
	}

	.culture ul li .val{
		font-size: 18px;
	}

	.culture ul li dl{
	    margin-bottom: 20px;		
	}

	.culture ul li:last-child{
		padding-left:0;
		flex-basis: 100%;
        margin-top: 40px;
	}

	.culture ul li h3{
		font-size:20px;
	}

	.culture ul li h3 em{
		font-size:20px;
	}

	.culture ul li .speech{
		font-size: 16px;
	    margin-bottom: 32px;
	}

	.culture ul li dl.photo{
	    flex-wrap: wrap;	
	    margin-bottom: 32px;		
	}

	.culture ul li h5{
		font-size: 20px;		
	    margin-bottom: 20px;
	}

	.culture ul li h5 em{
		font-size: 20px;
	}

	.culture ul li dl.photo dd:first-child{
	    margin-right: 0;
	    margin-bottom: 32px;		
	}

	.apply-content{
        background: url(../images/mo-bg.png) lightgray 50% / cover no-repeat;
	    min-height: auto;
	}

	.apply-content .apply-info{
	    padding-top: 52rem;		
	}

	.apply-content .apply-info h1{
		font-size: 27px;
		line-height: normal;
	}

	.apply-content .apply-info h1 em{
		font-size: 27px;
        line-height: normal;
	}

	.apply-content .apply-info p, .apply-content .apply-info p a{
	    margin-top: 2.4rem;		
		font-size: 18px;
		line-height: normal;
		letter-spacing: 0.36px;
	}
	
	.button-group{
	    margin-top: 4.2rem;		
	}

	.button-group button{
	    padding: 10px 32px;
		font-size: 20px;
		line-height: normal;
		letter-spacing: 0.4px;
	}

	.button-group button a{
		padding:0;
		font-size: 20px;
		line-height: normal;
		letter-spacing: 0.4px;
	}

	.audition-list .filter .date{
	    font-size: 14px;
	}

	.audition-list .filter select{
	    font-size: 16px;
	}
	.audition-list .list ul{
	    flex-wrap: wrap;
	}
	.audition-list .list ul li{
	    flex-basis: 100%;		
		margin:6px 0;
        text-align: center;
	}

	.audition-list .list ul li img	{
		margin: 24px 0 16px;
		width: 160px;	
	}

	.audition-list .list ul li h1{
	    font-size: 17px;
	}

	.audition-list .list ul li h3{
	    font-size: 14px;
	    margin-bottom: 20px;
		text-align:center;
	}

	.audition-list .list ul li dl dd:first-child{
	    font-size: 16px;
	}


	.audition-list .list ul li dl dd:last-child{
	    font-size: 16px;		
	}

	.audition-list .list ul li .total{
		margin-top: 20px;
		padding-top: 30px;		
	}

	.audition-list .list ul li .total span:first-child{
	    font-size: 16px;
	}

	.audition-list .list ul li .total .total-score{
	    font-size: 18px;
	}
	
	.audition-list .list ul li button{
		margin: 20px 20px 24px;
		padding: 15px;		
		font-size: 16px;
	}
		
	.profile{
	    flex-wrap: wrap;
	}
	
	.profile .profile-img .img-detail{
	    width: 100%;
		height:auto;
		margin-right:0px;
	}
	
	.profile .profile-img .img-detail h1{
		top: 12px;
		left: 12px;		
		padding: 24px 21px;
		font-size: 20px;
	}

	.profile .profile-img .img-detail .total-class{
	    padding: 12px 20px;	
	    font-size: 17px;
	}

	.profile .profile-info{
	    margin-top: 40px;		
	}

	.profile .profile-info .profile-detail dl{
	    padding: 16px 0;		
	}

	.profile .profile-info .profile-detail dl dd{
        font-size: 18px !important;
	}

	.movie-list ul{
	    flex-wrap: wrap;
	}

	.movie-list ul li{
		margin:4px 0;
        flex-basis: 100%;
	}

	.movie-list ul li iframe{
        width: 100%;
        height: 22rem;
	}

	.evaluation{
	    flex-wrap: wrap;
	}

	.evaluation .profile-img{
	    width: 100%;		
		margin-right:0;
		display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-items: center;
	}

	.evaluation .profile-img img {
	    width: 64px;
	    height: 64px;
        margin: 0 12px 0 0;
	}
		
	.evaluation .profile-img h3{
		text-align: left;
		font-size: 24px;	
	}

	.evaluation .profile-img .total-class{
	    padding: 12px;
	    margin-top: 8px;
	    font-size: 16px;
	}

	.evaluation .profile-img .comment{
	    margin-top: 24px;		
		font-size: 14px;	
	}

	.evaluation .evaluation-list{
	    flex-wrap: wrap;		
	    margin-top: 32px;
	}

	.evaluation .evaluation-list ul{
	    width: 100%;		
		margin-right:0;
        margin-bottom: 20px;
	}

	.evaluation .evaluation-list .movie-area .movie-title{
		font-size: 18px;		
	    padding: 10px 12px;
	}

	.evaluation .evaluation-list .movie-area iframe{
		width:100%;
		height:22rem;
	}
	
	.evaluation .evaluation-list .score dl .point{
		font-size:20px;
	}

	.evaluation .evaluation-list .score dl button{
		font-size: 16px;		
	}

	.ranking .filter{
	    display: inline-block;		
	}

	.ranking .filter .date{
		font-size: 14px;
	}
	
	.ranking .filter select{
	    font-size: 16px;
	    float: right;		
	}

	.ranking .filter .search{
		margin-left:0px;
		margin-top:20px;
		width: 100%;
		clear: both;
		display: inline-block;
	}

	.ranking .filter .search input{
		width: 100%;		
	}

	.ranking .list{
		display:none;
	}

	.ranking .mo-list{
		display:block;
        margin-top: 16px;
	}

	.ranking .mo-list ul{
        display: flex;
        justify-content: space-between;
        align-items: center;
		padding:16px 0;
		border-bottom:1px solid  #eee;
	}

	.ranking .mo-list ul .info{
        display: flex;
        justify-content: flex-start;
        align-items: center;
	}

	.ranking .mo-list ul .info .rank{
		color: #fff;
		font-size: 14px;
		font-weight: 700;
		border-radius: 50px;
		background: #FC6251;
		padding: 4px 8px;		
	}

	.ranking .mo-list ul .info .name{
		color: #141414;
		font-size: 20px;
		font-weight: 500;
		margin: 0 8px;		
	}

	.ranking .mo-list ul .info .origin{
		color: #999;
		font-size: 16px;
		font-weight: 500;
	}

	.ranking .mo-list ul dl dd.score{
		color: #0646A5;
		font-size: 20px;
		font-weight: 700;
		margin-top:10px;
	}

	.ranking .mo-list ul li:last-child{
		padding:12px 16px;
		color: #141414;
		text-align: right;
		font-size: 16px;
		font-weight: 700;
		border-radius: 50px;
		border: 1px solid #eee;
	}

	.mo-tab{
		display:block;
		margin-bottom:36px;		
	}

	.mo-tab ul{
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;		
	}

	.mo-tab ul li{
        color: #666;
        font-size: 18px;
        font-weight: 500;
        border-bottom: 1px solid #eee;
        text-align: center;
        flex-basis: 50%;
        padding: 14px 0;
	}

	.mo-tab ul li.active{
		color: #141414;	
		font-weight: 700;		
		border-bottom:1px solid #141414;
	}

	.mo-view-02{
		display:none;
	}

	.mo-view-02 h1{
		display:none;
	}

	.ranking .chart-tab ul li{
		font-size: 16px;
		padding:12px 16px;
	}
	
	.ranking .chart-info{
		height:auto;
	}
}