@charset "utf-8";
.PC{display: none !important;}
.PC *{display: none !important;}

body,html{
	font-family: -apple-system, "Roboto-Regular", "Work Sans","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif;
	line-height:1.7em;
}

/* Wave Gear Anime
============================== */
#headerWave,#footerWave{
	width: 100%;
	height: 25px;
}
#headerWave div,#footerWave div{
	width: 100%;
	height: 100%;
	background: repeat-x bottom center;
}
#headerWave{ padding-top: 5px;  background: #fff;}
#headerWave .w01{
	background-image: url(/static/stu48/official/common/bg_wave_nav_f_2.png);
		background-repeat: repeat-x;
	background-size: 140px 71px;
	-webkit-background-size: 140px 71px;
	-moz-background-size: 140px 71px;
	-webkit-animation: wave02 70s linear infinite;
	-moz-animation: wave02 70s linear infinite;
	animation: wave02 70s linear infinite;
	position:relative;
	top: 0;
}
#headerWave .w02{
	background-image: url(/static/stu48/official/common/bg_wave_nav_m.png);
		background-repeat: repeat-x;
	background-size: 140px 71px;
	-webkit-background-size: 140px 71px;
	-moz-background-size: 140px 71px;
	-webkit-animation: wave01 60s linear infinite;
	-moz-animation: wave01 60s linear infinite;
	animation: wave01 60s linear infinite;
	position:relative;
	top: 5px;
}
#headerWave .w03{
	background-image: url(/static/stu48/official/common/bg_wave_nav_b.png);
	background-repeat: repeat-x;
	background-size: 140px 71px;
	-webkit-background-size: 140px 71px;
	-moz-background-size: 140px 71px;
	-webkit-animation: wave03 80s linear infinite;
	-moz-animation: wave03 80s linear infinite;
	animation: wave03 80s linear infinite;
	position:relative;
	top: 0;
}
#mainWave{
	width: 100%;
	height: 74px;
	background: url(/static/stu48/official/common/bg_wave_bnr_2.png) repeat-x bottom center;
	background-size: 573px 37px;
	-webkit-background-size: 573px 37px;
	-moz-background-size: 573px 37px;
	-webkit-animation: wave04 60s linear infinite;
	-moz-animation: wave04 60s linear infinite;
	animation: wave04 60s linear infinite;
	position: relative;
	top: 0px;
}
#main{ position:relative; }

#mainContent{
	width: 100%;
	padding-top: 50px;
	position:absolute;
	top:0;
	z-index:15;
}
#gear{
	width: 400px;
	height: 400px;
	background: url(/static/stu48/official/common/gear_2.png) no-repeat center;
	background-size: contain;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-webkit-animation: gear 30s linear infinite;
	-moz-animation: gear 30s linear infinite;
	animation: gear 30s linear infinite;
	position:absolute;
	top: 10px;
	left: -160px;
	z-index:-1;
}
#footerWave{background: #fff;margin-top: -15px;}
#footerWave .w01{
	background-image: url(/static/stu48/official/common/bg_wave_footer_f.png);
	background-repeat: repeat-x;
	background-size: 140px 71px;
	-webkit-background-size: 140px 71px;
	-moz-background-size: 140px 71px;
	-webkit-animation: wave02 60s linear infinite;
	-moz-animation: wave02 60s linear infinite;
	animation: wave02 60s linear infinite;
	position:relative;
	top: 0;
}
#footerWave .w02{
	background-image: url(/static/stu48/official/common/bg_wave_footer_m.png);
	background-repeat: repeat-x;
	background-size: 140px 71px;
	-webkit-background-size: 140px 71px;
	-moz-background-size: 140px 71px;
	-webkit-animation: wave01 80s linear infinite;
	-moz-animation: wave01 80s linear infinite;
	animation: wave01 80s linear infinite;
	position:relative;
	top: 5px;
}
#footerWave .w03{
	background-image: url(/static/stu48/official/common/bg_wave_footer_b.png);
	background-repeat: repeat-x;
	background-size: 140px 71px;
	-webkit-background-size: 140px 71px;
	-moz-background-size: 140px 71px;
	-webkit-animation: wave03 70s linear infinite;
	-moz-animation: wave03 70s linear infinite;
	animation: wave03 70s linear infinite;
	position: relative;
	top: -4px;
}
#bottomWave{
	width: 100%;
	height: 37px;
	background: url(/static/stu48/official/common/bg_wave_footer.png) repeat-x bottom center;
	background-size: 573px 37px;
	-webkit-background-size: 573px 37px;
	-moz-background-size: 573px 37px;
	-webkit-animation: wave04 80s linear infinite;
	-moz-animation: wave04 80s linear infinite;
	animation: wave04 80s linear infinite;
}
#footer{position:relative;}

