@charset "utf-8";

@font-face {
    font-family: 'WebHostingHub-Glyphs';
    src: url('/main/font/webhostinghub-glyphs.eot');
    src: url('/main/font/webhostinghub-glyphs.eot?#iefix') format('embedded-opentype'),
         url('/main/font/webhostinghub-glyphs.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    -moz-font-feature-settings: "calt=0,liga=0";
}
/* ========================================

	EMTG MUSIC

	--------------------
	style.css 
	-------------------
	   
========================================== */

/* リセット
------------------------------------------ */
html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p,
header, hgroup, section, article, aside, hgroup, footer, figure, figcaption, nav {
    margin: 0;
    padding: 0;
    font-size: 100%;
}
body {
    line-height: 1.0;
    -webkit-text-size-adjust: none;
    margin:0;
}
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary { 
    display:block;
}
img {
    border: 0;
    vertical-align: bottom;
}
ul, ol, dir{
    list-style: none;
    display: block;
}
table {
    border-spacing: 0;
    empty-cells: show;
}
div, h2, h3, h4, h5, h6, p, li, dt, dd, pre, code, blockquote, th, td{
    word-break: break-all;
}

/* ========================================

	基本スタイル
	
========================================== */
* {
    margin: 0;
    padding: 0;
}
html {
	height:100%;
	margin: 0px auto;
}  
body {
	font-family: Helvetica Neue,Helvetica,Arial,san-serif,"ヒラギノ角ゴ ProN W3 / W6","Hiragino Kaku Gothic Pro";
	font-size:14px;
	line-height:1.4em;
	height:100%;
	background:#282828;
	color:#333333;
	position: relative;
	left: 0;
	overflow-x: hidden;
}

/* リンク色 */
a,a:link, a:visited{color:#ff2a68; text-decoration:none;}

/* clearfix */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
/* ========================================

	ヘッダ
	
========================================== */
#header{
	z-index:1030;
	background:#ffffff;
	height:45px;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	box-shadow:rgba(0, 0, 0, 0.1) 0px 1px 1px 0px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.1) 0px 1px 1px 0px;
}
#header h1{
	position:absolute;
	left:50%;
	z-index:2;
	margin: 12px 0 0 -80px;
}
#header h1,
#header h1 img{
	width:157px;
}
/* ナビゲーション */
#panel-btn{
	display: inline-block;
	position: relative;
	width: 40px;
	height: 40px;
	margin: 2px 0 0;
	background: #fff;
}
#panel-btn-icon{
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 2px;
	margin: -1px 0 0 -7px;
	background: #000;
	transition: .3s;
}
#panel-btn-icon:before, #panel-btn-icon:after{
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 20px;
	height: 2px;
	background: #000;
	transition: .3s;
}
#panel-btn-icon:before{
	margin-top: -8px;
}
#panel-btn-icon:after{
	margin-top: 6px;
}
/* active */
html.sb-active #panel-btn #panel-btn-icon{
	background: transparent;
}
html.sb-active #panel-btn #panel-btn-icon:before, html.sb-active #panel-btn #panel-btn-icon:after{
	margin-top: 0;
}
html.sb-active #panel-btn #panel-btn-icon:before{
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}
html.sb-active #panel-btn #panel-btn-icon:after{
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}
#navi{
	padding-left:10px;
	background:#282828;
}
#navi a{
	display:block;
	padding:15px 0;
	color:#cccccc;
	border-bottom:1px solid #353535;
}
#navi ul{
	margin-left:3%;
}
#navi li{
	padding-left:25px;
}
#navi .home{
	background:url(../../images/cmn/ico_home.png) no-repeat 0 47%;
	background-size:16px;
}
#navi .news{
	background:url(../../images/cmn/ico_news.png) no-repeat 0 47%;
	background-size:15px;
}
#navi .ticket{
	background:url(../../images/cmn/ico_ticket.png) no-repeat 0 47%;
	background-size:15px;
}
#navi .stream{
	background:url(../../images/cmn/ico_stream.png) no-repeat 0 47%;
	background-size:15px;
}
#navi .pickup{
	background:url(../../images/cmn/ico_pickup.png) no-repeat 0 47%;
	background-size:12px;
}
#navi .report{
	background:url(../../images/cmn/ico_report.png) no-repeat 0 47%;
	background-size:12px;
}
#navi .special{
	background:url(../../images/cmn/ico_special.png) no-repeat 0 47%;
	background-size:15px;
}
#navi .support{
	padding:0;
}
#navi .support a{
	font-size:0.9em;
	padding:10px 0;
}
/* 検索 */
#header a.search{
	position:absolute;
	display:block;
	top:2px;
	right:0;
	width:50px;
	height:40px;
	background:url(../../images/cmn/ico_search.png) no-repeat 50% 45%;
	background-size:25px;
	text-indent:100%;
	overflow:hidden;
	white-space:nowrap;
	z-index:2;
}
.searchBox{
	display:none;
	position:absolute;
	z-index:2;
	top:45px;
	width:94%;
	height:40px;
	padding:10px 4%;
	background:#000;
	color:#fff;
	box-shadow:rgba(0, 0, 0, 0.1) 0px 1px 1px 0px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.1) 0px 1px 1px 0px;
}
.searchBox .inner{
	width:100%;
	margin:0 auto;
	background:#3c3c3c;
	border-radius:19px;
}
.searchBox .inner input{
	-webkit-appearance: none;
}
.searchBox .inner input[type="search"] {
	width:90%;
	margin:0;
	padding: 8px 3%;
	box-sizing:border-box;
	background:#3c3c3c;
	border:none;
	border-radius:19px;
	color:#ffffff;
	font-size:14px;
}
input[type="search"]::-webkit-input-placeholder {
	color:#555555;
}
.searchBox input[type="image"] {
	position:absolute;
	top:12px;
	right:4.5%;
	width:35px;
}

