@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');

/*======================
base
=======================*/
html{
height: 100%;
font-size: 62.5%; /*-- ベースのフォントサイズを10pxに指定 各要素のフォントサイズ指定はremで --*/
}

body{
font-family:'Noto Sans JP', sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
font-size: 1.4em; /*-- bodyのフォントサイズを14pxに指定 --*/
display: flex;
flex-direction: column;
height: 100%;
-webkit-text-size-adjust: 100%;
}

header, footer {
flex: 0 0 auto;
}

.contents {
flex: 1 0 auto;
}

/*======================
common
=======================*/
body {
font-size: 1.2rem;
}

/*--
 clearfix
--*/
.clearfix:after {
content: "";
display: block;
clear: both;
}

/*--
 背景固定
--*/
body.is-fixed  {
overflow: hidden; /*-- ナビゲーションが開いている時に背景を固定 --*/
}

/*--
 ページトップへ戻る
--*/
.gotop {
position: fixed;
bottom: 4%; right: 2%;
z-index: 3;
}

.gotop a {
font-size: 2.4rem;
font-size: 24px;
text-decoration: none;
color: #FFF;
text-align: center;
line-height: 60px;
background: rgba( 0, 0, 0, .3);
border: solid 1px #FFF;
width: 60px;
height: 60px;
display: block;
}

.gotop a:link,
.gotop a:visited,
.gotop a:hover,
.gotop a:active  {
background: rgba( 0, 0, 0, .3);
}

.gotop a span::before {
content: "";
display: block;
background: #FFF;
width: 24px;
height: 1px;
transform: rotate(45deg);
position: absolute;
top: 28px; right: 10px;
}

.gotop a span::after {
content: "";
display: block;
background: #FFF;
width: 24px;
height: 1px;
transform: rotate(-45deg);
position: absolute;
top: 28px; left: 10px;
}

/*--
 テキストリンク
--*/
a {
text-decoration: none;
color: #004884;
}

a:link,
a:visited {
text-decoration: none;
color: #004884;
}

a:hover,
a:active {
text-decoration: underline;
color: #004884;
}

/*======================
 @keyframes
=======================*/
@keyframes slideInL {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes expansion01 {
  0%{
    width:5px;
    background: #000;
  }
  100%{
    width:40px;
    background: #000;
  }
}

@keyframes expansion02 {
  0%{
    width:5px;
    background: #000;
  }
  100%{
    width:30px;
    background: #000;
  }
}

@keyframes expansion03 {
  0%{
    width:0px;
    background: #000;
  }
  100%{
    width:20px;
    background: #000;
  }
}

@keyframes expansion01b {
  0%{
    width:5px;
    background: #FFF;
  }
  100%{
    width:40px;
    background: #FFF;
  }
}

@keyframes expansion02b {
  0%{
    width:5px;
    background: #FFF;
  }
  100%{
    width:30px;
    background: #FFF;
  }
}

@keyframes expansion03b {
  0%{
    width:0px;
    background: #FFF;
  }
  100%{
    width:20px;
    background: #FFF;
  }
}

@keyframes gradation {
  0%{
    height: 100;
    background: #F2F2F2;
  }
  50%{
    height: 0;
    background: #F2F2F2;
  }
  100%{
    height: 0;
    background: #F2F2F2;
  }
}

@keyframes flash {
  0%,100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/*======================
 footer
=======================*/
footer {
width: 100%;
background: #000;
color: #FFF;
text-align: center;
padding: 40px 0 20px;
z-index: 2;
}

.ft_nav {
font-size: 0;
line-height: 0;
}

.ft_nav .item {
font-size: 1.2rem;
display: inline;
}

.ft_nav .item::before {
content: "｜";
}

.ft_nav .item:first-child::before {
content: none;
}

.ft_nav .item a:link,
.ft_nav .item a:visited {
color: #FFF;
text-decoration: none;
}

.ft_nav .item a:hover,
.ft_nav .item a:active {
text-decoration: underline;
}

.contact {
color: #FFF;
font-size: 1.2rem;
margin-top: 10px;
}

.contact a,
.contact a:link,
.contact a:visited {
color: #FFF;
text-decoration: none;
}

.contact a:hover,
.contact a:active {
color: #FFF;
text-decoration: underline;
}

.copy {
font-size: 1.1rem;
margin-top: 40px;
font-weight: 700;
}


/*======================
 HEADER
=======================*/
header {
width: 100%;
height: 80px;
text-align: center;
z-index: 6666;
transition: .2s ease;
background: -moz-linear-gradient(top, rgba(0,0,0,.8), rgba(0,0,0,0));
background: -webkit-linear-gradient(top, rgba(0,0,0,.8), rgba(0,0,0,0));
background: linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,0));
}

header > .inner {
padding: 10px 0;
transition: all .8s;
}

header.fixed > .inner {
padding: 5px 0;
width: 100%;
transition: all .8s;
}

.hd_logo {
width: 100px;
margin: 5px auto 0;
transition: all .5s;
}

.hd_logo img {
width: 100%;
height: auto;
}

header.fixed .hd_logo {
width: 80px;
margin: 0 auto 0;
transition: all .5s;
}

/*-----------------
 navigation
-----------------*/
#navArea nav {
display: block;
position: fixed;
top: 0; left: -300px; bottom: 0;
width: 300px;
height: 100%;
background: #FFF;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transition: all .5s ease;
z-index: 8888;
}

