@charset "utf-8";
body {
  padding: 0;
  display: none;
}
@media screen and (min-width : 768px){
  body {
    padding: 20px;
  }
}

/* *****共通設定***** */

html body{
    text-align:center;
    background-color: #ebebeb;
    fnont-family: Roboto,\\30D2\30E9\30AE\30CE\89D2\30B4 Pro W3,Hiragino Kaku Gothic Pro,\\30E1\30A4\30EA\30AA,Meiryo,Osaka,"\FF2D\FF33 \FF30\30B4\30B7\30C3\30AF",MS PGothic,Verdana,sans-serif;
    fot-weight: 400;
    font-size: 1rem;
    line-height: 2;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    }

.log h1 {
	float: left;
}

.logo a {
		display: block;
		width: 15rem;
}

.bg_sky {
    background-image: url(../img/haikei.webp);    /* 背景画像指定 */
    background-repeat: no-repeat;
}

main{
/*   min-height: 100vh;*/
}

a{
  color: #fff;
  display: inline-block;
  transition: .3s;
  -webkit-transform: scale(1);
  transform: scale(1);
  text-decoration: none;
  font-size: 1rem;
}
.snsicon-n a{
margin:0.2rem 0.2rem 0 0.2rem;
}

/*a:hover {
text-decoration:none;
color:#CCCCCC;
}*/

a:hover{
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  color:#fff;
  text-decoration: none;
}
h6{
  color: #333;
  /*display: inline-block;*/
  display:inline;
  transition: .3s;
  -webkit-transform: scale(1);
  transform: scale(1);
  text-decoration: none;
  font-size: 1.2rem;
  float:left;
/*  display: block;*/
  margin: 0 auto 0 2rem;
}

#whatsnew p{
  margin: 0;
}
/*
#whatsnew .card-body{
  padding: 0;
}
*/
.font600{
   font-weight: 600;
}

.font400{
   font-weight: 550;
   font-size:0.9rem;
}

.container{
  width: 100%;
  max-width: 1000px;
  max-width: 100%;
  padding: 1.5rem;
}

img {
  max-width: 100%; 
}

.line_l{
 border-bottom: 1px solid #ddd;
 margin:1rem 5rem;
}

hr {
   border-width: 0.8px 0px 0px 0px; /* 太さ */
   border-style: solid; /* 線種 */
   border-color: #ddd;   /* 線色 */
   height: 1px;         /* 高さ(※古いIE用) */
   width: 90%;
   margin: 0.8;
   }

.none {
   border-style: none; /* 線種 */
}

/* footer index */

.setbottom_fixed{
    position: fixed;/*←絶対位置*/
    bottom: 0; /*下に固定*/
    color: #bbb;
    left: 0;
    right: 0;
}

/* footer*/

.setbottom{
    bottom: 0; /*下に固定*/
    color: #bbb;
    left: 0;
    right: 0;
}

.col-xl-6{
display:flex; 
align-items: center; 
}


/* Release */

.flex{
  display: flex;
}

.p1{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin: auto;
    font-size:0.8rem;
}

.mgl-10{
    margin-left : 10px;
}

.bg-gray{
    background-color: #ebebeb;
}

.bg-gray2{
    background-color: #b3b3b3;
}


/* slider1 */

.slider1 {/*横幅94%で左右に余白を持たせて中央寄せ*/
   width:100%;
   margin:0 auto;
}

.slider1 img {
/*    width:100%; *//*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider1 .slick-slide {
    margin:1rem;
}

/* slider2 */

.slider2 {/*横幅94%で左右に余白を持たせて中央寄せ*/
   width:94%;
    margin:0 auto;
}

.slider2 img {
    width:100%; /*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider2 .slick-slide {
    margin:1rem;
}

/* slider3 */

.slider3 {
   width:100%;
    margin:0 auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider3 .slick-slide {
    margin:1.6rem;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/

.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 1.5px solid #666;/*矢印の色*/
    border-right: 2px solid #666;/*矢印の色*/
    height: 15px;
    width: 15px;
    margin:0 auto;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: -2%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right: -1.5%;
    transform: rotate(45deg);
}

.container ul{
   padding:0;
}

#top {
	padding:0;
    width: 92%;
    margin:0 auto;
}

#release {
	padding-top:2rem;
	padding-bottom:2rem;
    margin-top:1rem;
    background-color: #fff;
}

#youtube {
	padding-top:3rem;
}

