@charset "UTF-8";

/*--------------------------------------------------------------------
=== [レスポンシブ] ====================================
 -------------------------------------------------------------------*/


.pcHide {
display: none;
}

.spHide {
display: block;
}

@media (max-width: 1600px){
	
header {
	font-size: 18px;
	}
	
	header h1 {
    width: 250px;
}
	
.inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25vw;
}	
	
}

@media (max-width: 1400px){

header {
	font-size: 18px;
	}
	
header.changeHeader .gNav ul li {
    padding-left: 1.5vw;
}	
	
footer .ftrNav ul {
    font-size: 18px;
	}
	
}

@media (max-width: 1100px){
	body.onair section .vodList dd div a {
    width:19.6vw;
		font-size: 14px;
		padding: 2.5vw 0;
		}
	}


@media (max-width: 820px){
	
	
.pcHide {
display: block;
}

.spHide {
display: none;
}


header{
    padding: 25px 0;
    display: block;
	top: 0;
	left: 0;
	width: 100%;
} 
	
header .onairDate {
    font-size: 16px;
	text-align: center;
	}
	
header ,header.changeHeader{
    padding: 30px 0;
	}
    
header h1 ,header.changeHeader h1 {
    margin: 0 auto;
    width: 200px;
    }
	header h1 a ,header.changeHeader h1 a {
		display: flex;
	}

header nav ,header.changeHeader nav {
    visibility: hidden;
    opacity: 0;
    width: 100%;
  transition: 0.5s all;
    position: fixed;
     top: 0;
    height: 100vh;
    padding: 10vw;

    }
    
.open header nav {
   visibility: inherit;
    opacity: 1;
    z-index: 9999;
    background-color: #000;   
       }   
    

header .gNav ul,header.changeHeader .gNav ul {
    display: block;
    font-size:20px;
}

header .gNav ul li,header.changeHeader .gNav ul li {
    margin-left: 0;
    margin-bottom: 20px;
}
	

header.changeHeader .gNav li a:after {
	content: "";
	background-color: #fff;
	height: 1px;
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	padding-right: 10px;
	z-index: 9;
}

header.changeHeader .gNav li a:before{
	content: "";
	background-color: #fff;
	border: 1px solid #fff;
	height: 9px;
	width: 9px;
	border-radius: 10px;
	position: absolute;
	right: 0;
	bottom: -4px;
	z-index: 10;
	transition: 0.3s;
	}

header.changeHeader .gNav li:nth-child(odd) a:before{
	background-color: #000;
	}


header.changeHeader .gNav li:last-child a:before ,
header.changeHeader .gNav li:last-child a:after {
	content: none;
	transition: none;
	}


header.changeHeader .gNav li:last-child a:before {
	font-family: "Font Awesome 6 Brands";
	font-weight: 900;
	content: "\f099";
	background-color: transparent;
	border:none;
	color: #fff;
	position: unset;
	margin-right: 0.5vw;
}

header.changeHeader .gNav li:last-child a:before {
	transform: none;
	filter:none;
	}
header.changeHeader .gNav li:last-child{
	width: 12vw;
	line-height: 2.6vw;
	background-color: rgba(255,255,255,0.2);
	border-radius:2.6vw;
	display: flex;
	justify-content: center;
	padding-right: 0.5vw;

}

header.changeHeader .gNav li:last-child a{
		padding-left: 1.56vw;
	width: 100%;
    text-align: center;
	}
	
header.changeHeader .gNav li a {
	padding-right: 20px;
	}
header .gNav li:last-child,header.changeHeader .gNav li:last-child {
    width: inherit;
    line-height: inherit;
    background-color: inherit;
    border-radius:inherit;
    display: inherit;
    justify-content:inherit;
    padding-right: inherit;
}	
   
  .menu-btn {
    position: fixed;
   top:10px;
    right: 10px;
   width: 60px;
    height: 60px;
    text-align: center;
    cursor: pointer;
    z-index: 9999;
  }  
    
.menu-btn span:after {
    content: "";
    background-size: contain;
    background-image: url(../img/menu_open.png);
   width: 60px;
    height: 60px;
    display: inline-block;
 filter: drop-shadow(0px 0px 10px #01e2ff) ;    
  }
  .open .menu-btn span:after {
    content: "";
    background-size: contain;
    background-image: url(../img/menu_close.png);
   width: 60px;
    height: 60px;
    display: inline-block;
     filter: drop-shadow(0px 0px 10px #01e2ff) ;  
  }  
	
#mvArea .wrap {
		height: 105vw;	
}
 #mvArea .cut img, #mvArea .sudo img{
    height: auto;
    width: 90%;
}    
	
#mvArea .catch img {
    height: auto;
    width: 100%;
}    	
	