#navArea.open nav {
left: 0;
}

#navArea nav .menu {
text-align: left;
margin-top: 60px;
font-size: 0;
line-height: 0;
z-index: 7777;
}

#navArea nav .menu a {
width: 100%;
height: 100%;
display: block;
text-decoration: none;
color: #000;
}

#navArea nav .menu > li {
padding: 0px 20px;
font-size: 1.2rem;
line-height: 1;
}

#navArea nav .menu > li > a {
padding: 2em 0;
border-top: 1px solid #CCC;
}

#navArea nav .menu > li:last-child > a {
border-bottom: 1px solid #CCC;
}

#navArea nav .menu > li.disable > a {
pointer-events: none;
color: #DDD;
}

/* ドロップダウンメニューのスタイル */
#navArea nav .sub-menu {
background: rgba(255,255,255,.8);
}

#navArea nav .sub-menu li {
line-height: 1;
}

#navArea nav .sub-menu > li > a {
padding: 1em 0 1em 1em;
}

#navArea nav .sub-menu > li:last-child > a {
padding: 1em 0 2em 1em;
}

#navArea nav .sub-menu > li  {
position: relative;
}

#navArea nav .sub-menu > li::before {
content: "";
display: block;
background: #E71F19;
width: 4px;
height: 1px;
position: absolute;
top: 1.5em; left: 0;
}

#navArea nav .sub-menu > li > a:link,
#navArea nav .sub-menu > li > a:visited {
color: #000;
}

#navArea nav .sub-menu > li > a:hover,
#navArea nav .sub-menu > li > a:active {
color: #E71F19
}


/* ドロップダウンメニューの+,-アイコン（PCのみ） */
#navArea nav .dropdown {
position: relative;
}

#navArea nav .dropdown.pc::after,
#navArea nav .dropdown.pc::before {
content: "";
display: block;
width: 10px;
height: 1px;
background: #E71F19;
position: absolute;
right: 20px; top: 30px;
}

#navArea nav .dropdown.pc::after {
transform: translateY(-50%);
}

#navArea nav .dropdown.pc::before {
transform: translateY(-50%) rotate(-270deg);
transition: transform .5s;
}

#navArea nav .dropdown.pc.active::before {
transform: translateY(-50%) rotate(0);
transition: transform .5s;
}

/*--
 toggle_btn 
--*/
.toggle_btn {
display: block;
position: absolute;
top: 16px; left: 16px;
width: 30px;
height: 30px;
text-indent: -9999px;
cursor: pointer;
transition: all .5s;
z-index: 9999;
}

.toggle_btn span {
display: block;
position: absolute;
background: #FFF;
left: 4px;
width: 22px;
height: 2px;
transition: all .5s;
}

.toggle_btn span:nth-child(1) {
top: 6px;
animation:.8s ease-in 1s infinite alternate forwards running expansion01b;
}

.toggle_btn span:nth-child(2) {
top: 14px;
animation:1s ease-in 1s infinite alternate forwards running expansion02b;
animation-delay: 0.33s;
}

.toggle_btn span:nth-child(3) {
top: 22px;
animation:1.1s ease-in 1s infinite alternate forwards running expansion03b;
animation-delay: 0.33s;
}

.open .toggle_btn {
}

.open .toggle_btn span {
background: #000;
}

.open .toggle_btn span:nth-child(1) {
animation: none;
transform: translate(0, 8px) rotate(-45deg);
}

.open .toggle_btn span:nth-child(2) {
opacity: 0;
animation: none;
transform: translate(30px, 0);
transition: all .5s ease-out;
}

.open .toggle_btn span:nth-child(3) {
animation: none;
transform: translate(0, -8px) rotate(45deg);
}

/*--
 SNS share_btn
--*/
.btn_share {
color: #FFF;
position: absolute;
top: 16px; right: 16px;
}

.btn_share li {
font-size: 2.4rem;
display: inline-block;
margin-left: 8px;
}

.btn_share li a,
.btn_share li a:link,
.btn_share li a:visited,
.btn_share li a:hover,
.btn_share li a:active {
color: #FFF;
}

.btn_share li a:hover,
.btn_share li a:active {
opacity: .6;
}

/*--
 fixed
--*/
header.fixed {
position: fixed;
height: 46px;
background: rgba( 0, 0, 0, .6);
}

header.fixed #navArea nav .menu {
margin-top: 40px;
}

.fixed .toggle_btn {
top: 5px;
width: 28px;
height: 22px;
}

.fixed .toggle_btn span {
left: 3px;
width: 22px;
height: 2px;
}

.fixed .btn_share {
top: 8px;
}

/*--
 mask
--*/
#mask {
background: rgba( 0, 0, 0, 0);
}

.open #mask {
position: fixed;
top: 0; left: 0;
width: 100%;
height: 100%;
background: rgba( 0, 0, 0, .8);
cursor: pointer;
transition: all .5s;
}


/*======================
 contents
=======================*/
/*--
 background
--*/
.contents {
width: 100%
z-index: -1;
}

.contents::before {
content: "";
display: block;
position: fixed;
top: 0; left: 0;
z-index: -2;
width: 100%;
height: 100vh;
background: url(../img/img_bg_2025.jpg) no-repeat;
background-size: cover;
background-position-x: center;
background-position-y: center;
}