/* ========================================

	フッター
	
========================================== */
#footer{
	position:relative;
	padding:10px 0;
	background:#e2e2e2;
	color:#555555;
	font-size:11px;
	text-align:center;
}

/* ========================================

	コンテンツ
	
========================================== */
h2{
	font-size:18px;
	text-align:center;
	margin:25px 0 15px 0;
}
h2:after{
	content:'';
	display:block;
	width:70px;
	margin:3px auto 0 auto;
	padding: 0 0 5px;
	border-bottom:4px solid #333;
}

#contents{
	padding:45px 0 10px 0;
	background:#e2e2e2;
}
#top #contents{
	padding:55px 3% 10px 3%;
}
.ph img{
	width:100%;
}
.date{
	margin:7px 0;
	font-size:12px;
	color:#999999;
}
.cate{
	margin: 0 5px 0 0;
	padding: 0 5px 0 18px;
	background:#bfbfbf;
	font-size:11px;
	color:#fff;
	border-radius:2px;
}
.lead{
	text-align: justify;
}
a.more{
	display:block;
	width:55px;
	height:55px;
	margin:20px auto;
	background: url(../../images/cmn/ico_more.png) no-repeat 50% 65% #c0c0c0;
	background-size:35px;
	color:#fff;
	border-radius:30px;
	text-indent:-100%;
	overflow:hidden;
	white-space:nowrap;
}
#top .flex-control-nav{
	text-align:center !important;
}

/* 記事一覧
------------------------------------------ */

/* トップ最新 */

.topLatest li{
	width:48.5%;
	margin: 0 3% 10px 0;
	float:left;
	background:#000;
	color:#fff;
	font-size:11px;
	line-height:1.5em;
}
.topLatest li:nth-child(odd){
	margin-right:0;
}
.topLatest li a{
	display:block;
}
.topLatest li .lead{
	padding:8px;
	color:#fff;
}
.topLatest li:first-child{
	width:100%;
	float:none;
	margin-right:0;
	font-size:12px;
}