#anchor{
	width: 56px;
	height: 55px;
	position:absolute;
	top: -60px;
	right: 20px;
}
#mainContentNews{ position:relative;    overflow: hidden; }
#mainContentNews .main{
	width: 100%;
	height: 100%;
	position:absolute;
	top:0;
	left:0;
	z-index:50;
}
#mainContentNews.sche #gear{
	top: 0;
	left: inherit;
	right: -50%;
}
@-webkit-keyframes wave01 {
	0%{background-position:0% 0;}
	100%{background-position:500% 0;}
}
@-moz-keyframes wave01 {
	0%{background-position:0% 0;}
	100%{background-position:500% 0;}
}
@keyframes wave01 { 
	0%{background-position:0% 0;}
	100%{background-position:500% 0;}
}

@-webkit-keyframes wave02 {
	0%{background-position: 0 0;}
	100%{background-position: -500% 0;}
}
@-moz-keyframes wave02 {
	0%{background-position: 0 0;}
	100%{background-position: -500% 0;}
}
@keyframes wave02 { 
	0%{background-position: 0 0;}
	100%{background-position: -500% 0;}
}
@-webkit-keyframes wave03 {
	0%{background-position:250% 0;}
	100%{background-position:900% 0;}
}
@-moz-keyframes wave03 {
	0%{background-position:250% 0;}
	100%{background-position:900% 0;}
}
@keyframes wave03 {
	0%{background-position:250% 0;}
	100%{background-position:900% 0;}
}
@-webkit-keyframes wave04 {
	0%{background-position:0 0;}
	100%{background-position:2000% 0;}
}
@-moz-keyframes wave04 {
	0%{background-position:0 0;}
	100%{background-position:2000% 0;}
}
@keyframes wave04 { 
	0%{background-position:0 0;}
	100%{background-position:2000% 0;}
}
@-webkit-keyframes gear {
	0%{transform: rotate(0deg); -webkit-transform: rotate(0deg);}
	100%{transform: rotate(360deg); -webkit-transform: rotate(360deg);}
}
@-moz-keyframes gear {
	0%{transform: rotate(0deg); -webkit-transform: rotate(0deg);}
	100%{transform: rotate(360deg); -webkit-transform: rotate(360deg);}
}
@keyframes gear { 
	0%{transform: rotate(0deg); -webkit-transform: rotate(0deg);}
	100%{transform: rotate(360deg); -webkit-transform: rotate(360deg);}
}

/* 初期設定
============================== */
.container{
	width:100%;
	height: auto;
	padding: 7rem 0 0;
}
#headerArea{
	position: fixed;
	top:0;
	height: 139px;
	z-index: 999;
}
#footerArea{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* 共通
============================== */
/* view more ボタン */
.btnMore{
    padding:2.5rem 0 6rem;
}
.btnMore a{
    display: block;
    width:100%;
    height: 5rem;
    line-height: 5rem;
    background: #C7E8FA;
    text-align: center;
    color: #111d67;
}

/* Header
============================== */

#navBtn{
	height: 50px;
	width: 50px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	top: 3px;
	position: relative;
	right: 9px;
	-webkit-transition: all .3s ease; transition: all .3s ease;
}

.index #navBtn{ top: 13px; -webkit-transition: all .3s ease; transition: all .3s ease;}
.index.headerFix #navBtn{ top: 2px; right: 5px;-webkit-transition: all .3s ease; transition: all .3s ease;}

.index.headerFix #scrollHeader{
height: 50px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}

.index.headerFix #scrollHeader h1{
	width:48px;
	height: 67px;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}

#wrap .menu {
	width: 50px;
	height: 50px;
	margin: 0;
	padding: 0;
	border: none;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 500;
}
#navBtn span{
	display: block;
	width: 28px;
	height: 2px;
	position: absolute;
	left: 12px;
	background: #111d67;
}

#navBtn .top{ top:12px; }
#navBtn .middle{ top:21px; }
#navBtn .bottom{ top:30px; }
#home #wrap .menu h1{display:none;}

#navBtn .menuTxt{
	background: none;
	font-size: 10px;
	top: 30px;
	color: #111d67;
}

/* 右肩メニュー
------------------- */

#header { height:100%;top: 70px;}
#header h1{ display: none;}