.contents::after {
content: "";
display: block;
position: fixed;
top: 0; left: 0;
z-index: -1;
width: 100%;
height: 100vh;
background: rgba(0,0,0,.4);
}

.contents.pre::before {
background: #000;
}

.contents.pre::after {
background: #000;
}

.low_contents::before {
content: "";
display: block;
position: fixed;
top: 0; left: 0;
z-index: -1;
width: 100%;
height: 100vh;
background: url(../img/img_bg02.jpg) no-repeat center;
background-size: cover;
}


/*--
 hero_box
--*/
.hero_box {
width: 100%;
height: 100vh;
color: #FFF;
}

.hero_box .inner {
width: 90%;
height: calc(100vh - 0px);
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
text-align: center;
margin-left: auto;
margin-right: auto;
}

.top_catch {
line-height: 1.4em;
font-size: 1.2rem;
text-shadow: 0 0 1em rgba(0,0,0,.8); 
}

.main_logo img {
width: 100%;
margin-top: 1em;
filter: drop-shadow(0 0 .5em rgba(0, 0, 0, .4));
}

.main_lead {
font-size: 2.0rem;
line-height: 1.4em;
margin-top: 40px;
text-shadow: 0 0 1em rgba(0,0,0,.8); 
}

.main_txt {
font-size: 1.8rem;
line-height: 1.4em;
text-shadow: 0 0 1em rgba(0,0,0,.8); 
}

.main_lead + .main_txt {
margin: 1em 0 0;
}

.main_lead span,
.main_txt span {
display: inline-block;
}

.main_txt br {
display: block;
}

.sub_txt {
font-size: 1.4rem;
line-height: 1.4em;
text-shadow: 0 0 1em rgba(0,0,0,.8); 
}

.sub_txt br {
display: block;
}

.main_lead + .sub_txt {
margin: 1em 0 0;
}

.announcement {
font-size: 1.8rem;
line-height: 1.4em;
margin: 2em 0 0;
}

.announcement_vote {
font-size: 2.0rem;
line-height: 1.4em;
margin: 1em 0 0;
}

.btn_box {
font-size: 2.4rem;
display: inline-block;
border: solid 1px #FFF;
margin-top: 30px;
padding: 14px 20px 20px 20px;
}

.btn_box.entry {
font-size: 2.0rem;
padding: 0;
}

.btn_box.entry a {
display: block;
width: 100%;
height: 100%;
color: #FFF;
padding: 14px 20px 20px 20px;
text-decoration: none;
}

.btn_box.vote {
font-size: 2.0rem;
padding: 0;
background: #FFF;
}

.btn_box.vote a {
display: block;
width: 100%;
height: 100%;
color: #000;
padding: 14px 20px 20px 20px;
text-decoration: none;
}


/*--
 content_box
--*/
.content_box {
width: 100%;
}

.content_box .inner,
.low_content_box .inner {
width: 94%;
margin-left: auto;
margin-right: auto;
}

.content_box.bg_tp,
.content_box.bg_wh,
.content_box.bg_gry {
padding: 80px 0;
position: relative;
overflow: hidden;
}

.content_box.bg_tp {
color: #FFF;
background: rgba( 0, 0, 0, .5);
}

.content_box.bg_wh,
.low_content_box.bg_wh {
background: #FFF;
}

.content_box.bg_gry {
background: #F2F2F2;
}


/*--
 content_ttl
--*/
.ttl_box {
text-align: center;
position: relative;
}

.content_ttl::before {
content: "";
display: block;
width: 80%;
height: 1px;
position: absolute;
bottom: -10px; left: -10%;
}

.content_box.bg_wh .content_ttl::before,
.content_box.bg_gry .content_ttl::before {
background: #000;
}

.content_box.bg_tp .content_ttl::before {
background: #FFF;
}

.content_ttl {
font-size: 1.8rem;
line-height: 1.6em;
}

.content_ttl span {
font-weight: 300;
}


/*--
 content_lead
--*/
.content_lead {
margin: 60px auto 0;
width: 100%;
font-weight: 300;
line-height: 2.0em;
}


/*--
 content_txt
--*/
.content_txt {
margin-top: 60px;
width: 90%;
margin-left: auto;
margin-right: auto;
font-weight: 300;
line-height: 2.0em;
}

.content_txt p.sign {
text-align: right;
margin-top: 40px;
}

/*--
 radio_prgrm
--*/
.radio_prgrm {
text-align: center;
margin-top: 60px;
width: 90%;
margin-left: auto;
margin-right: auto;
}

.radio_prgrm p {
font-size: 2.0rem;
font-weight: 300;
line-height: 2.0em;
}

.radio_prgrm p span {
font-size: 1.6rem;
}

.radio_prgrm a,
.radio_prgrm a:link,
.radio_prgrm a:visited {
color: #FFF;
text-decoration: underline;
}

.radio_prgrm a:hover,
.radio_prgrm a:active {
color: #FFF;
text-decoration: none;
}


/*--
 FinalStream概要
--*/
.judge_ttl {
text-align: center;
margin-top: 60px;
font-size: 2.0rem;
}

.judge_ttl span {
display: block;
font-weight: normal;
font-size: 1.2rem;
margin-top: 8px;
}

.judge_list {
text-align: center;
}