/* 記事一覧 */
.articleList {
	margin:10px 3% 0 3%;
}
#top .articleList {
	margin:10px 0 0 0;
}
.articleList li{
	margin: 0 0 10px 0;
	background:#fff;
}
.articleList li a{
	display:block;
	padding:10px;
}
.articleList li a:after{
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.articleList h3{
	font-size:19px;
	padding:3px 0 0;
}
.articleList li .lead{
	margin:10px 0 0;
	font-size:13px;
	line-height:1.5em;
	color:#000;
}
.articleList li.stream .cate{
	background:url(../../images/cmn/ico_s_stream.png) no-repeat 5px 50% #bfbfbf;
	background-size:10px;
}
.articleList li.report .cate{
	background:url(../../images/cmn/ico_s_report.png) no-repeat 5px 50% #bfbfbf;
	background-size:8px;
}
.articleList li.pickup .cate{
	background:url(../../images/cmn/ico_s_pickup.png) no-repeat 5px 50% #bfbfbf;
	background-size:9px;
}
.articleList li.special .cate{
	background:url(../../images/cmn/ico_s_special.png) no-repeat 5px 50% #bfbfbf;
	background-size:11px;
}
.articleList li.news .cate{
	background:url(../../images/cmn/ico_s_news.png) no-repeat 5px 50% #bfbfbf;
	background-size:10px;
}
.articleList li.ticket .cate{
	background:url(../../images/cmn/ico_s_ticket.png) no-repeat 5px 50% #bfbfbf;
	background-size:10px;
}
.articleList li.stream .ph,
.articleList li.report .ph,
.articleList li.news .ph{
	float:right;
	width:80px;
	margin: 10px 0 10px 7px;
}

/* 下層共通
------------------------------------------ */
.box{
	padding:10px 4%;
	background:#fff;
}
.box.tit{
	margin-bottom:10px;
}
h4.title{
	font-size:17px;
	line-height:1.4em;
	text-align: justify;
}
h5.title{
	margin:30px 4% 15px 4%;
	padding:0 0 0 10px;
	font-size:16px;
	font-weight:bold;
	border-left:5px solid #afafaf;
}
/* 連載タイトル画像 */
.titImage {
	margin:20px 0 0;
}
.titImage img{
	width:100%;
}
/* 本文 */
.date a{
	padding: 0 0 0 10px;
}
h4.title,
.text{
	text-align: justify;
}
.text{
	font-size:14px;
	margin-top:10px;
	line-height:1.7em;
}
#stream #sb-site .text{
	margin-top:0;
}