.detail #header{top:50px;}
#gNavWrap {
	display: none;
	width: 100%;
	height: 100%;
	background: #81c4f8;
	letter-spacing:0.1em;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	padding: 33px 4% 20px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	opacity: 0;
}

#headerNav{
	height: 100%;
	background: none;
	border-radius:0;
	margin-top: 50px;
}

#headerInner{
	width: 100%;
	height:100%;
	overflow: scroll;
}

#headerInner nav{
	height:100%;
	opacity: 0;
	padding-top: 50px;
	padding-bottom: 50px;
}

#headerInner nav li{
	display: block;
	width: 100%;
	text-align: left;
	    border-bottom: 1px solid #94cefb;
}
#headerInner nav li:nth-child(odd){margin-right:0;}

.smooth{
	overflow: auto !important;
	-webkit-overflow-scrolling: touch !important;
	-moz-overflow-scrolling: touch !important;
}
.normalScroll{overflow: scroll !important;}

#headerNav ul{padding: 0;}
#headerNav ul:after{
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}
#headerNav li{
	width: 49%;
	float: left;
	border: none;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	background-size: 170%;
	-webkit-background-size: 170%;
	-moz-background-size: 170%;
	margin: 0 2% 6px 0;
}

#headerNav li a{
	font-family: 'Abel', sans-serif;
	display: block;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 21px;
	letter-spacing: 0.15em;
	padding: 15px 0;
	z-index: 50;
	position: relative;
}

#headerNav li span{
	display: block;
	background: #fff;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	line-height: 140%;
	padding: 23px 6px 25px;
}

.navClose{ text-align: center;}
.navClose span{
	display:inline-block;
	width: 80%;
	text-align: center;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 0.2em;
	padding: 10px;
}
.navClose span i{margin-right: 2px;}
#navHeader{
	height: 52px;
	line-height: 60px;
	color: #333;
	margin: 0 50px;
	position: absolute;
	top: 0;
	text-align: center;
}

#headerInner nav li a,
#headerInner nav li.gNavOff{
	color: #fff;
	display: block;
	width: 100%;
	padding: 13px 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	position: relative;
}
#headerInner nav li.gNavOff,
#headerInner nav li.gNavOff span{
    color: #6099c5;
}



#headerInner nav li span{
	display: block;
	font-size: 10px;
	color: #167ccc;
	letter-spacing: 0.15em;
	padding: 12px 0;
	position: absolute;
	right: 0;
	top: 0;
}

#headerInner nav li.gNavYT ,
#headerInner nav li.gNavTW {
	border: none;
	display: inline-block;
	width: 5rem;
	margin-top: 10px;
}

#headerInner nav{ text-align: center; }

#headerInner nav li.gNavYT a,
#headerInner nav li.gNavTW a{ text-indent: -9999px; }
#headerInner nav li.gNavYT a::before{
	display: block;
	content: "\f16a";
	width: 30px;
	height: 8px;
	font-size: 30px;
	font-family: "FontAwesome";
	position: absolute;
	right: 14px;
	top: 50%;
	z-index: 10;
	margin-top: -10px;
	text-indent: 0;
}

#headerInner nav li.gNavTW a::before{
	display: block;
	content: "\f099";
	width: 30px;
	height: 8px;
	font-size: 30px;
	text-indent: 0;
	font-family: "FontAwesome";
	position: absolute;
	right: 14px;
	top: 50%;
	z-index: 10;
	margin-top: -10px;
}


#scrollHeader{
width: 100%;
height: 60px;
position: fixed;
background: #fff;
z-index: 999;
top: 0;
left: 0;
}
#scrollHeader h1{
	width: 60px;
	height: 60px;
	position: fixed;
	left: 5%;
	z-index: 500;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}


#scrollHeader h1 a{ display: block; width: 100%;}
#scrollHeader h1 a img{ width: 100%;}

#scrollHeader .bgWave{
	display: block;
	width: 100%;
	height: 32px;
	padding: 0;
	margin: -87px 0 0;
	background-image: url(/static/stu48/official/common/bg_wave_nav_b_s.png);
	background-repeat: repeat-x;
	background-size: 114px 32px;
	-webkit-background-size: 114px 32px;
	-moz-background-size: 114px 32px;
	-webkit-animation: waveNav 20s linear infinite;
	-moz-animation: waveNav 20s linear infinite;
	animation: waveNav 20s linear infinite;
	position: absolute;
	top: 122px;
}
@keyframes waveNav {
	0%{background-position:100% 0;}
	100%{background-position:0 100%;}
}