.judge_list dt {
margin-top: 40px;
}

.judge_list dd {
font-size: 2.4rem;
margin-top: 10px;
}

.judge_list dd.judge_prof {
max-width: 480px;
width: 80%;
margin: 16px auto 0;
text-align: left;
font-size: 1.2rem;
line-height: 1.6em;
}

.guest_act_ttl {
text-align: center;
margin-top: 60px;
font-size: 2.6rem;
}

.guest_act_info {
width: 90%;
max-width: 640px;
margin: 40px auto 0;
text-align: center;
}

.guest_act_info_item {
margin: 4em 0 0;
text-align: center;
}


.guest_act_info_item dt {
width: 80%;
max-width: 320px;
margin: 0 auto 0;
}

.guest_act_info_item img {
width: 100%;
}

.guest_act_info_item dd {
font-size: 2.0rem;
margin-top: 16px;
}

.guest_act_info_item dd a {
color: #FFF;
}

.guest_act_info_item dd a:link,
.guest_act_info_item dd a:visited {
color: #FFF;
}

.guest_act_info_item dd a:hover,
.guest_act_info_item dd a:active {
color: #FFF;
opacity: .8;
text-decoration: none;
}

.guest_act_info_item dd.prof {
max-width: 480px;
width: 80%;
margin: 10px auto 0;
font-size: 1.2rem;
line-height: 1.6em;
}


.about_finalstream {
text-align: center;
width: 100%;
max-width: 600px;
font-size: 1.6rem;
line-height: 1.8em;
border: solid 1px #FFF;
padding: 40px;
margin-top: 60px;
margin-left: auto;
margin-right: auto;
}

.about_finalstream .date {
font-size: 2.2rem;
margin-bottom: 10px;
}

.finalstream_attention {
max-width: 600px;
width: 100%;
margin: 20px auto 0;

}

.finalstream_attention h5 {
font-weight: normal;
}

.finalstream_attention ul {
margin-top: 20px;
line-height: 1.6em;
}

.finalstream_attention ul > li {
text-indent: -1em;
padding-left: 1em;
margin-top: 10px;
}

.finalstream_attention ul > li:before{
content: "・";
}

.finalstream_attention ul > li > ul > li:before{
content: "◇ ";
}

.finalstream_attention ul > li > ul {
margin-top: 0;
}

.finalstream_attention ul > li > ul > li {
text-indent: -1.2em;
padding-left: 1.5em;
margin-top: 8px;
}

.finalstream_attention ul li img {
display: block;
width: 100px;
margin: 20px auto;
}

.finalstream_attention ul li a {
color: #FFF;
text-decoration: underline;
}

.finalstream_attention ul li a:link,
.finalstream_attention ul li a:visited {
color: #FFF;
text-decoration: underline;
}

.finalstream_attention ul li a:hover,
.finalstream_attention ul li a:active {
color: #FFF;
opacity: .8;
text-decoration: none;
}

/*--
 募集要項
--*/
.req_list {
width: 90%;
margin-left: auto;
margin-right: auto;
font-weight: 300;
line-height: 1.6em;
}

.req_list .item {
margin-top: 14px;
position: relative;
padding-left: 30px;
}

.req_list .item::before {
content: "";
display: block;
width: 10px;
height: 1px;
background: #FFF;
position: absolute;
top: 12px; left: 0;
}

/*--
 スケジュール
--*/
.schedule_list {
margin-top: 60px;
width: 90%;
font-weight: 300;
margin-left: auto;
margin-right: auto;
font-weight: 300;
position: relative;
z-index: 1;
}

.schedule_list::before {
content: "";
display: block;
height: calc( 100% + 130px );
width: 1px;
background: #DDD;
position: absolute;
bottom: -80px; left: 120px;
}

.schedule_list .item {
margin-top: 20px;
z-index: 2;
}

.schedule_list .item .term {
float: left;
width: 120px;
position: relative;
}

.schedule_list .item .term::before {
content: "";
display: block;
height: 1px;
width: 120px;
background: #DDD;
position: absolute;
bottom: -8px; left: 0;
}

.schedule_list .item .term::after {
content: "";
display: block;
height: 1px;
width: 21px;
background: #DDD;
position: absolute;
bottom: 2px; right: -18px;
transform: rotate(-30deg);
transform-origin:right bottom;
}

.schedule_list .item .matter {
float: left;
margin-left: 40px;
width: calc( 100% - 160px );
position: relative;
z-index: 3;
}

.schedule_list .item .matter::before {
content: "";
display: block;
height: 4px;
width: 4px;
border-radius: 50%;
background: #000;
position: absolute;
top: 7px; left: -23px;
}

.schedule_list .dline .term {
font-weight: bold;
}

.schedule_list .dline .matter .ttl {
font-weight: bold;
}

.schedule_list .feat .matter .ttl {
font-weight: bold;
}

.schedule_list .feat.blu .matter .ttl {
color: #3c4cc7;
}

.schedule_list .feat.yrrw .matter .ttl {
color: #e2a500;
}

.schedule_list .feat.pnk .matter .ttl {
color: #E23030;
}

.schedule_list .feat .matter::before {
height: 6px;
width: 6px;
top: 5px; left: -24px;
}

.schedule_list .feat.blu .matter::before {
background: #3c4cc7;
}

