@charset "utf-8";

html {
  /*background: url(img/960_grid_12_col.png) repeat-y top center;*/
  /*max-width: 960px;*/
  margin: 0 auto;
}

body {
  font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
  font-size: 16px;
  background-image: url(img/star_back2.png);
  line-height: 1.2;
}


img {
  max-width: 100%;
}

h1 {
  font-size: 48px;
  /*margin-bottom: 12px*/
}

h2 {
  font-size: 24px;
  line-height: 1;
  margin-bottom: 10px;
}

p {
  margin-left: 1em;
}

ul {
  margin-top: 0.5em;
  margin-left: 1em;
}

li {
  list-style-type: none;
}

h3 {
  font-size: 20px;
  line-height: 1;
  margin-top: 20px;
  margin-bottom: 12px;
  vertical-align: bottom;
}

.lead_subtitle {
  margin-top: 0;
}

.txt_en {
  color: #e4007f;
  font-weight: bold;
}

.notice_text {
  color: #ff0000;
}


/*Header*/
header {
  position: relative;
  text-align: center;
  background: url(img/SSC_back_test.png) repeat-x;
  /*width: 960px;*/
}

header nav {
  background-image: linear-gradient(#e95399, #e4007f);
  margin-bottom: 24px;
}

header nav ul {
  margin-bottom: 24px;
  max-width: 100%;
  overflow: hidden;
  transition: all 0.1s;/*dropdownmenu*/
  transition-timing-function: linear;
  /*transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);/*タイミング関数*/*/
}

header nav ul li {
  border-bottom: 1px solid yellow;
}

header nav ul li a {
  color: #ffffff;
  display: block;
  font-weight: bold;
  padding: 6px 0;
  text-decoration: none;
}

/*--ドロップダウンメニュー--*/
#pc_menu {
  display: none;
}

label {
  /*background-image: linear-gradient(left, #161b61, #7a8210, #161b61);*/
  background: url(img/menu_label.png);
  border: 1px solid #e4007f;
  color: #ffffff;
  display: block;
  font-weight: bold;
  padding: 10px;
  margin: 0;
}

input[type="checkbox"].on-off {
  display: none;
}

input[type="checkbox"].on-off + ul {
  height: 0;
  overflow: hidden;
}

input[type="checkbox"].on-off:checked + ul {
  height: 128px;
}

/*Contents*/
.contents {
  /*background-color: #ffffff;*/
  margin: 0 auto;
  width: 90%;
}

.contents .sub {
  width: 90%;
}

.contents .main,
.contents .sub {
  margin: 0 auto;
}

.contents p,ul {
  margin-bottom: 16px;
}

.contents .main .banner_box {
  box-sizing: border-box;
  margin-bottom: 20px;
  text-align: center;
}

.contents .main .banner_box img {
  /* border: 1px solid #cccccc; */
  display: block;
  margin: 0 auto;
}

.contents .main .article_01 {
  background: url(img/back01.png);
  background-size: cover;
  border-radius: 26px;
  margin-bottom: 30px;
  padding: 8px;
}

.contents .main .article_02 {
  background: url(img/back03.gif);
  background-size: cover;
  border-radius: 26px;
  margin-bottom: 30px;
  padding: 8px;
}

.contents .main .article_03 {
  background: url(img/back02.gif);
  background-size: cover;
  border-radius: 26px;
  margin-bottom: 30px;
  padding: 8px;
}

.contents .main .article_05 {
  background: url(img/back05.gif);
  background-size: cover;
  border-radius: 26px;
  margin-bottom: 30px;
  padding: 8px;
}

.contents .main .article_wrap {
  background-color: #ffffff;
  border-radius: 20px;
  margin: 10px;
  padding: 20px;
  overflow: hidden;
}

.news_list {
  display: inline-block;
  line-height: 22px;
}

.news_list dt {
  float: left;
  width: 5em;
}

.news_list dd {
  padding-left: 7em;
}

.play_button {
  /*display: none;*/
  padding: 5px;
  margin-bottom: 20px;
}

.sp_notice {
  color: #ea5413;
}

.bl_cd {
  width: 100%;
}

.box_image_cd img {
  border: 1px solid #cecece;
  display: block;
  /*width: 260px;*/
}

.corner li:nth-child(1),
.corner li:nth-child(2),
.corner li:nth-child(3),
.corner li:nth-child(4),
.corner li:nth-child(5) {
  margin-bottom: 10px;
}

.corner li:nth-child(1) span,
.corner li:nth-child(4) span {
  color: #e4007f;
  font-weight: bold;
}

.corner li:nth-child(2) span,
.corner li:nth-child(5) span {
  color: #171c61;
  font-weight: bold;
}

.corner li:nth-child(3) span,
.corner li:nth-child(6) span {
  color: #23ac38;
  font-weight: bold;
}

.mail {
  float: left;
  margin-left: 20px;
}

/*.cast01 {
  margin: 10px 10px 20px auto;
  padding-left: 26px;
  width: 220px;
  max-width: 300px;
}*/

/*.cast02 {
  margin: 10px 10px 20px auto;
  padding-left: 50px;
  width: 220px
  max-width: 300px;
}*/



.cast01 img,
.cast02 img {
  display: block;
  border: 1px solid #cccccc;
  border-radius: 10px;
  max-width: 200px;
  margin: 0 auto;
}

.cast01 ul,
.cast02 ul {
  font-size: 14px;
  margin-left: 0;
}

.sub img {
  text-align: center;
}

.sub aside {
  margin-bottom: 30px;
}