.newsBlock .newsCateIco, .newsBlock .newsDate{
    font-size: 1rem;
    
}
.newsCateIco{
	height: 1.4rem;
	line-height: 1.5rem;
}




/* Footer
============================== */
#footerArea .fNav{
    width:100%;
    padding:2rem;
}
#footerArea .fNav li{
	display: inline-block;
	text-align: left;
	margin: 0 0 1.5rem;
	font-size: 0.8rem;
}
#footerArea .fNav a{
	height: 1.4rem;
	line-height: 1.5rem;
}

.footerS{
	width: 100%;
	position: absolute;
	bottom: 0;
	z-index: 10;
}


/* index
============================== */

h2.title{
	font-size: 34px;
	line-height: 40px;
	background: url(/static/stu48/official/common/title_ico_pc.png) no-repeat 0 0.5rem;
	background-size: 30px;
	padding: 0 0 0 39px;
	margin-bottom: 2rem;
}

.newsBlock{}
.newsBlock li{ margin-bottom: 20px;}
.newsBlock a{
	color: #000;
	font-size: 14px;
}
.newsBlock li .thumb{
width: 26%;
float: left;
margin-right: 5%;
}
.newsBlock li .thumb img{
	display: block;
	width: 100%;
	background: no-repeat center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
}

.newsBlock li .text{ margin-top: -4px; overflow: hidden;}

/* main visual */
.slider li a{
	padding: 0 1.5%;
    display: block;
}
.sliderWrap{
	height: auto;
    position: relative;
    background:url(../images/common/) #C7E8FA;
    margin: 0 auto;
    padding: 14px 0 30px;
}
.slider{
    width:100%;
    margin:0 auto;
    position: absolute;
    top:0;
}
.slider li img{
   width:100%;
}
.slider .slick-dots li{
	width: auto;
	height: auto;
	padding: 0;
}
.slick-dots li button:before{ font-size: 10px; }

/* news */
#newsList section.container{
  position: relative;
  padding-bottom: 0;
  z-index: 1;
}
.news,.schedule,.youtube,.twitter,.bnr{
    padding:0 5%;
}
.news dl + dl {
    margin: 0 0 1.5rem;
}
/* youtube */
.youtube{
    padding: 5rem 5% 0;
}
/* Twitter */
.twitter{ margin-bottom: 7rem; }
.twitter .twList{
    width:90%;
}
/* banner */
.bnr{ padding: 2rem 5% 0; }

.bnr .bnr48,.bnr .bnrS {
    width:100%;
}
.bnr .bnr48{
	text-align: center;
	margin-bottom: 10px;
}
.bnr .bnr48 li{
	width: 14.8%;
	display: inline-block;
	margin: 0 1.1%;
}
.bnr .bnr48 li:first-child{ margin-left: 0; }
.bnr .bnr48 li:last-child{ margin-right: 0; }
.bnr .bnr48 img{
	width: 100%;
	height: auto;
}
.bnr a{ display:block; }
.bnr img{
	width:100%;
	height: auto;
}
.bnr .bnrS li{
	width: 48%;
	padding: 0 0 0.5rem;
}
.bnr .bnrS li:nth-child(2n){
	text-align: right;
	margin-left: 3%;
}
.bnr .bnrS li a{ display: block;}
@media screen and (min-width: 735px) and (max-width: 960px) {
    /* Tablet用の記述 */
    .bnr .bnrS li{
    width:33.333%;
    }
}

.twitterArea{ 
	background: #fff;
	height: 25rem;
	overflow: hidden;
}
.schedule .iframeWrapG{
padding: 98.25% 0 0;
}

.schedule .iframeWrapG iframe{ width: 90vw !important;}

/* 下層ページ共通
============================== */
.titleArea{
    height: 7rem;
}
.titleArea .fontNoto{
    font-size: 2.5rem;
    padding: 0;
}
.titleArea .fontQuick{
    font-size: 1.3rem;
    padding: 1.5rem 0 0;
}

.detail #wrap{  padding-bottom: 60px; }

.btnBack{ margin: 4rem auto 6rem; }
.gearBottomR #gear {
    bottom: -89px;
    right: -160px;
    top: auto;
    left: auto;
}
/* news/list.html
============================== */