.schedule_list .feat.yrrw .matter::before {
background: #e2a500;
}

.schedule_list .feat.pnk .matter::before {
background: #E23030;
}

.schedule_list .item .matter li {
margin-top: 5px;
line-height: 1.8em;
}

.schedule_list .item .matter li:first-child {
margin-top: 0;
line-height: 1.2em;
}

.schedule_list .crrnt .matter::before {
animation: flash 2s linear infinite;
}

.schedule_list .item .matter li br {
display: none;
}


/*--
 top_artist
--*/
.top_artist {
margin: 0 auto 0;
width: 100%;
}

.top_artist_box {
float: left;
width: 48%;
text-align: center;
margin-top: 40px;
margin-left: 4%;
}

.top_artist_box:nth-child( 2n + 1 ) {
margin-left: 0;
}

.top_artist_box a {
color: #000;
text-decoration: none;
}

.top_artist_box a:hover .top_artist_photo {
opacity: .6;
transition: all 0.3s;
}

.top_artist_photo {
overflow: hidden;
position: relative;
padding-top: 65%;
background: #000;
}

.top_artist_photo img {
height: 105%;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}

.top_artist_name {
font-size: 1.1rem;
font-weight: bold;
margin-top: 6px;
}

/*--
 受賞アーティスト
--*/
.winner_box {
max-width: 960px;
width: 100%;
margin: 0 auto 0 auto;
text-align: center;
}

.winner_ttl {
margin-top: 60px;
font-size: 2.6rem;
}

.winner_ttl span {
font-size: 2.0rem;
}

.winner_ttl_02 {
margin-top: 60px;
font-size: 2.0rem;
}

.winner_name {
margin-top: 40px;
font-size: 1.8rem;
font-weight: bold;
}

.winner_name_02 {
margin-top: 26px;
font-size: 1.6rem;
font-weight: bold;
}

.winner_photo {
margin-top: 20px;
}

.winner_photo .item {
width: 32%;
float: left;
margin-left: 2%;
overflow: hidden;
position: relative;
padding-top: 25%;
background: #000;
}

.winner_photo .item:first-child {
margin-left: 0;
}

.winner_photo .item img {
height: 105%;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}


/*--
 プレイリスト
--*/
.ply_list {
width: 80%;
display: flex;
flex-direction: column;
gap: 2em;
margin: 3em auto 0;
}

.ply_list li {
width: 100%;
}

.ply_list iframe {
width: 100%;
}

/*--
 フォトギャラリー
--*/
.photo_gallery_box {
margin-top: 120px;
}

.photo_gallery {
max-width: 960px;
width: 100%;
margin: 0 auto;
}

.photo_gallery .item {
width: 23.4%;
float: left;
margin-left: 2%;
margin-top: 2%;
overflow: hidden;
position: relative;
padding-top: 18%;
background: #000;
}

.photo_gallery .item:nth-child( 4n + 1 ) {
margin-left: 0;
}

.photo_gallery .item img {
height: 105%;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}

/*--
 low_content
--*/
.low_hero_box {
padding: 30px 0;
color: #FFF;
text-align: center;
}

.low_hero_box .inner {
width: 94%;
margin-left: auto;
margin-right: auto;
}

.low_hero_box.pnk {
background: rgba( 175, 52, 107, .5);
}

.low_hero_box .top_catch {
font-size: 1.2rem;
line-height: 1.6em;
}

.main_ttl {
font-size: 2.4rem;
margin-top: 20px;
}

.low_content_ttl {
text-align: left;
font-size: 1.8rem;
}

.low_content_box.bg_wh {
padding: 80px 0 100px 0;
}

.low_content_box .lead_txt {
margin-top: 40px;
line-height: 1.6em;
font-size: 1.6rem;
}

/*--
 low_artist
--*/
.tab_wrap {
display: flex;
flex-wrap: wrap;
}

.txt_box {
text-align: left;
padding: 2em 0 0;
}

.txt_box p {
font-size: 1.6rem;
line-height: 1.4em;
}

.tba_txt {
text-align: center;
height: 100vh;
padding: 2em 0 0;
}

.tba_txt p {
font-size: 1.6rem;
line-height: 1.4em;
}

.tab_label {
font-size: 1.2rem;
width: 32%;
height: 60px;
background-color: #FFF;
border: solid 1px #DDD;
color: #DDD;
line-height: 60px;
text-align: center;
margin-left: 1%;
transition: all 0.2s ease;
order: -1;
}


.tab_content {
width: 100%;
display: none;
padding-top: 60px;
}

.tab_wrap.final .tab_label {
}

/* アクティブなタブ */
.tab_switch:checked+.tab_label {
color: #000;
border: solid 1px #000;
}

.tab_switch:checked+.tab_label+.tab_content {
display: block;
}

/* ラジオボタン非表示 */
.tab_switch {
display: none;
}


/*--
 low_artist
--*/
.low_artist {
min-height: 120px;
}

.low_artist_box {
float: left;
width: 48%;
text-align: center;
margin-top: 60px;
margin-left: 4%;
position: relative;
}

.low_artist_box:nth-child( 2n + 1 ) {
margin-left: 0;
}

.low_artist_box a {
color: #000;
text-decoration: none;
}

.low_artist_box a:hover {
opacity: .6;
transition: all 0.3s;
}

.low_artist_photo {
position: relative;
padding-top: 65%;
background: #000;
}