.sub aside ul {
  font-size: 12px;
  text-align: center;
  margin-left: 0;
}

.sub aside ul li {
  margin-bottom: 1rem;
}

/* .sub aside ul li a img {
  border: 1px solid #cccccc;
} */

.twitter-timeline {
  height: 180px;
}


/*Footer*/
footer {
  background-color: #fff100;
  color: #171c61;
  font-size: 12px;
  padding: 12px 0;
  text-align: center;
}

/*480px以上*/
@media screen and (min-width: 480px) {
  header .tagline {
    position: absolute;
    top: 2px;
    right: 15%;
  }

  header nav {
    background: none;
  }

  header nav ul {
    width: 960px;
    line-height: 65px;
    margin: 0 auto;
  }

  header nav ul li {
    border: none;
    float: left;
    /*height: 72px;*/
    width: 25%;
  }

  header nav ul li a {
    background: url(img/menuback_out.png) no-repeat;
    font-size: 20px;
    /*border: 1px solid #555555;
    border-radius: 5px;
    background-image: linear-gradient(#f1b192, #e77842, #f1b192);*/
    padding: 0;
    text-shadow: 1px 1px 3px #000000;
    vertical-align: middle;
  }

  header nav ul li a:hover {
    background: url(img/menuback_over.png) no-repeat;
    /*text-shadow: none;
    opacity: 0.8;*/
  }

  label,
  input[type="checkbox"],
  #sp_menu {
    display: none;
  }

  #pc_menu {
    display: block;
  }

  .contents {
    overflow: hidden;
    width: 960px;
  }

  .contents .main,
  .contents .sub {
    float: left;
    /*margin: 0 10px;*/
  }

  .contents .main {
    margin: 0;
    width: 680px;
  }

  .article_wrap {
    overflow: hidden;
  }

  .play_button {
    display: block;
  }

  .sp_notice {
    display: none;
  }

  .cast_box {
    display: flex;
    justify-content: space-around;
  }

  .cast01,
  .cast02 {
    width: 40%;
  }

  .contents .sub {
    margin-left: 20px;
    width: 260px;
  }

  .twitter-timeline {
    height: auto;
  }

  /*.contents .main .article_radio {
    background: url(img/back01.png);
    border-radius: 20px;
    margin-bottom: 20px;
    padding: 10px;
  }

  .contents .main .article_about {
    background: url(img/back03.gif);
    border-radius: 20px;
    margin-bottom: 20px;
    padding: 10px;
  }

  .contents .main .article_wrap {
    background-color: #ffffff;
    border-radius: 20px;
    margin: 10px;
    padding: 10px;
  }*/

  .contents .sub p {
    margin: 0 auto;
  }

  .bl_cd {
    display: flex;
    justify-content: space-around;
  }

  .box_image_cd {
    padding-top: 1rem;
  }

  .box_image_cd img {
    width: 350px;
  }

  .box_text_cd {
    width: 76%;
  }

  /*Goods*/
  .box_goods {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
  }

  .box_goods img {
    display: block;
    width: 200px;
    border: 1px solid #cecece;
    box-sizing: border-box;
  }

  footer {
    /*max-width: 960px;*/
    margin: 0 auto;
    margin-top: 30px;
  }
}

/*グッズページテーブル部分仮スタイル*/
table {
  text-align: center;
}

td {
  text-overflow: align: left;
  vertical-align: top;
}

.stream_btn{
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 5px;
}
.stream_btn iframe{
  max-width: 100%;
}

@media screen and (min-width: 480px) {
  .stream_btn{
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 480px) {
  /* タブ切り替え */
  .tab_wrap input[type="radio"]{
    display:none;
  }
  .tab_triger{
    display: block;
    color: #fff;
    /*background-color: #fff;
    border:solid 1px #f94a01;*/
    border-radius: 1rem;
    /*width: fit-content;*/
    padding: 0.5rem;
    margin: 0.5rem;
  }
  .tab_area{
   text-align: center;
   display: flex;
   /*grid-template-columns: repeat(auto-fit,12rem);*/
   justify-content: center;
  }
  .tab_area label:hover{
    cursor: pointer;
    transition: scale(1.25,1.25)
  }
  .panel_area{
    margin-top: 1rem;
  }
  .tab_panel{
    display:none;
  }

  #tab1:checked ~ .tab_area .tab1_label{background:#f94a01; color:#fff; }
  #tab1:checked ~ .panel_area #ps{display:block; animation:tabAnim ease-in 0.5s ; -ms-animation:tabAnim ease-in 0.5s ;}
  #tab2:checked ~ .tab_area .tab2_label{background:#f94a01; color:#fff; }
  #tab2:checked ~ .panel_area #ec{display:block; animation:tabAnim ease-in 0.5s ; -ms-animation:tabAnim ease-in 0.5s ;}

  .fadeout {
    animation : fadeOut 1.5s;
    animation-fill-mode: both;
  }

  @keyframes tabAnim{
    0%{opacity:0;}
    100%{opacity:1;}
  }

  @keyframes fadeOut {
    100% {
      opacity: 1;
    }
    0% {
      opacity: 0;
    }
  }
  .released_item{
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .released_item li{
    margin-bottom: 0.5rem;
  }
  .link_box{
    display:flex;
    justify-content:center;
    gap:1rem;
  }

}
@media screen and (max-width:480px) {
  .col2,.col2_l,.col2_r,.col2_sp{grid-template-columns:1fr;}
  .link_box{flex-wrap: wrap;}
}