#vdo_bf,
#vdo_bf2{
	position:relative;
	border:none!important;
	font-size:20px!important;
}
#vdo_bf2:after,
#vdo_bf:after{
	position:absolute;
	margin:-0.5rem 0 0 -0.5em;
	top:50%;
	left:50%;
	font-family: 'WebHostingHub-Glyphs';
	content:'\f17e';
	font-weight:normal;
	font-size:100px;
	color:rgba(255,255,255,0.6);
}
#vdo_bf img,
#vdo_bf2 img{
	width:100%;
	background-repeat:no-repeat;
	background-position: 50%;
	background-color:#000;
	background-size:cover;
}
.text p{
	margin-bottom:1em;
}
.author,
.credit{
	margin-top:10px;
	font-size:12px;
	text-align:right;
	line-height:1.4em;
}
.text .pageNavi{
	text-align:right;
}
.text .pageNavi a{
	display:inline-block;
	padding:0 10px;
	background:#ff2a68;
	color:#fff;
	font-weight:bold;
}
.text .pageNavi a:after{
	font-family: 'WebHostingHub-Glyphs';
	content:'\f488';
	font-weight:normal;
	font-size:0.85em;
}
.text hr{
	border:none;
	border-top:1px solid #ddd;
	margin:10px 0;
}
.text .image.left{
	margin:0 0 10px 0;
}
.text img{
	width:100%;
}
.text dt{
	padding:5px 0;
	font-weight:bold;
}
.text dd{
	margin-bottom:5px;
}
#special .article dt{
	margin:15px 0;
	font-weight:bold;
}
/* スライド */
#report .flexslider{
	margin-bottom:30px;
}
/* 動画 */
.movie{
	margin-top:10px;
}
.text iframe{
	width:100%!important;
	height:auto;
}
.youtubeWrap{
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}
.youtubeWrap iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%!important;
	height:100%!important;
}
/* セットリスト */
.setlist{
	background:#fff;
}
.release dl.detail dt,
.setlist dt{
	padding:10px 10% 10px 4%;
	font-weight:bold;
	background:url(../../images/cmn/ico_plus.png) no-repeat 97% 50%;
	background-size:17px;
}
.setlist h3{
	padding:10px 10% 10px 4%;
}
.release dl.detail dt.open,
.setlist dt.open{
	background:url(../../images/cmn/ico_minus.png) no-repeat 97% 50%;
	background-size:17px;
}
.setlist dd{
	display:none;
	padding:0;
}
.setlist ol{
	margin:5px 0 10px 0!important;
	list-style: inside decimal;

}
.setlist li{
	padding:5px 4%;
}
.setlist li:nth-child(odd){
	background:#f8f8f8;
}
.setlist p{
	padding:10px 4%;
	font-weight:bold;
}
/* リリース情報 */
.release .ph{
	float:left;
	width:115px;
	height:115px;
	margin-right:10px;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:auto 100%;
}
.release .title{
	font-weight:bold;
}
.release .sale,
.release .label{
	margin-top:5px;
	font-size:12px;
	line-height:1.2em;
}
.release dl.detail{
	margin-top:	8px;
	background:#f8f8f8;
	border:1px solid #ddd;
}
.release dl.detail dt{
	padding:6px 10px;
	font-weight:bold;
	text-align:center;
}
.release dl.detail dd{
	display:none;
	padding:0 10px 10px;
	font-size:12px;
}
.release .buy {
	margin-top:8px;
	padding:5px 8px;
	background:#f8f8f8;
	border:1px solid #ddd;
}
.release .buy ul{
	margin-top:3px;
}
.release .buy li{
	display:inline-block;
	margin: 0 4px 3px 0;
}
.release .buy a{
	display:block;
	margin-right:5px;
	padding:2px 0;
	font-size:12px;
	line-height:1;
}
.release .buy a:before{
	font-family: 'WebHostingHub-Glyphs';
	content:'\f3c9';
	margin-right:2px;
	font-size:0.85em;
}
/* お知らせ */
.info{
	font-size: 14px;
}
/* リンク */
.linkList{
	background:#fff;
}
.linkList br{
	display:none;
}
.linkList li:last-child{
	margin-bottom:0;
}
.linkList li a{
	display:block;
	padding: 10px 4%;
	border-bottom:1px solid #ddd;
}
.linkList li a:after{
	margin-left:5px;
	font-family: 'WebHostingHub-Glyphs';
	content:'\f332';
	font-size:0.8em;
	color:#999999;
	font-weight:normal;
}
.linkList li:last-child a{
	border:none;
}
/* タグ */
.tag {
	margin:30px 4% 0 4%;
}
.tag li{
	display:inline-block;
	margin: 0 2px 5px 0;
}
.tag li a{
	display:block;
	padding:2px 5px;
	background:#fff;
	border:1px solid #dddddd;
	border-radius:2px;
	font-size:12px;
}
.tag li a:before{
	content:'#';
}
/* SNS */
.sns {
	margin:20px 4% 0 4%;
}
.sns li{
	float:left;
	width:32%;
	margin-right:2%;
}
.sns li.line{
	margin-right:0;
}
.sns a{
	display:block;
	height:16px;
	padding:10px 0;
	text-align:center;
	color:#fff;
	line-height:1;
}
.sns a span{
	font-size:16px;
}
.sns .facebook a{
        background:url(../../images/facebook.png) no-repeat center 50% #385aa7;
        background-size:25px;
}
.sns .twitter a{
        background:url(../../images/twitter.png) no-repeat center 50% #28a9e0;
        background-size:30px;
}
.sns .line a{
	background:#2cbf13;
	font-weight:bold;
}

#pickup .image{
	margin-bottom:10px;
}


/*吹き出しスタイル*/
.arrow_answer,
.arrow_question {
    position: relative;
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(242,242,242,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 );
    border: 1px solid #CCCCCC;
    border-radius: 10px;
    width:75%;
    font-size: 12px;
    padding:3%;
line-height:1.6em;
}


.arrow_question {
    float: right;
}

.arrow_answer:after,
.arrow_answer:before,
.arrow_question:after,
.arrow_question:before {
    top: 0;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}


.arrow_question:after,
.arrow_question:before {
    right: 100%;
}

.arrow_answer:after,
.arrow_answer:before{
	left: 100%;
}

.arrow_answer:after,
.arrow_question:after {
    border-color: rgba(255, 255, 255, 0);
    border-width: 8px;
    margin-top: 16px;
}

.arrow_answer:after{
    border-left-color: #fff;
}

.arrow_question:after{
    border-right-color: #fff;
	
}