.photo_img {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0; left: 0;
}

.photo_img img {
height: 105%;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}

.low_artist_name {
font-size: 1.2rem;
font-weight: bold;
line-height: 1.6em;
margin-top: 6px;
}

.low_artist_catch{
font-size: 1.1rem;
font-weight: bold;
color: #A51B37;
margin-top: 8px;
line-height: 1.6em;
text-align: left;
}

.low_artist_prof {
font-size: 1.1rem;
margin-top: 4px;
line-height: 1.6em;
text-align: left;
}

.low_artist_sns {
margin-top: 6px;
}

.low_artist_twttr {
font-size: 1.1rem;
line-height: 1.6em;
text-align: left;
padding-left: 1.2em;
text-indent: -1em;
overflow-wrap: break-word;
}

.low_artist_twttr a:before {
font-family: "Font Awesome 6 Brands";
content: '\e61b';
font-weight: 900;
font-size: 1.2rem;
padding-right: 2px;
}

.low_artist_web {
font-size: 1.1rem;
line-height: 1.6em;
text-align: left;
padding-left: 1.2em;
text-indent: -1em;
overflow-wrap: break-word;
}

.low_artist_web a:before {
font-family: "Font Awesome 6 Free";
content: '\f0ac' ;
font-weight: 900;
font-size: 1.2rem;
padding-right: 2px;
}

.low_artist_insta {
font-size: 1.1rem;
line-height: 1.6em;
text-align: left;
padding-left: 1.2em;
text-indent: -1em;
overflow-wrap: break-word;
}

.low_artist_insta a:before {
font: var(--fa-font-brands);
content: '\f16d' ;
font-weight: 400;
font-size: 1.2rem;
padding-right: 2px;
}

.low_artist_tiktok {
font-size: 1.1rem;
line-height: 1.6em;
text-align: left;
padding-left: 1.2em;
text-indent: -1em;
overflow-wrap: break-word;
}

.low_artist_youtube a:before {
font: var(--fa-font-brands);
content: '\f167' ;
font-weight: 400;
font-size: 1.2rem;
padding-right: 2px;
}

.low_artist_youtube {
font-size: 1.1rem;
line-height: 1.6em;
text-align: left;
padding-left: 1.2em;
text-indent: -1em;
overflow-wrap: break-word;
}

.low_artist_tiktok a:before {
font: var(--fa-font-brands);
content: '\e07b' ;
font-weight: 900;
font-size: 1.2rem;
padding-right: 2px;
}

.low_artist_sns  a,
.low_artist_sns  a:link
.low_artist_sns a:visited {
}

.low_artist_sns a:hover,
.low_artist_sns a:active {
opacity: .6;
}

.demo_list {
padding: 10px;
border: solid 1px #F2F2F2;
margin-top: 10px;
text-align: left;
font-size: 1.1rem;
}

.demo_ttl {
margin-top: 12px;
padding-left: 1em;
text-indent: -1em;
}

.demo_ttl:before {
font-family: "Font Awesome 6 Free";
content: '\f58f';
font-weight: 900;
font-size: 1.2rem;
padding-right: 4px;
}

.demo_ttl:first-child {
margin-top: 0;
}

audio {
display: none;
}

.audio_player {
position: relative;
margin-top: 8px;
width: 100%;
}

.play {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
background: #F2F2F2;
text-align: center;
border-radius: 50%;
cursor: pointer;
}

.stop {
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
background: #F2F2F2;
text-align: center;
border-radius: 50%;
cursor: pointer;
margin-left: 4px;
}

.time {
position: absolute;
top: 0; right: 0;
}

.current:after {
content: " / ";
}