#youtube p{
    color:#fff;
}

#whatsnew {
	padding-top:3rem;
	padding-bottom:3rem;
}

#whatsnew a {
margin: -0.5rem 1rem 0 1rem;
display: inline-block;
float:left;
}

ul {
    list-style-type: none;
}

/* ボタンデザイン */
.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.1rem rgb(77 77 77 / 25%);
}

.btn-artist {
    background: #0f2350;  /* fallback for old browsers */
    color: #fff;
    display: block;
    margin: 0 0 0 1rem;
    font-size:0.6rem;
    border-radius: 35px;
}
.btn-cover {
    background: #FFFFF9;  /* fallback for old browsers */
    color: #2b2b2b;
    display: block;
    margin: 0 0 0 1rem;
    font-size:0.6rem;
    border-radius: 35px;
}

.btn-origin {
    background: #887f7a;  /* fallback for old browsers */
    color: #fff;
    display: block;
    margin: 0 0 0 1rem;
    font-size:0.6rem;
    border-radius: 35px;
}

.btn-play {
    background: #474a4d;  /* fallback for old browsers */
    color: #fff;
    border-radius: 35px;
    }


.btn-more {
    background: #f8f9fa;
    color: #474a4d;
    display: block;
    margin: 0 0 0 auto;
    font-weight: 630;
    font-size:0.8rem;
}

.btn-more:hover{
    background: #7598AC;
    color:#fff;
    opacity: 0.65;
}

.iframeWrapper{
position: relative;
}

.iframeWrapper::before{
content: "";
display: inline-block;
padding-top: 56.25%;
}

.iframeWrapper iframe{
position: absolute;
top: 1rem;
left: 5%;
width: 90%;
height: 90%;
}

/* ローディング */

.grid-row { 
  position: fixed;
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: #2b8ccd; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  transition: all 0.3s; 
  z-index: 9999;
}

.loading {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 0;
}

.loading li {
  height: 0;
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  margin: 0;
  height: 10px;
  width: 10px;
  border: 3px solid white;
  border-radius: 100%;
  transform: transformZ(0);
  -webkit-animation: LOADING 2s infinite;
          animation: LOADING 2s infinite;
}
.loading li:nth-child(1n) {
  left: -20px;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.loading li:nth-child(2n) {
  left: 0;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.loading li:nth-child(3n) {
  left: 20px;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.grid-row:after {
  content: "";
  display: table;
  clear: both;
}
.grid-row .col {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
}

.grid-row .col + .col {
  background: #2b8ccd;
  left: auto;
  right: 0;
}

@-webkit-keyframes LOADING {
  0% {
    transform: scale(0.5);
    background: #2b8ccd;
  }
  50% {
    transform: scale(1);
    background: white;
  }
  100% {
    transform: scale(0.5);
    background: #2b8ccd;
  }
}

@keyframes LOADING {
  0% {
    transform: scale(0.5);
    background: #2b8ccd;
  }
  50% {
    transform: scale(1);
    background: white;
  }
  100% {
    transform: scale(0.5);
    background: #2b8ccd;
  }
}

/* newsページ */

ul.newsList a{
    color: #333;
}

ul.newsList {
color: #333;
background-color: #fff;
display: flex;
flex-flow: row wrap;
border-radius:10px;
padding: 20px 20px;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}

@media screen and (max-width: 900px) {
ul.newsList {
color: #333;
background-color: #fff;
display: flex;
flex-flow: row wrap;
border-radius:10px;
padding: 20px 20px;
max-width: 800px;
margin-left: 1rem;
margin-right: 0.8rem;
}}

ul.newsList li {
display: block;
margin: 10px 10px;
}

ul.newsList li:nth-child(1) {
flex-basis: 80px;
color: #fff;
height:30px;
font-size: 12px;
padding: 2px 1px;
text-align: center;
border-radius:10px;
}

ul.newsList li:nth-child(2) {
flex-basis: 130px;
}

ul.newsList li:nth-child(3) {
flex-basis: auto;
width: 500px;
}

@media screen and (max-width: 900px) {
ul.newsList li:nth-child(3) {
flex-basis: auto;
min-width: 200px;
margin: auto;
}}


.ttl {
font-size:1.3rem;
margin-bottom: 1.5rem;
}

li.osa_color{
background-color: #8da0b6;
}
 
 li.ic_color{
background-color: #a69abd;
 }