.arrow_answer:before,
.arrow_question:before {
    border-color: rgba(200, 200, 200, 0);
    border-width: 9px;
    margin-top: 15px;
}

.arrow_answer:before{
    border-left-color: #CCCCCC;
}

.arrow_question:before {
    border-right-color: #CCCCCC;	
}

.question_image{
	float: left;
	width:15%;
}

.answer_image{
	float: right;
	width:15%;
}

.answer_image img,
.question_image img{
	border-radius: 50px;
	width: 100%
}

.question_Box{
	width: 100%;
	overflow: hidden;
	margin-bottom: 5%;
}

/* yubiinterview */
.interview .artistInfo .artistTit:after,.interview .contentsList li:after{
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.interview .lead {
	margin: 0 0 20px;
	font-weight: bold;
}
.interview .artistInfo {
    margin: 0 0 30px;
    padding: 12px;
    background: #F8F8F8;
}
.interview .artistInfo .tit {
	font-size: 13px;
	text-align: center;
	font-weight: bold;
	margin-bottom: 18px;
}
.interview .artistInfo .tit span {
	position: relative;
	padding-bottom: 8px;
	color: #000;
}
.interview .artistInfo .tit span:after {
	content: "";
	width: 50%;
	height: 1px;
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -25%;
	background: #000;
}
.interview .artistInfo .thumb {
	width: 100%;
	margin: 0 0 15px;
	line-height: 0;
	position: relative;
}
.interview .dummy {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.interview .artistInfo p.name {
	font-size: 18px;
	font-weight: bold;
	margin: 0 0 1em;
	text-align: center;
}
.interview .artistInfo .txt {
	margin-bottom: 0;
	font-size: 12px;
	line-height: 1.5;
}
.interview .contentsList li {
	margin: 0 0 20px;
	opacity: 0;
	-webkit-transform: translate3d(0, 30px, 0);
	transform: translate3d(0, 30px, 0);
}
.interview .contentsList li .ico {
	width: 45px;
	height: 45px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: 50px;
}
.interview .contentsList li.interviewer .ico { float: right;}
.interview .contentsList li.artist .ico { float: left;}
.interview .contentsList li.interviewer .txtBox {
	margin-right: 50px;
}
.interview .contentsList li.artist .txtBox {
	margin-left: 50px;
}
.interview .contentsList li.artist .txtBox .name { font-size: 11px; line-height: 1.2; margin: 0 0 5px 10px;}
.interview .contentsList li .txtBox .txt {
	display: inline-block;
	max-width: 100%;
	padding: 8px 8px 8px 10px;
	border-radius: 10px;
	position: relative;
	z-index: 1;
    font-size: 15px;
    line-height: 1.6;
}
.interview .contentsList li.interviewer .txtBox .txt {
	float: right;
	margin-right: 10px;
	background: #ff497e;
	color: #fff;
}
.interview .contentsList li.artist .txtBox .txt {
	margin-left: 10px;
	background: #efefef;
}
.interview .contentsList li .txtBox .txt:before {
	content: "";
	position: absolute;
	top: 8px;
	border-top: 2px solid transparent;
	border-bottom: 7px solid transparent;
	z-index: 1;
}
.interview .contentsList li.artist .txtBox .txt a { color: #333333!important;}
.interview .contentsList li.interviewer .txtBox .txt a { color: #ffffff!important;}
.interview .contentsList li.interviewer .txtBox .txt:before {
	right: -17px;
	border-right: 7px solid transparent;
	border-left: 10px solid #ff497e;
}
.interview .contentsList li.artist .txtBox .txt:before {
	left: -17px;
	border-left: 7px solid transparent;
	border-right: 10px solid #efefef;
}
.interview .contentsList li .txtBox .txt .ph,.interview .contentsList li .txtBox .image .ph{
	position: relative;
	line-height: 0;
	margin-bottom: 0;
}
.interview .contentsList li .txtBox .txt .ph { padding-top: 15px;}
.interview .contentsList li .txtBox .txt .ph img {
	width: 100%;
	border-radius: 5px;
}
.interview .contentsList li .txtBox .image { margin-left: 10px;}
.interview .contentsList li .txtBox .image .ph img { width: 100%; border-radius: 10px;}
.interview .contentsList li.fadeInUp {
	-webkit-transition: .4s ease-out .7s;
	transition: .4s ease-out .7s;
	opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}