#mvArea .catch, #mvArea .sudo, #mvArea .cut {
    text-align: right;
	top: 80px;
	}
	
#newsArea {
    position: inherit;
	}
	
#newsArea .ttl {
    font-size: 24px;
    text-align: center;
    margin: 0;
    padding: 5px;
}
	
#newsArea ul li {
    padding: 10px 30px 10px 10px;
	font-size: 14px;
}	
#newsArea ul li a {
    display: block;
}
	
#newsArea ul li a::after {
    width: 8px;
    height: 12px;
    right: 10px;
}
#movieArea .secTtl {
    font-size: 40px;
	margin-bottom: 6.25vw;
	}
#movieArea .secTtl:after {
    width: 30px;
    bottom: 0px;
	}
#movieArea .youtube {
    width: 180px;
	}
#movieArea .youtube img {
    height: 115px;
	}
	
 #movieArea .slide-arrow {
  width: 36px;
}
#movieArea .prev-arrow {
  left: 18.2vw;
}
#movieArea .next-arrow {
  right: 18.2vw;
} 	
	
#movieArea .youtube a::before {
    width: 70px;
    height: 70px;
	}
	
#introArea .inner {
    display: block;
	}
	
#introArea .img {
    margin-left: 0;
	position: absolute;
	z-index: -1;
}	
	
#introArea .secTtl {
 font-size: 40px;
	margin-bottom: 6.25vw;
	text-align: center;
}
	
	
#introArea .secTtl:after {
    width: 30px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
	}
	
#introArea .right {
    font-size: 14px;
	    padding: 0 2vw;
	}
	
#introArea .right span {
    font-size: 16px;
}
	
	footer .ftrTop {
    display: block;
	padding: 20px;
	border-bottom: 1px solid #848589;	
	}
	
footer .sns {
    display: flex;
    align-items: center;
    margin-right: 0;
    width: 100%;
    text-align: center;
    justify-content: center;
}	
	
footer .ftrBnr {
    width: 150px;
    margin: 20px auto 0;
}	

#pageTop {
    width: 75px;
    bottom: 10px;
    right: 10px;
	}
	
	.ftrNav {
		display: none;
	}
	
footer .copy {
    font-size: 10px;
    padding-bottom: 20px;
}	
	
.inner {
    padding: 0 20px;
}	
	
.btmPage main {
    padding: 100px 0;
}
	
.btmPage main .secTtl{
 font-size: 40px;
	margin-bottom: 6.25vw;
	text-align: center;
}
	
.btmPage main .secTtl:after {
	width: 30px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
	}	
	
	
body.news .newsList li{
    padding: 10px 30px 10px 10px;
	font-size: 14px;
}	
body.news .newsList li a {
    display: block;
}
	
body.news .newsList li a::after {
    width: 8px;
    height: 12px;
    right: 10px;
}	
	
  
body.news #articleArea {
    margin: 0;
    padding: 6vw;
    border-radius: 20px;
}
    
body.news #articleArea .ttl {
    font-size: 16px;
    min-height: auto;
    display: block;
    padding:20px 25px 30px;
    position: relative;
    }
body.news #articleArea .ttl::before {
    width: 10px;
    min-height: 100%;
    top:0;
    }
    
body.news #articleArea .ttl .date {
    font-size: 10px;
    padding-left: 0;
    margin-left: 0;
    position: absolute;
    bottom: 10px;
    right: 0;
}

    
body.news #articleArea .ttl .date::before {
    content: none;
    }
    
body.news .contBlock {
    padding: 20px 0;
    font-size: 14px;
}    
    
body.news .contBlock h4 {
    font-size: 16px;
    margin-bottom: 20px;
    }
    
body.news .contBlock .imgLeft {
    display: block;
}   
body.news .contBlock .imgLeft figure {
    width: 80%;
    margin: 0 auto 20px auto;
} 
	

body.news .contBlock .imgList {
	display: block;
	}

