@charset "utf-8";

.SP{display: none !important; }

/* Web Font [PC only]
============================== */
/*
@font-face {
    font-family: 'Noto Sans Japanese';
    font-style: normal;
    font-weight: 200;
    src: url('../font/NotoSansCJKjp-Light.eot');
    src: url('../font/NotoSansCJKjp-Light.eot?#iefix') format('embedded-opentype'),
    url('../font/NotoSansCJKjp-Light.woff') format('woff'),
    url('../font/NotoSansCJKjp-Light.ttf')  format('truetype');
}
*/
/* 共通
============================== */
.fontNoto{font-family: 'Noto Sans Japanese', sans-serif !important;}
/* Wave Gear Anime */
#headerWave,#footerWave{
    width: 100%;
	height: 25px;
}
#headerWave div,
#footerWave div{
	width: 100%;
	height: 100%;
	background: repeat-x bottom center;
}
#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 200s linear infinite;
	-moz-animation: wave02 200s linear infinite;
	animation: wave02 200s 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 240s linear infinite;
	-moz-animation: wave01 240s linear infinite;
	animation: wave01 240s 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 320s linear infinite;
	-moz-animation: wave03 320s linear infinite;
	animation: wave03 320s linear infinite;
	position: relative;
	top: -5px;
}
#mainWave{
width: 100%;
height: 37px;
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 250s linear infinite;
-moz-animation: wave04 250s linear infinite;
animation: wave04 250s linear infinite;
position: relative;
top: 0px;
}
#mainContent{
	width: 100%;
	padding-top: 100px;
	position:absolute;
	top:0;
	z-index:15;
}
#gear{
	width: 662px;
	height: 662px;
	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: -50px;
	left: -160px;
	z-index:-1;
}
#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 200s linear infinite;
	-moz-animation: wave02 200s linear infinite;
	animation: wave02 200s 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 240s linear infinite;
	-moz-animation: wave01 240s linear infinite;
	animation: wave01 240s 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 340s linear infinite;
	-moz-animation: wave03 340s linear infinite;
	animation: wave03 340s 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 250s linear infinite;
-moz-animation: wave04 250s linear infinite;
animation: wave04 250s linear infinite;
}

#footer{position:relative;}
#footerArea{background: #222e9a;  }
#anchor{
	width: 56px;
	height: 55px;
	position:absolute;
	top: -60px;
	right:20px;
}
@-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  {
	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);}
}

/* header
============================== */
/* グローバルナビ */


#gNavWrap{
	width:100%;
	margin:0 auto;
	position: fixed;
	top:0;
	z-index: 999;
}
#header{ background: #fff; }
.headerFix #header{ box-shadow: 0 0 1px rgba(0, 0, 0, 0.24); }
#gNavWrap #headerInner{
/*    width: 1140px;*/
width: 1275px;
    height: 9rem;
    margin:0 auto;
    position: relative;
}
#gNavWrap .logo{
    float: left;
    margin:0 3rem 0 0;
}

#gNavWrap .logo a{ display: block; }

#gNavWrap .logo img{
    width:75px;
    height: 104px;
}
#gNavWrap .logo a:hover{
    opacity: 0.8;
}
.gNav{
    float: left;
    width:80rem;
    overflow: hidden;
    margin: 3.2rem auto 0;
    font-size: 1.2rem;
    line-height: 1.2rem;
}
.gNav > li{
    display: inline-block;
    text-align: center;
    height: 4.2rem;
}
.gNav li{
    margin: 0 1.3rem;
}
.gNav > li a{
    display: block;
    height: 42px;
    color: #024095;
}
.gNav > li a:hover{
    background: url(/static/stu48/official/common/hover_wave.png) no-repeat;
	-webkit-animation: wavehover 10s linear infinite;
	-moz-animation: wavehover 10s linear infinite;
	animation: wavehover 10s linear infinite;
    background-size: 134px 42px;
    background-position: bottom ;
    height: 42px;
}
@keyframes wavehover {
	0%{background-position:100% 0;}
	100%{background-position:0 100%;}
}
/* 未公開ページ */
.gNav li.gNavOFF,.gNavOFF .fontQuick,.gNav li{
    color:#d8e0e8;
}
/* current page */
.navOn{
    background: url(/static/stu48/official/common/hover_wave.png);
    background-size: 134px auto;
    background-position:bottom;
    color: #024095 !important;
}
.gNav .fontQuick{
    display: block;
    font-size: 10px;
    line-height: 1rem;
    padding:0 0 0.6rem;
}
/* キャプション文字 */
.gNav a .fontQuick{
    color:#81c4f8;
}