.newsNavArea{
    height: auto;
    width:30rem;
    padding:0;
    margin: 0.5rem auto 4rem;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background: #93cdfa;
    border-radius: 25px;
}
.newsNavArea label {
	background: #93cdfa;
	color: #fff;
	padding: 0 3%;
	text-align: left;
	display: block;
	height: 50px;
	line-height: 50px;
	width: 25rem;
	margin: 0 auto;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	position: relative;
	z-index: 5;
	cursor: pointer;
	font-size: 16px;
}
.newsNavArea label::before{
	display: block;
	content: "\f107";
	width: 13px;
	height: 8px;
	font-size: 20px;
	font-family: "FontAwesome";
	position: absolute;
	right: 0;
	top: 1rem;
	z-index: 10;
	margin-top: -10px;
}

.newsNavArea label i{
    margin:0 0 0 18rem;
}
input[type="checkbox"].on-off{
    display: none;
}
.newsNavArea a{
    color:#FFF;
}
.newsNavArea .newsNav {
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    background: #93cdfa;
    color: #fff;
    width:35rem;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    position: relative;
    z-index: 1;
    width:25rem;
}
.newsNavArea li:first-child{
    border: none;
}
.newsNavArea li {
    padding: 5px;
    border-top: 1px solid #b8e0fe;
}
input[type="checkbox"].on-off + ul{
    height: 0;
    overflow: hidden;

}
input[type="checkbox"].on-off:checked + ul{
    height: 100%;
    padding:0 0 1rem;
}
#newsList .newsBlock {
	width: 100%;
	padding: 0 5%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
#newsList .newsBlock .newsThumb{
    width: 7.5rem;
    margin: 0 1.5rem 0 0;
}
#newsList .newsBlock .newsThumb img{
    width:7.5rem;
}
.newsBlock .newsDate{
    font-size: 1.1rem;
}

#newsDetail .newsBlock .newsThumb{
	float: none;
	width: auto;
	text-align: center;
	margin: 0 auto;
}


/* news/detail.html
============================== */
#newsDetail section.container{
  position: relative;
  z-index: 1;
}
#newsDetail .newsBlock{
	width:90%;
}
#newsDetail .newsBlock .newsThumb img{
	width:100%;
	height:auto;
	margin:4rem 0;
}


.shareList{ padding: 0 5%; box-sizing: border-box;-webkit-box-sizing: border-box; margin: 4rem auto 3rem;}


/* discography
============================== */
#disco .discIndex { padding: 20px 5%;}
#disco .discList { margin: 0 0 10px;}
#disco .discList li { width: 100%; margin: 0 0 30px;}
#disco .discList li a { display: block; text-decoration: none; color: #000;}
#disco .discList li a .jacket { line-height: 0; float: left; width: 30%; margin: 0;}
#disco .discList li a .jacket img { width: 100%; background: no-repeat center; background-size: cover;}
#disco .discList li a .detailList { padding: 0 0 0 34%;}
#disco .discList li a .detailList .cateIco,#disco.detail .discDetail .infoArea .date .cateIco{
    display: inline-block;
    height: 11px;
    line-height: 11px;
    border: 1px solid #024095;
    padding: 2px 13px;
    border-radius: 100px;
    font-size: 10px;
    margin: 0 0 8px;
    color: #024095;
}
#disco .discList li a .detailList .date {
    font-size: 10px;
    color: #878787;
    line-height: 1;
    margin: 0 0 2px;
}
#disco .discList li a .detailList .tit { font-size: 14px;}
#disco .discDetail .jacketList { margin: 0 -6% 20px;}
#disco .discDetail .jacketList li { position: relative;}
#disco .discDetail .jacketList li img {
	width: 95%;
	margin: 0 auto;
	border: 0.5px solid #eee;
	box-sizing: border-box;
}
#disco .discDetail .jacketList li .dummy {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    position: absolute;
    z-index: 2;
    border: none;
}
#disco .discDetail .jacketList li .txt {
    margin: 5px 0 0;
    font-size: 12px;
    text-align: center;
    color: #999;
}
#disco .discDetail .infoArea .date { font-size: 13px; margin: 0 0 30px;}
#disco .discDetail .infoArea .tit { font-size: 18px; line-height: 1.7; margin: 0 0 3px;}
#disco .discDetail .infoArea .date .cateIco { margin: 0;}
#disco .discDetail .infoArea article .trackList{ margin: 30px 0 0;}
#disco .discDetail .infoArea article .trackList ol { margin: 0 0 25px;}
#disco .discDetail .infoArea article .trackList li { margin: 0 0 3px; line-height: 1.5;}
#disco .discDetail .infoArea article .trackList li h2 { margin: 0px 0 10px; padding: 0 0 5px; border-bottom: 0.5px solid #ddd;}
#disco .discDetail .infoArea article .trackList li .tieup { font-size: 12px; color: #999;}