html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,main {margin:0;padding:0;border:0;font-size:100%;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main {display:block;}
body {font-family:Verdana,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;line-height:1;}
ol,ul {list-style:none;}
blockquote,q {quotes:none;}
blockquote:before,blockquote:after,q:before,q:after {content:'';content:none;}
table {border-collapse:collapse;border-spacing:0;}
wbr:after {content:"\00200B";}

/*	TBS reset
============================== */
.alt {position:absolute;top:-5000px;left:-9999px;}
.clearfix:after {content:"";clear:both;display:block;}
.hide-txt {text-indent:110%;white-space:nowrap;overflow:hidden;}
.fp-causion {display:none;}
.nocontxt {-webkit-touch-callout: none;-webkit-user-select: none;user-select: none;-webkit-user-drag:none;}
.nocontxt img {pointer-events: none;}
@media all and (min-width:768px) {
.alt-pc {position:absolute;top:-5000px;left:-9999px;}
.clearfix-pc:after {content:"";clear:both;display:block;}
.hide-txt-pc {text-indent:110%;white-space:nowrap;overflow:hidden;}
}
@media all and (max-width:767px) {
.alt-smp {position:absolute;top:-5000px;left:-9999px;}
.clearfix-smp:after {content:"";clear:both;display:block;}
.hide-txt-smp {text-indent:110%;white-space:nowrap;overflow:hidden;}
}
div.embed-tbsplayer {
background-color:#000;
position:relative;
height:0;
padding-top:56.25%;
}
div.embed-tbsplayer .tbs-player {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
div.embed-tbsplayer-audio {
background-color:#fff;
}
div.embed-tbsplayer-audio .tbs-player {
height:46px;
}
div.lbx-overlay {
z-index:10000;position:absolute;background-color:#000;width:100%;height:100%;left:0;top:0;right:0;bottom:0;opacity:0.9;
}

/* ============================
	common css
============================ */

/* General
=================================== */

body { background-color: #000; }
#con-body { background-image:url(../img/bg2.gif), url(../img/bg1.gif); background-repeat:repeat-x, repeat; background-position:center 184px, center top; font-family:Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; color:#333; }

.cover { background:url(/img/cover.gif); display:block; width:100%; height:100%; }

.lazy { display:block; position:relative; }

@font-face {
  font-family: 'Rye';
  src: url('/um/library/fonts/Rye/Rye-Regular.ttf')  format('truetype');
}

.txts { font-size:80%!important; }
.txtb { font-size:120%!important; }
.txtbb { font-size:140%!important; }

.txtc { text-align:center!important; }

.cRed { color:#ff0000;}
.cYel { color:#fd0;}
.cGrn { color:#305c00;}
.cBlu { color:#0060aa;}
.cOrg { color:#e96e00;}

a { color:#e7810a; }

#pagebody { width:980px; margin:auto; }
#pagebody main { padding:15px 15px 1px 15px; background:url(../img/main_bg.jpg); /*background-color:#94d1f2;*/ }


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

#header h1 a { display:block; width:980px; height:216px; background:url(../img/header.jpg) no-repeat; text-indent:-9999px; }

/* Main
=================================== */

.box { border-radius:20px; box-shadow:2px 2px 4px rgba(0,0,0,0.2); margin-bottom:15px; }
.box header { background:url(../img/header_bg.png) top center; background-color:#008bac; padding:10px 15px 10px 20px; border-radius:20px 20px 0 0; box-shadow:0px -2px 6px inset rgba(0,0,0,0.3); }
.box header:after { /* clearfix */ content:""; clear:both; display:block; }
.box-ttl-e { float:left; font-family:'Rye', cursive, serif; font-size:32px; letter-spacing:0.1px; color:#fee300; font-weight:normal; text-shadow:2px 2px 4px rgba(0,0,0,0.3); }
.box-ttl-j2 { float:left; font-size:23px; line-height:30px; letter-spacing:0.1px; color:#fee300; font-weight:bold; }
.box-ttl-j { float:right; padding-top:12px; font-size:16px; color:#fee300; text-shadow:2px 2px 4px rgba(0,0,0,0.3); }
.box-body { padding:15px; border-radius:0 0 20px 20px; background:url(../img/box_bg_logo.jpg) bottom 10px right 10px no-repeat; background-color:#fff; }
.txt { font-size:90%; line-height:170%; margin-bottom:0.5em; }
.btn { text-align:center; }
.btn a { display:block; margin:0 auto 0.5em auto; padding:0.7em; width:40%; background-color:#008bac; color:#fee300; border-radius:0.6em; font-size:90%; line-height:120%; font-weight:bold; text-decoration:none; box-shadow:2px 2px 4px rgba(0,0,0,0.3); }
.btn a:hover { opacity:0.7; }

/* ----- 2 column ----- */
#box-top-2col:after { /* clearfix */ content:""; clear:both; display:block; }
#box-top-2col-left { float:left; width:635px; }
#box-top-2col-right { float:right; width:300px; text-align:center; }
#box-top-2col-left .box .box-body { min-height:200px; }

#box-2col:after { /* clearfix */ content:""; clear:both; display:block; }
#box-2col-left { float:left; width:468px; }
#box-2col-right { float:right; width:468px; }

/* ----- rectangle ----- */
#bn-rectangle { width:300px; margin:0 auto 10px auto; }
#s-sns { width:100%; }
#s-sns-tw, #s-sns-fb { display:inline-block; }
#s-sns-tw { position:relative; top:2px; margin-right: 0.5em; }

/* ----- info ----- */
#info-list dl { border-bottom:#666 1px dotted; margin-bottom:0.5em; padding-bottom:0.5em; }
#info-list dl:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
#info-list dl:after { /* clearfix */ content:""; clear:both; display:block; }
#info-list dl dt { float:left; width:6.0em; font-size:90%; line-height:160%; font-weight:bold; color:#e60012; }
#info-list dl dd { padding-left:6.0em; font-size:90%; line-height:160%; }

/* ----- artist ----- */
#artist-list ul { display:flex; flex-wrap:wrap; width:100%; }
#artist-list ul li { display:flex; position:relative; width:221px; margin:0 11px 11px 0; padding:12px; box-sizing:border-box; justify-content:center; align-items:center; text-align:center; background-color:#fff000; border:#ffea00 2px solid; box-shadow:1px 1px 2px rgba(0,0,0,0.2); border-radius:10px; word-break:break-word; font-size:95%; line-height:120%; color:#008bac; font-weight:bold; }
#artist-list ul li:nth-child(4n) { margin:0 0 11px 0; }
#artist-more { padding:10px; font-family:'Rye', cursive, serif; text-align:center; font-size:170%; letter-spacing:0.1px; color:#008bac; }

/* ----- artist pic ----- */
#artist-list-p ul { display:flex; flex-wrap:wrap; width:100%; }
#artist-list-p ul li { position:relative; width:296px; margin:0 15px 15px 0; box-sizing:border-box; justify-content:center; text-align:center; }
#artist-list-p ul li:nth-child(3n) { margin:0 0 15px 0; }
.ar-list-tmb { position:relative; display:block; width:296px; height:0; margin-bottom:5px; padding-top:75.0%; }
.ar-list-tmb-inner { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; }
#artist-more { padding:10px; font-family:'Rye', cursive, serif; text-align:center; font-size:150%; letter-spacing:0.1px; color:#008bac; }
.ar-list-t { display:block; }
.ar-list-t-t { display:inline-block; vertical-align:middle; padding:4px 0; word-break:break-word; font-size:16px; line-height:120%; color:#008bac; font-weight:bold; }
.newicon { display:inline-block; margin-left:0.5em; padding:4px 10px; border-radius:10px; background:#ffa520; color:#fff; font-size:12px; line-height:100%; }
.ar-list-t-song { display:block; font-size:15px;  line-height:160%; font-weight:bold; }
.ar-list-t-newsong { color:#ea5504; }
.ar-list-t-newsong-icon { display:inline-block; position:relative; top:-2px; padding:5px; border-radius:50%; background:#ea5504; color:#fffbc7; font-size:12px; line-height:100%; }
#ar-annotation { text-align:right; margin-bottom:10px; font-size:90%; }

/* ----- cast ----- */

.mc-box { margin:0 auto; }
#mc-nakai { width:220px; margin-bottom:20px; }
#mc-eto { width:150px; }

.mc-p { position:relative; display:block; width:100%; height:0; margin-bottom:5px; padding-top:133.33%; }
.mc-p-inner { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; }
.mc-t { text-align:center; font-size:16px; line-height:120%; color:#008bac; font-weight:bold; }


/* Footer
=================================== */

footer { height:50px; background:url(../img/footer.gif) 0 0 repeat-x; }
#footer-area { width:100%; height:100%; font-size:90%; line-height:120%; vertical-align: baseline; text-align:center; display:flex; justify-content:center; align-items:center; color:#fff; }
#footer-area a:hover { text-decoration:none; }
#f-copy { margin-right: 0.5em; }

/* ----- pagetop ----- */
#pagetop { position:fixed; z-index:10; bottom:-200px; right:20px; padding-bottom:20px; }
#pagetop a { display:block; width:3.0em; height:3.0em; border-radius:3.0em; background:url(../img/pagetop.png) center center no-repeat; background-size:cover; box-shadow:1px 1px 4px rgba(0,0,0,0.2); text-indent:-9999px; outline:none; }


/* ==================== Media Queries 767 ==================== */

@media all and (max-width: 767px) {

/* General
=================================== */

#pagebody { width:auto; }
#pagebody main { padding:10px; }

.txtb { font-size:100%!important; }
.txtbb { font-size:120%!important; }

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

#header h1 { position:relative; width:100%; height:0; padding-top:31.25%; }
#header h1 a { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-image:url(../img/header_smp.jpg); background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }


/* Main
=================================== */

.box { border-radius:10px; }
.box header { padding:10px 10px; border-radius:10px 10px 0 0; }
.box-ttl-e { font-size:25px; }
.box-ttl-j2 { font-size:18px; line-height:25px; }
.box-ttl-j { padding-top:7px; font-size:14px; }
.box-body { padding:10px; border-radius:0 0 10px 10px; background-image:none; }
.txt { font-size:85%; line-height:140%; }
.btn a { width:60%; }

/* ----- 2 column ----- */
#box-top-2col { margin-bottom:10px; }
#box-top-2col-left { float:none; width:auto; margin-bottom:10px; }
#box-top-2col-right { float:none; width:auto; }
#box-top-2col-left .box .box-body { min-height:auto; }

#box-2col-left { float:none; width:auto; margin-bottom:10px; }
#box-2col-right { float:none; width:auto; }

/* ----- artist ----- */
#artist-list ul li { width:48.5%; margin:0 2% 2vw 0; }
#artist-list ul li:nth-child(2n) { margin:0 0 2vw 0; }
#artist-more { font-size:120%; }

/* ----- artist pic ----- */
#artist-list-p ul li { width:31.8%; margin:0 2% 4vw 0; }
#artist-list-p ul li:nth-child(5n) { margin:0 2% 4vw 0; }
#artist-list-p ul li:nth-child(3n) { margin:0 0 4vw 0; }
.ar-list-tmb { width:100%; }
#artist-more { font-size:120%; }

/* ----- cast ----- */

#mc-box { float:none; width:220px; margin:0 auto 15px auto; }

/*  Footer
=================================== */

footer { height:auto; background:url(../img/footer_smp.gif) 0 0 repeat; }
#footer-area { display:block; font-size:80%; padding:10px; box-sizing:border-box; }

}


/* ==================== Media Queries 549 ==================== */

@media all and (max-width: 549px) {

.box header { text-align:center; padding:10px 10px 10px 10px; }
.box-ttl-e { float:none; font-size:27px; }
.box-ttl-j { float:none; font-size:14px; padding-top:10px; }

#info-list dl dt { float:none; width:auto; line-height:140%; }
#info-list dl dd { padding-left:0; line-height:140%; }

/* ----- artist ----- */
#artist-list ul li { width:100%; margin:0 0 11px 0; }


/* ==================== Media Queries 499 ==================== */

@media all and (max-width: 499px) {

/* ----- artist ----- */
#artist-list-p ul li { width:48.5%; margin:0 3% 4vw 0; }
#artist-list-p ul li:nth-child(5n),
#artist-list-p ul li:nth-child(3n) { margin:0 3% 4vw 0; }
#artist-list-p ul li:nth-child(2n) { margin:0 0 4vw 0; }

}