body.news .contBlock .imgList li {
	width: 100%;
	margin-bottom: 20px;
	}	
	

body.news .contBlock table {
	margin: 30px 0;
}
body.news .contBlock table th {
	width: 100%;
	padding: 10px;
	display: block;
	text-align: center;
	background-color: #333;
}

body.news .contBlock table td {
	width: 100%;
	padding: 10px;
	display: block;
}	

.backBtn a ,.linkBtn a {
    font-size: 14px;
    width: 100%;
    line-height: 30px;
    border-radius: 15px;
}	
	
.backBtn, .linkBtn {
    text-align: center;
    margin-top: 30px;
}	
	

.btmPage section {
    border-radius: 20px;
	}

body.onair section {
    text-align: center;
    margin: 0;
    padding: 6vw;
    border-radius: 20px;
}
	
body.onair section h3 {
    font-size: 20px;
	}
	
	body.onair section .txt {
    font-size: 16px;
	}
	
body.onair section ul li .station {
    font-size: 12px;
	}
body.onair section ul li .date, body.onair section ul li .time {
    font-size: 12px;
	}
	
	body.onair section .note {
    font-size: 10px;
		margin-top: 40px;
}
	
body.onair section ul li {
    padding: 10px 0;
	}
body.onair section ul li span {
    font-size: 10px;
	margin-left: 0;
	}
	

body.onair section .vodList {
	margin-top: 20px;
}

body.onair section .vodList dt {
	font-size: 12px;
	padding: 10px;
	margin-bottom: 20px;
}
body.onair section .vodList dd {
	display: flex;
justify-content: space-around;
	flex-wrap: wrap;
}

body.onair section .vodList dd div {
	margin-right: 0;
	margin-bottom: clamp(6px,0.75vw, 12px);
	width: 49%;
}

body.onair section .vodList dd div:nth-of-type(4n) {
		margin-right:0;
}
body.onair section .vodList:nth-of-type(3) dd{
	justify-content:space-between;
}
body.onair section .vodList:nth-of-type(3)::after{
  content:"";
  display: block;
	width: 49%;
	}

body.onair section .vodList:nth-of-type(3)::before{
  content:"";
  display: block;
	width: 49%;
order: 0;}