div[id^="seekbar"] {
position: absolute;
top: 50%; right: 0;
transform: translateY(-50%);
width: calc(100% - 68px);
height: 10px;
border-radius: 5px;
background: linear-gradient(#ccc, #ccc) no-repeat #F2F2F2;
background-size: 0 10px;
}

label.check_label {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0; left 0;
}

label.check_label:before {
content: "";
position: absolute;
width: 16px;
height: 10px;
border-left: 4px solid #FFF;
border-bottom: 4px solid #FFF;
top: 1px; right: 1px;
transform: rotate(-45deg);
z-index: 2;
}

label.check_label:after {
content: "";
display: inline-block;
background: #fde9f2;
color: #FFF;
cursor: pointer;
width: 40px;
height: 40px;
font-size: 2.0rem;
line-height: 40px;
border-radius: 50%;
position: absolute;
top: -8px; right: -8px;
}

input.check_vote {
display: none;
}

.check_vote:checked + .check_label:after {
background: #e5086b;
}

.check_vote.locked + .check_label:before {
border-left: 4px solid #DDD;
border-bottom: 4px solid #DDD;
}

.check_vote.locked + .check_label:after {
background: #EEE;
}

.btn_vote {
text-align: center;
margin-top: 60px;
}

.btn_vote .btn {
font-size: 1.6rem;
line-height: 1;
display: inline-block;
background: #DDD;
border-bottom: 2px solid #AAA;
color: #FFF;
font-weight: bold;
padding: 20px 40px;
}

.btn_vote input {
font-size: 1.6rem;
line-height: 1;
display: inline-block;
background: #e5086b;
border: none;
border-bottom: 2px solid #750135;
color: #FFF;
font-weight: bold;
outline: none;
padding: 20px 40px;
transition: background-color 0.2s ease-out, transform 0.2s ease-out, border-bottom 0.2s ease-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.btn_vote input:hover,
.btn_vote input:focus {
background: #ed3f8d;
}

.btn_vote input:active {
background: #ed3f8d;
border-bottom: 2px solid transparent;
transform: translateY(2px);
}

.thanks_ttl {
font-size: 2.4rem;
color: #e5086b;
}

.thanks_box {
min-height: 240px;
}

.thanks_txt {
text-align: center;
max-width: 640px;
margin: 40px auto 0;
font-size: 1.6rem;
line-height: 1.8em;
}

.btn_simple {
text-align: center;
}

.btn_simple a {
font-size: 1.8rem;
color: #000;
text-decoration: none;
display: inline-block;
margin: 40px 0 0;
padding: 20px 30px;
border: solid 1px #000;
}

.btn_simple a:link,
.btn_simple a:visited {
color: #000;
}

.btn_simple a:hover,
.btn_simple a:active {
color: #000;
opacity: .6;
}

/*--
 archive_artist
--*/
.archive_artist_wrap {
color: #FFF;
background: #000;
padding: 2em;
margin-top: 2em;
text-align: center;
}

.archive_ttl {
font-size: 2.4rem;
margin-top: 1em;
}

.archive_artist_box {
width: 100%;
text-align: center;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
position: relative;
}

.archive_artist_photo {
position: relative;
padding-top: 65%;
background: #000;
}

.photo_img {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0; left: 0;
}

.photo_img img {
height: 105%;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}

.archive_artist_name {
font-size: 1.2rem;
font-weight: bold;
line-height: 1.4em;
margin-top: 6px;
}

.archive_artist_more_info {
display: flex;
justify-content: center;
}

.archive_artist_more_info .item {
margin: 1em .5em .5em;
font-size: 2.0rem;
}

.archive_artist_more_info .item a,
.archive_artist_more_info .item a:link,
.archive_artist_more_info .item a:visited {
color: #FFF;
}

.archive_artist_more_info .item a:hover,
.archive_artist_more_info .item a:active {
color: #FFF;
} 

.btn_archive {
text-align: center;
}

.btn_archive a {
font-size: 1.8rem;
color: #FFF;
text-decoration: none;
display: inline-block;
margin: 1em 0 0;
padding: 20px 30px;
border: solid 1px #FFF;
}

.btn_archive a:link,
.btn_archive a:visited {
color: #FFF;
}

.btn_sbtn_archiveimple a:hover,
.btn_archive a:active {
color: #FFF;
opacity: .6;
}

.msc_link {
display: flex;
flex-direction: column;
gap: 1em;
}

.msc_link_item {
width: 100%;
}


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


/*--
 top_artist: 960px
--*/
.top_artist_box {
width: 32%;
margin-left: 2%;
}

.top_artist_box:nth-child( 2n + 1 ) {
margin-left: 2%;
}

.top_artist_box:nth-child( 3n + 1 ) {
margin-left: 0;
}


.low_artist_box {
width: 32%;
margin-left: 2%;
}

.low_artist_box:nth-child( 2n + 1 ) {
margin-left: 2%;
}

.low_artist_box:nth-child( 3n + 1 ) {
margin-left: 0;
}


/*--// min-width: 415px --*/
}


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

body {
min-width: 1200px;
font-size: 1.4rem;
}

/*======================
 footer: 960px
=======================*/


/*======================
 HEADER: 960px
=======================*/
header {
height: 80px;
transition: .2s ease;
}

header > .inner {
width: 1200px;
margin: 0 auto;
position: relative;
}

.hd_logo {
float: left;
}

/*-----------------
 navigation: 960px 
-----------------*/
#navArea nav {
position: static;
float: left;
}

#navArea nav .menu {
margin-top: 20px;
position: absolute;
right: 60px; top: 0;
}

#navArea nav .menu > li {
padding: 0;
display: inline-block;
vertical-align: top;
}

#navArea nav .menu > li > a {
padding: 1em 30px 1em 20px;
border-top: 0;
color: #FFF;
}

#navArea nav .menu > li:last-child > a {
border-bottom: 0;
}

#navArea nav .menu > li.disable > a {
opacity: .6;
}

.dropdown {
position: relative;
}

.dropdown > span {
border-top: 0;
}

.dropdown > span::after,
.dropdown > span::before {
right: -15px;
}

#navArea nav .dropdown.pc::after,
#navArea nav .dropdown.pc::before {
top: 1.5em;
right: 1em;
}

#navArea nav .sub-menu {
display: none;
position: absolute;
left: 0;
min-width: 100%;
}

#navArea nav .sub-menu > li > a {
white-space: nowrap;
padding: 1em 30px;
}

#navArea nav .sub-menu > li:last-child > a {
padding: 1em 30px;
}

#navArea nav .sub-menu > li::before {
left: 1.5em;
}

/*-----------------
 fixed: 960px
-----------------*/
header.fixed .inner {
width: 96%;
}

header.fixed {
transition: unset;
transition-duration: 0s;
}

header.fixed .hd_logo {
}

header.fixed #navArea nav .menu {
margin-top: 4px;
}

/* .toggle_btn */
.toggle_btn,
header.fixed .toggle_btn {
display: none;
}