.gNav a:hover{color:#81c4f8;}

/* SNSボタン */
.gNav .gNavYT{
    margin:0 0 0 1rem;
}
.gNav .gNavYT,.gNav li.gNavTW{
    width:17px;
    height: 13px;
}
.gNav .gNavYT a,.gNav li.gNavTW a{
    display: block;
    cursor:pointer;
    text-indent: 9898px;
    overflow: hidden;
}
.gNav .gNavYT a , .gNav .gNavYT a:hover{
    background-size: 17px 25px !important;
    background: url(/static/stu48/official/common/gnav_YT.png) no-repeat;
    width:17px;
    height: 13px;
}
.gNav .gNavYT a{background-position: 0 0 !important;}
.gNav .gNavYT a:hover{background-position: 0 -13px !important;}

.gNav li.gNavTW a,.gNav li.gNavTW a:hover{
    background-size: 15px 25px !important;
    background: url(/static/stu48/official/common/gnav_TW.png) no-repeat;
    width:17px;
    height: 13px;
}
.gNav .gNavTW a{background-position: 0 0 !important;}
.gNav .gNavTW a:hover{background-position: 0 -13px !important;}


/* view more ボタン */
.btnMore{
    padding: 0;
}
.btnMore a{
	display: block;
	position: absolute;
	height: 1.4rem;
	line-height: 1.4rem;
	color: #111d67;
	top:1.5rem;
	right: 0;
	font-size:1.3rem;
	z-index: 1;
}
.btnMore a:hover{
    color: #ee4757;
}

/* footer
============================== */
#footerArea .fNav{
	text-align: center;
	margin-bottom: 50px;
}
#footerArea .fNav li{
    padding: 0 1.4rem;
}

/* index.html
============================== */
/* main visual */
#main{ position:relative; }
.sliderWrap{
	height: auto;
	margin: 0 auto;
	padding: 25px 0;
	position: relative;
}
.slider{
	width:100%;
	margin:0 auto;
}
.slider li a{
    padding: 0 3%;
}
.slider li a{display: block;}
.slider li img {width: 100%;}
.slick-dots{ bottom: -45px!important; }
.slick-dots li {  padding: 0;}
.container{ position: relative; padding-top: 70px; }

/* news　+ youtube */
#newsDetail section.container, #newsList section.container{
    position: relative;
}
#newsDetail .newsTxt h1{ font-size: 20px; }
.news dl + dl {
    margin:3.5rem 0 0 ;
}
.newsWrap,.youtubeWrap{
    width:1000px;
    margin:0 auto;
    padding:7rem 0 5rem;
}
.newsWrap > .news,.newsWrap > .schedule,
.youtubeWrap > .youtube,.youtubeWrap > .twitter{
    float: left;
}
.newsWrap > .news,
.youtubeWrap .youtube{
    width:44rem;
    margin:0 12rem 0 0;
}
.newsWrap > .schedule,
.youtubeWrap > .twitter{
    width:43rem;
    margin:0;
}
.twitterArea{ 
    background: #fff;
    padding: 2rem;
}

.youtube,.twitter{
    padding:5rem 0 3rem;
}

.iframeWrapG{
	padding: 400px 0 0;
	height: 0;
}

.schedule .iframeWrapG{
	padding: 584px 0 0;
}


.news,.schedule,.youtube{
    position: relative;
}
.youtube .btnMore a{
    top:7rem;
}
/* バナーエリア */

.bnr{
    padding: 6rem 2rem 2rem;
}

.bnr .bnr48,.bnr .bnrS {
    width:1000px;
    margin: 0 auto;
}
.bnr .bnr48 li,.bnr .bnrS li{
    display: inline-block;
}
.bnr .bnr48 li + li{
    margin:0 0 3rem 4.2rem;
}
.bnr .bnr48 li:nth-child(4n+1){
    margin:0;
}
.bnr .bnr48 img{
    width:21.8rem;
    height: auto;
}
.bnr .bnrS img{
    width:148px;
    height: auto;
}
.bnr .bnrS li + li{
    margin:0 0 2.2rem 2.2rem;
}
.bnr .bnrS li:nth-child(7){
    margin:0;
}

/* 下層ページ共通
============================== */
/* ページタイトル */
.titleArea{
    height: 15rem;
}
.titleArea .fontNoto{
    font-size: 3.5rem;
    padding: 0;
    font-weight: 200;
}
.titleArea .fontQuick{
    font-size: 1.3rem;
    padding:5rem 0 0;
}