body.onair section .vodList dd div a {
	width:100%;
	border: 1px solid #848589;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}
/*body.onair section .vodList dd div a {
    width:19.3vw;
		}	*/
	
.btmPage.character section {
     padding: 6vw;
}	
	
body.character .chara {
    width:200px;
    margin: 0 auto 20px;
}

body.character ul.charaList li {
    display: block!important;
	margin-bottom: 50px;
    }
    
body.character ul.charaList .prof .name {
    font-size: 30px;
    display: block;
    align-items: center;
    margin-bottom: 30px;
    text-align: center;
}   
    
body.character ul.charaList .prof .name span {
    font-size: 10px;
    margin-left: 0;
    display: block;
    margin-top: 10px;
}    
    
body.character ul.charaList .prof {
    max-width: 100%;
    padding: 40px 0;
    }
    
body.character ul.charaList .prof::before {
    width: 100%;
    }
body.character ul.charaList .prof::after {
    width: 100%;
    }    
    
body.character ul.charaList .prof .txt {
    font-size: 14px;
	padding-bottom: 20px;
    }  
	
body.gallery .galleryList li {
    width: 47%;
	}
body.gallery .kvList {
    justify-content: space-between;
    padding: 0;
}	
	
body.gallery .kvList li {
    width: 47%;
	}
	
body.staff section {
    padding: 6vw;
}	
	
	body.staff .scList ul li {
    margin-bottom: 30px;
	}
body.staff .scList h3 {
    font-size: 24px;
    margin-bottom: 30px;
}   
    
body.staff .scList .role {
    font-size: 10px;
}    
    
body.staff .scList h4 {
    font-size: 20px;
    }
    
body.staff .scList ul li span {
    font-size: 10px;
    line-height: 1.2;
    display: block;
    margin-top: 10px;
}
    
body.staff .scList .comeBtn a {
    font-size: 12px;
    width: 80%;
    }
    
body.staff .scList .comeBtn a::after {
    font-size: 25px;
        right: 15px;

}    
    
body.staff .modal-inner {
    width: 100%;
    padding: 15px;
    display: block;
    }

body.staff .modal-inner .img {
    margin: 0 auto;
}
    
body.staff .modal-inner .name {
    font-size: 20px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    margin-top: 20px;
}   
    
body.staff .modal-inner .name span {
    font-size: 14px;
    margin-left: 15px;
}
	
body.music section {
    padding:6vw;
}	
	
body.music h3 {
    font-size: 24px;
    margin-bottom: 30px;
	}
	
body.music .wrap {
    display: block;
}
	
body.music .wrap dt {
    max-width: 300px;
    margin-right: 0;
	margin: 0 auto 20px;
}	
	
body.music .wrap dd h4 {
    font-size: 30px;
	}
	
body.music .wrap:nth-of-type(2),body.music .wrap:nth-of-type(4) {
    padding: 20px;
	}
	
	body.music .wrap:nth-of-type(2) dd h4,body.music .wrap:nth-of-type(4) dd h4 {
	font-size: 26px;
	text-align: center;
}
	
		body.music .wrap:nth-of-type(2) dd .txt02,body.music .wrap:nth-of-type(4) dd .txt02 {
			text-align: center;
			}

	
body.music .wrap dd h5 {
    font-size: 16px;
	}
	
body.music .wrap dd .txt {
    font-size: 14px;
	}
	
body.music .wrap dd .txt02 {
    font-size: 16px;
	}
	

body.music .nowprinting {
	aspect-ratio: 1;
	width: 100%;
	height: inherit;
	}
	
body.books section .wrap {
    margin-bottom: 60px;
}	
body.books section .linkBtn {
    margin-top: 30px;
}	
	
body.books sections .wrap {
	margin-bottom: 60px;
}	
	
body.books section h3 {
    font-size: 25px;
	}
	
body.books section .txt {
    text-align: center;
    padding: 20px;
    font-size: 11px;
	}
	
body.books section .txt span {
    font-size: 16px;
	}
	
body.books section ul li {
	margin-top: 10px;
}	
    
body.books section .txt02 {
    font-size: 14px;
} 
	

/*----- STORY -----*/

body.story .slick-dots {
    bottom: -20px;
	}

body.story .epArea {
    margin-bottom: 40px;
}	
	
body.story .epArea .epTtl {
    font-size: 18px;
    margin: 10px 0 20px 0;
}
	
body.story .epArea .epTxt {
    font-size: 14px;
    padding: 15px 0;	

}
	
body.story .epArea .staff {
    font-size: 12px;
    line-height: 1.5;
    border-radius: 10px;
    text-align: left;
    padding: 10px;
    margin-top: 15px;
}
body.story .epList ul li {
    width: 47%;
	margin-bottom: clamp(20px, 2.08vw, 40px);
	}
	
body.story .slide-arrow {
    width: 32px;
	}
	
body.story .epList ul li:before {
    font-size: 14px;
	}

body.bluray section {
	padding:6vw;
}

body.bluray section h3 {
	font-size: 20px;
}
body.bluray .nowprinting {
    width: 70%;
    height: 300px;
    font-size: 20px;
	margin: 20px auto;
}	
	

body.bluray .date {
	font-size: 30px;
    margin-bottom: 20px;
	}


body.bluray .contBlock table {
	margin: 30px 0;
}
body.bluray .contBlock table th {
	width:100%;
	padding: 10px;
	display: block;
	background-color: #333;
}

body.bluray .contBlock table td {
	width: 100%;
	padding: 10px;
	display: block;
}
	
body.bluray .contBlock:nth-last-child(2) {
    margin-bottom: 40px;
}	

body.bluray .special {
	margin-top: 20px;
	display: block;
}
body.bluray .special li {
	width: 100%;
	margin-bottom: 20px;
	}
	

	
body.sp .galleryList li {
    width: 47%;
	}
body.sp .kvList {
    justify-content: space-between;
    padding: 0;
}	
	
body.sp .kvList li {
    width: 47%;
	}	
	
	
body.sp h3 {
    font-size: 24px;
    margin-bottom: 30px;
	}	
	
body.sp .interviewList {
	display: block;
	margin-bottom: 60px;
	}

body.sp .interviewList li {
	width: 100%;
	margin-bottom: 30px;
}
	


	
	}



@media (max-width: 390px){
	#mvArea .wrap {
    height: 107vw;
}
}