/* mask */
#mask {
display: none;
}

/*--
 SNS share_btn: 960px
--*/
.btn_share {
right: 0;
top: 24px;
}

header.fixed .btn_share {
right: 0;
top: 9px;
}

/*======================
 contents: 960px
=======================*/
.contents::before {
/*background-position: right 40% top 60%;*/
}

/*--
 hero_box: 960px
--*/
.hero_box {
}

.hero_box .inner {
}

.top_catch {
line-height: 1.3em;
font-size: 2.0rem;
}

.main_logo img {
max-width: 680px;
margin-top: 1em;
}

.main_lead {
font-size: 3.6rem;
margin-top: 40px;
}

.main_txt {
font-size: 2.4rem;
}

.main_txt br {
display: none;
}

.sub_txt {
font-size: 1.8rem;
}

.sub_txt br {
display: none;
}

.announcement {
font-size: 2.6rem;
}

.announcement_vote {
font-size: 3.2rem;
}

.btn_box {
font-size: 4.2rem;
margin-top: 40px;
}

.btn_box.entry {
font-size: 2.6rem;
margin-top: 40px;
}


/*--
 content_box: 960px
--*/
.content_box {
padding: 100px 0;
}

.content_box .inner {
width: 94%;
margin-left: auto;
margin-right: auto;
}

.content_box.bg_tp,
.content_box.bg_wh,
.content_box.bg_gry {
padding: 100px 0;
}


/*--
 content_ttl: 960px
--*/
.ttl_box {
text-align: center;
position: relative;
}

.content_ttl {
font-size: 2.4rem;
}

/*--
 content_lead: 960px
--*/
.content_lead {
width: 960px;
font-size: 1.6rem;
}

/*--
 content_txt: 960px
--*/
.content_txt {
font-size: 1.6rem;
width: 680px;
}

/*--
 guest_act_info: 960px
--*/



/*--
 radio_prgrm: 960px
--*/
.radio_prgrm p {
font-size: 2.6rem;
font-weight: 300;
line-height: 2.0em;
}

.radio_prgrm p span {
font-size: 1.8rem;
}

/*--
 募集要項: 960px
--*/
.req_list {
font-size: 1.6rem;
width: 680px;
}

.req_list .item {
margin-top: 14px;
position: relative;
padding-left: 30px;
}

.req_list .item::before {
content: "";
display: block;
width: 10px;
height: 1px;
background: #FFF;
position: absolute;
top: 12px; left: 0;
}

/*--
 スケジュール: 960px
--*/
.schedule_list {
width: 680px;
font-size: 1.8rem;
}

.schedule_list::after {
height: calc( 100% + 150px );
bottom: -100px; left: 200px;
}

.schedule_list::before {
height: calc( 100% + 150px );
position: absolute;
bottom: -100px; left: 200px;
}

.schedule_list .item {
margin-top: 40px;
}

.schedule_list .item .term {
float: left;
width: 200px;
position: relative;
}

.schedule_list .item .term::before {
width: 200px;
bottom: -10px;
}

.schedule_list .item .term::after {
width: 24px;
bottom: 6px; right: -18px;
transform: rotate(-42deg);
}

.schedule_list .item .matter {
width: calc( 100% - 280px );
}

.schedule_list .item .matter::before {
height: 6px;
width: 6px;
top: 6px;
}

.schedule_list .feat .matter::before {
height: 12px;
width: 12px;
top: 4px;
left: -26px;
}

.schedule_list .item .matter li {
margin-top: 8px;
}

.schedule_list .item .matter li:first-child {
margin-top: 0;
}


.schedule_list .feat .matter li.ttl{
font-size: 2.0rem;
margin-top: -2px;
}

.schedule_list .item .matter li br {
display: block;
}


/*--
 top_artist: 960px
--*/
.top_artist {
width: 980px;
}

.top_artist_box {
width: 23.5%;
margin-left: 2%;
}

.top_artist_box:nth-child( 2n + 1 ) {
margin-left: 2%;
}

.top_artist_box:nth-child( 3n + 1 ) {
margin-left: 2%;
}

.top_artist_box:nth-child( 4n + 1 ) {
margin-left: 0;
}


/*--
 low_content: 960px
--*/
.low_hero_box {
padding: 40px 0;
}

.low_hero_box .top_catch {
font-size: 1.8rem;
line-height: 1.6em;
}

.low_content_box .inner {
max-width: 980px;
width: 100%;
}

/*--
 low_artist: 960px
--*/
.low_artist_box {
width: 23.5%;
margin-left: 2%;
}

.low_artist_box:nth-child( 2n + 1 ) {
margin-left: 2%;
}

.low_artist_box:nth-child( 3n + 1 ) {
margin-left: 2%;
}

.low_artist_box:nth-child( 4n + 1 ) {
margin-left: 0;
}

.tab_label {
font-size: 1.8rem;
}

/*--
 archive_artist
--*/
.archive_artist {
display: flex;
}

.archive_artist_box {
width: 32%;
text-align: center;
margin-left: 2%;
position: relative;
}

.archive_artist_box:first-child {
margin-left: 0;
}

.msc_link {
flex-direction: row;
}


/*--
 プレイリスト
--*/
.ply_list {
width: 100%;
flex-direction: row;
}


/*--// min-width: 960px //--*/
}