/* news/list.html
============================== */
.newsNav{
    margin:7rem auto 6rem;
    font-family: 'Quicksand', sans-serif ,'Noto Sans Japanese';
    font-size: 1.2rem;
}
.newsNav li,.newsNav li a{
    display: inline-block;
    padding: 0 0.5rem;
    height: 3rem;
}
.newsNav a:hover{
    color:#024095;
    background: url(/static/stu48/official/common/hover_wave_s.png) no-repeat;
    -webkit-animation: wavehoverS 10s linear infinite;
	-moz-animation: wavehoverS 10s linear infinite;
	animation: wavehoverS 10s linear infinite;
    background-size: 134px 3rem;
    text-decoration: none;
    height: 3rem;
}
@keyframes wavehoverS {
	0%{background-position:100% 0;}
	100%{background-position:0 100%;}
}
.newsNav li+li:before{
    content:"/";
    padding:0 0.5rem 0 0;
    color:#C7E8FA;
}
#newsList .newsBlock{
    width: 75rem;
}

.newsBlock li{ margin-bottom: 50px; }
.newsBlock li a{ display: block; color: #000; }
.newsBlock li a:hover{ text-decoration: none; }
.newsBlock .thumb{
	float: left;
	width: 90px;
	margin-right: 15px;
}

.newsBlock .thumb img{
	display: block;
	width: 100%;
	background: no-repeat center;
	background-size: cover;
	-webkit-background-size: cover;
}

.newsBlock .text{
	margin-top: -5px;
	padding-left: 110px;
}

.newsBlock .newsCateIco{ margin-bottom: 5px; }
.newsBlock .text h2{ margin-bottom: 8px; }


/* news/detail.html
============================== */
#newsDetail .newsBlock{
    width: 75rem;
    margin:7.5rem auto;
}
#newsDetail .newsBlock .newsThumb{
    margin:7rem auto;
}
#newsDetail .newsBlock .newsThumb img{
    width:54rem;
    height: auto;
}

.shareList{ width: 750px; margin: 0 auto; }

/* discography
============================== */
#disco .discList { width: 75rem; margin: 0 auto 8rem;}
#disco .discList li { float: left; width: 30.6%; margin: 0 4.1% 30px 0;}
#disco .discList li:nth-child(3n) { margin-right: 0;}
#disco .discList li:nth-child(3n+1) { clear: both;}
#disco .discList li a { display: block;}
#disco .discList li a:hover { color: #024095;}
#disco .discList li a .jacket { line-height: 0; margin: 0 0 10px; overflow: hidden;}
#disco .discList li a .jacket img {
	width: 100%;
	background: no-repeat center;
	background-size: cover;
	-webkit-transition: all .25s ease-out;
	transition: all .25s ease-out;
}
#disco .discList li a:hover .jacket img { transform: scale(1.1); -webkit-transform: scale(1.1);}
#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: 3px 9px;
	border-radius: 100px;
	font-size: 10px;
	margin: 0 0 5px;
	color: #024095
}
#disco .discList li a .detailList .date { font-size: 12px; color: #878787; line-height: 1;}
#disco .discList li a .detailList .tit { font-size: 16px; color: #000; margin: 0 0 6px; line-height: 1.3;}
#disco.detail .discDetail { width: 75rem; margin: 7.5rem auto;}
#disco.detail .discDetail .imageArea { float: left; width: 40%;}
#disco.detail .discDetail .imageArea .discImg { position: relative; line-height: 0; margin: 0 0 10px;}
#disco.detail .discDetail .imageArea .discImg img { width: 100%; border: 0.5px solid #eee; box-sizing: border-box;}
#disco.detail .discDetail .imageArea .discImg .dummy {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	border: none;
}
#disco.detail .discDetail .imageArea .tit {
	margin: 0 0 20px;
	font-size: 12px;
	text-align: center;
	line-height: 1;
}
#disco.detail .discDetail .infoArea { float: right; width: 54%;}
#disco.detail .discDetail .infoArea .tit { font-size: 28px; line-height: 1.3; margin: 0 0 15px;}
#disco.detail .discDetail .infoArea .date {
	font-size: 14px;
	color: #878787;
	line-height: 1;
	margin: 0 0 40px;
}
#disco.detail .discDetail .infoArea .txt .trackList{ margin: 30px 0 0;}
#disco.detail .discDetail .infoArea .txt .trackList ol { margin: 0 0 25px;}
#disco.detail .discDetail .infoArea .txt .trackList li { margin: 0 0 5px; line-height: 1.5;}
#disco.detail .discDetail .infoArea .txt .trackList li h2 { margin: 0 0 8px;}
#disco.detail .discDetail .infoArea .txt .trackList li .tieup { font-size: 12px; color: #999;}