@charset "UTF-8";

@font-face {
  font-family: 'fontello';
  src: url('font/fontello.eot?57563870');
  src: url('font/fontello.eot?57563870#iefix') format('embedded-opentype'),
       url('font/fontello.woff2?57563870') format('woff2'),
       url('font/fontello.woff?57563870') format('woff'),
       url('font/fontello.ttf?57563870') format('truetype'),
       url('font/fontello.svg?57563870#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?57563870#fontello') format('svg');
  }
}
*/
[class^="icon-"]:before, [class*="icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: never;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-cancel:before { content: '\e800'; } /* '' */
.icon-soundcloud:before { content: '\e801'; } /* '' */
.icon-down-open:before { content: '\e802'; } /* '' */
.icon-up-open:before { content: '\e803'; } /* '' */
.icon-right-open:before { content: '\e804'; } /* '' */
.icon-left-open:before { content: '\e805'; } /* '' */
.icon-twitter:before { content: '\e806'; } /* '' */
.icon-facebook-official:before { content: '\e807'; } /* '' */
.icon-rss:before { content: '\e808'; } /* '' */
.icon-menu:before { content: '\e80a'; } /* '' */
.icon-youtube-play-1:before { content: '\f16a'; } /* '' */
.icon-instagram:before { content: '\f16d'; } /* '' */

/* RESET - ADAPTED FROM MEYER RESET URL - http://meyerweb.com/eric/tools/css/reset/ LICENSE - PUBLIC DOMAIN */
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, caption, canvas, center, cite, code,dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, form, footer, header, hgroup, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, main, small, span, strike, strong, sub, summary, sup, tt, table, tbody, textarea, tfoot, thead, time, tr, th, td,u, ul, var, video{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;margin:0;padding:0;border:0;outline:0;background:transparent;}article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main{display:block;}ol, ul{list-style:none;}blockquote, q{quotes:none;}table{border-collapse:collapse;border-spacing:0;}body{line-height:1;}

/* YUI 3.14.1 (build 63049cb) Copyright 2013 Yahoo! Inc. All rights reserved. Licensed under the BSD License. http://yuilibrary.com/license/ */
body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif}table{font-size:inherit;font:100%}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%}#yui3-css-stamp.cssfonts{display:none}

/*12 COLUMN :RESPONSIVE GRID SYSTEM DEVELOPER :DENIS LEBLANC URL :http://responsive.gs VERSION :3.0 LICENSE :GPL & MIT */
/* SET ALL ELEMENTS TO BOX-SIZING :BORDER-BOX */
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;
*behavior:url(boxsizing.htc);}

/*MAIN CONTAINER Set the width to whatever you want the width of your site to be. */
.container{max-width:1040px; margin:0 auto;}

/*SELF CLEARING FLOATS - CLEARFIX METHOD */
.container:after,.row:after,.col:after,.clr:after,.group:after{content:"";display:table;clear:both;}

/* DEFAULT ROW STYLES Set bottom padding according to preference */
.row{padding:auto auto 20px;}

/* DEFAULT COLUMN STYLES */
.col{display:block;float:left;width:100%;}

@media (min-width:769px){
.gutters .col{margin-left:2%;}
.gutters .col:first-child{margin-left:0;}
}

/*COLUMN WIDTH ON DISPLAYS +768px You might need to play with media queries here to suite your design. */
@media(min-width:769px){
.span_1 {width:8.33333333333%;}
.span_2 {width:16.6666666667%;}
.span_3 {width:25%;}
.span_4 {width:33.3333333333%;}
.span_5 {width:41.6666666667%;}
.span_6 {width:50%;}
.span_7 {width:58.3333333333%;}
.span_8 {width:66.6666666667%;}
.span_9 {width:75%;}
.span_10{width:83.3333333333%;}
.span_11{width:91.6666666667%;}
.span_12{width:100%;}

.gutters .span_1 {width:6.5%;}
.gutters .span_2 {width:15.0%;}
.gutters .span_3 {width:23.5%;}
.gutters .span_4 {width:32.0%;}
.gutters .span_5 {width:40.5%;}
.gutters .span_6 {width:49.0%;}
.gutters .span_7 {width:57.5%;}
.gutters .span_8 {width:66.0%;}
.gutters .span_9 {width:74.5%;}
.gutters .span_10{width:83.0%;}
.gutters .span_11{width:91.5%;}
.gutters .span_12{width:100%;}
}

// BASE COLOR
@white:#fff;
@black:#444;
@grayD:#999;
@gray:#ccc;
@grayL:#f5f5f5;
@red:#903;

// KEY COLOR
@green:#C0E5D3;
@greenL:#e4f4ec;
@greenD:#49b27f;
@greenDD:#35825d;
@yellow:#dbb400;
@brownL:#ECECBC;
@pink:#f39;
@pinkL:#fde;

// LESS
@ncc:no-repeat center center;

// MIXIN
.trans{-webkit-transition:0.3s; -moz-transition:0.3s; -o-transition:0.3s; -ms-transition:0.3s; transition:0.3s;}
.fb{font-weight:bold;}
.tac{text-align:center;}
.tdn{text-decoration:none;}
.tdu{text-decoration:underline;}
.bgsc{background-size:cover;}
.inline{display:-moz-inline-box; display:inline-block;}

/*BASE*/
html{height:100%;}
body{height:100%; line-height:1; color:@black; -webkit-text-size-adjust:100%;
font-family:"Libre Baskerville","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","游明朝",YuMincho,"Helvetica Neue","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","Noto Sans Japanese",Roboto,"Droid Sans","游ゴシック",YuGothic,"メイリオ",Meiryo,sans-serif;
background:-webkit-gradient(linear, left top, right bottom, from(@grayL), color-stop(0.25, @grayL), color-stop(0.25, white), color-stop(0.5, white), color-stop(0.5, @grayL), color-stop(0.75, @grayL), color-stop(0.75, white), to(white));
background:-moz-linear-gradient(-45deg, @grayL 25%, white 25%, white 50%, @grayL 50%, @grayL 75%, white 75%, white);
background:linear-gradient(-45deg, @grayL 25%, white 25%, white 50%, @grayL 50%, @grayL 75%, white 75%, white);
background-attachment:fixed;
background-size:56px 56px;
animation:anim 30s linear infinite;}
@keyframes anim{
	0% {background-position: 0 0;}
	100% {background-position: 40% 40%;}
}
img{max-width:100%; height:auto; vertical-align:middle;}

/*CF*/
.cf:before,.cf:after{content:" ";display:table;}.cf:after{clear:both;}.cf{*zoom:1;}
/*LINK*/
a:link{color:@black; .tdu; .trans}
a:visited{color:@black; .tdu;}
a:hover{color:@grayD; .tdu;}
a:active{color:@black; .tdn;}
a img{border:none; .tdn;}
a img:hover{border:none; opacity:0.6; .tdn;}

/*LETTER*/
strong{.fb;}
em{background:linear-gradient(transparent 60%, @yellow 60%);}
.wf{font-family:'Amatic SC',cursive;}
.attention{color:@red;}
.small{font-size:85%;}
::selection{background:@black; color:@white;}
::-moz-selection{background:@black; color:@white;}

/*SP NAV*/
button#menubtn{position:absolute; right:10px; top:10px; line-height:42px; height:42px; width:42px;}
button.btn{background-color:@gray; color:@white; border:none;}
button.btn:after{content: '\e80a'; font-family:'fontello'; vertical-align:top; font-size:154%;}
button.active:after{content: '\e800'; font-family:'fontello'; vertical-align:top; font-size:154%;}
nav#spmenu{position:absolute; top:58px; width:100%; background:rgba(0,0,0,0.85); z-index:9999;
	ul{width:100%; .tac;
		display:-webkit-flex; display:flex;
		-webkit-flex-flow:row wrap; flex-flow:row wrap; 
		-webkit-justify-content:space-between; justify-content:space-between;
		-webkit-align-items:flex-start; align-items:flex-start;
		li{width:50%;
			a{display:block; line-height:64px; height:64px; color:@white; .tdn; font-size:161%;}
		}
		li.sns{width:25%;
			img{width:26px;}
		}
		li:first-child{width:100%;}
	}
}

/*LOADING*/
div#loadingWrap{position:fixed; top:0; left:0; width:100%; height:100%; background:@white; z-index:9999;
	img{position:absolute; top:50%; left:50%; max-width:69px; margin:-34.5px 0 0 -34.5px; width:auto;}
}

/*LAYER*/
div.layer{position:relative; z-index:100;}

/*HEADER*/
header,footer{width:100%;}
header{padding:20px 20px 20px; margin:0 0 20px; background:rgba(255, 255, 255, 0.7);
	h1{width:160px;}
}

/*FOOTER*/
footer{.tac; color:@black; padding:16px 0 20px; background:rgba(255, 255, 255, 0.7);
	small{font-size:77%; line-height:1.8;}
	a:link{color:@black;}
	a:visited{color:@black;}
	a:hover{color:@brownL;}
	a:active{color:@black;}
}

/*MAIN*/
main{padding:0 0 15px;}

/*SLIDER*/
div.topslider{margin:0 0 20px;}
div.topnewsbox{padding:10px 30px 30px; background:rgba(255, 255, 255, 0.7); margin:0 0 20px;
	h2{font-size:197%; letter-spacing:2px; padding:20px 0; margin-bottom:10px; text-align:right; background:url('../img/bg/cat.png') no-repeat center left; background-size:60px 39px; .fb;}
	article{line-height:1.7; padding:10px 0; border-top:1px @gray dashed;
		span{color:@grayD; letter-spacing:1px;}
	}
	article:last-child{border-bottom:1px @gray dashed;}
}
div.topbnbox{margin:0 0 20px; padding:0 16px;}
div.topmovbox{padding:0 16px;
	div{margin:0 0 20px;}
}

/*PAGE*/
.pagecon{}
.pageh2{background:url('../img/bg/h2.jpg'); .bgsc; padding:60px 0; margin:0 0 20px;  -webkit-filter:grayscale(1) contrast(150%); filter:gray; filter:grayscale(1) contrast(150%);}
.pagetitle{color:@white; font-size:300%; text-indent:4px; letter-spacing:4px; text-shadow:1px 1px 1px @black; .tac; .fb;}

.category-info .pageh2{background:url('../img/bg/info.jpg') @ncc; .bgsc;}
.category-live .pageh2{background:url('../img/bg/live.jpg') @ncc; .bgsc;}
.category-discography .pageh2{background:url('../img/bg/discography.jpg') @ncc; .bgsc;}
.category-movie .pageh2{background:url('../img/bg/movie.jpg') @ncc; .bgsc;}
.page-profile .pageh2{background:url('../img/bg/profile.jpg') @ncc; .bgsc;}
.page-contact .pageh2{background:url('../img/bg/contact.jpg') @ncc; .bgsc;}


div.pagebody{padding:0 15px;
	article{padding:15px; margin:0 0 15px; background:rgba(255, 255, 255, 0.8);
		span.postdate{color:@grayD; font-size:124%; letter-spacing:1.5px; .fb;}
		h3{font-size:124%; padding:10px 0; margin-bottom:15px; line-height:1.5; border-top:1px solid @gray; border-bottom:1px solid @gray; .fb;
			background:url('../img/bg/cat.png') no-repeat center left; background-size:60px 39px;}
		div.postbody{line-height:1.7; word-wrap:break-word;
			section{margin-bottom:15px;}
			section:last-child{margin-bottom:0;}
			p{margin-bottom:15px;}
			p:last-child{margin-bottom:0;}
			h4{font-size:116%; padding:0 0 10px; margin-bottom:10px;}
		}
	}
}

/*PAGENATION*/
div.pagenation{font-size:77%;
	a div{background:@black; color:@white; display:block; border-radius:6px; padding:12px; .fb; .tdn;}
	a div:hover{background:@gray;}
	div.next{float:right; margin:0 0 15px;}
	div.prev{float:left; margin:0 0 15px;}
	div.back{.tac;}
}

/*YOUTUBE*/
a.youtube img{-webkit-filter:grayscale(100%) brightness(150%) contrast(100%); .trans;}
a.youtube img:hover{-webkit-filter:grayscale(0%) brightness(130%) contrast(180%) blur(2px) saturate(200%); opacity:1;}

/*PAGE TABLE*/
table{width:100%;
	tr{width:100%;
		th{padding:10px; width:100%; display:block; background:@grayL; text-align:left;}
		td{padding:10px; width:100%; display:block;}
	}
}

/*CONTACT*/
span.required{background:@black; color:@white; font-size:85%; padding:5px 10px; border-radius:5px; .fb;}
table.mailform textarea{width:100%; padding:10px; resize:vertical; background:@white; border:1px solid #ddd;}
input.wpcf7-text{width:100%; padding:10px;}
input[type="submit"],button{-webkit-appearance:button; cursor:pointer; outline:none;}
input.soushin{width:100%; height:60px; line-height:60px; position:relative; .inline; .fb; font-size:124%; .tac; .tdn; border:none; color:@white;
border-radius:10px; background-color:@grayD; box-shadow:0 3px 0 @black; -webkit-transition:none; transition:none; cursor:pointer;}
input.soushin:hover{background-color:@gray; box-shadow:0 3px 0 @grayD;}
input.soushin:active{top:3px;box-shadow:none;}
img.ajax-loader{float:left; width:auto!important;}

/*BORDER*/
div.border{position:fixed; background:@brownL; z-index:10000;}
div#border-t{height:4px;left:0;top:0;width:100%;}
div#border-r{height:180%;right:0;top:0;width:4px;}
div#border-b{height:4px;left:0;bottom:0;width:100%;}
div#border-l{height:180%;left:0;top:0;width:4px;}

/****************************************************/
/************************ PC ************************/
/****************************************************/
@media(min-width:769px){

body{}
nav#spmenu{display:none;}
.sp{display:none;}
.leftbox{padding-right:20px;}
.rightbox{padding-left:20px;}

/*HEADER*/
header{position:relative; padding:45px 20px 20px; margin:0 0 60px;
	h1{width:350px; float:none; margin:0 auto 40px;}
	div.headnav{
		nav{.tac;
			ul{font-size:154%; .fb;
				li{.inline; letter-spacing:2px;
					a{display:block; padding:10px 15px;}
					a:link{color:@black; .tdn;}
					a:visited{color:@black; .tdn;}
					a:hover{color:@black; .tdn;}
					a:active{color:@black; .tdn;}
				}
			}
		}
		nav.snsnav{position:absolute; top:24px; right:24px;
			ul{font-size:139%; text-align:right;
				li{.inline; letter-spacing:0;
					a{padding:0 5px;
						i{font-size:139%; vertical-align:middle;}
						img{width:30px;}
					}
				}
				li:last-child{
					a{padding:0 12px;}
				}
			}
		}
	}
}

/*MAIN*/
main{padding:0 60px 60px;}
.home main{padding:0 0 60px;}

/*SLIDER*/
div.topslider{margin:0 0 60px;}
div.topbnbox{margin:0 0 20px; padding:0;}
div.topmovbox{padding:0;
	div{margin:0 0 20px;}
}
div.topcontents{
	display:-webkit-flex; display:flex;
	-webkit-flex-flow:row nowrap; flex-flow:row nowrap; 
	-webkit-justify-content:space-between; justify-content:space-between;
	-webkit-align-items:flex-start; align-items:flex-start;
	section{width:48.5%;}
}

/*PAGE*/
.pagecon{background:rgba(236,236,188, 0.2);}
.pageh2{padding:120px 0; margin:0 0 60px;}
.pagetitle{font-size:500%; text-indent:10px; letter-spacing:10px;}

div.pagebody{padding:0 60px;
	article{padding:60px; margin:0 0 60px;
		h3{font-size:154%; padding:20px 0 20px 70px; margin-bottom:30px;}
		div.postbody{
			section{margin-bottom:20px;}
			section:last-child{margin-bottom:0;}
			p{margin-bottom:20px;}
			p:last-child{margin-bottom:0;}
			h4{font-size:124%; padding:0 0 10px; margin-bottom:10px; border-bottom:1px solid @grayD;}
		}
	}
}

.category-live div.pagebody,.category-discography div.pagebody{padding:0 60px 60px;
	article{padding:0 60px 30px; margin:0;}
	article:first-child{padding:60px 60px 30px;}
	article:last-of-type{padding:0 60px 60px;}
}

.category-movie .pageh2{padding:120px 0; margin:0;}
.category-movie div.pagebody{padding:0 10px;
	article{padding:20px; margin:0; background:none;
		h3{padding:0; margin-bottom:15px; border-top:none; border-bottom:none; .tac;}
		a{display:block;}
	}
}


/*PAGENATION*/
div.pagenation{font-size:93%;
	div a{padding:15px; }
	div.next{float:right; margin:0 0 60px;}
	div.prev{float:left; margin:0 0 60px;}
}

/*FOOTER*/
footer{padding:40px 0 46px; background:rgba(255, 255, 255, 0.7);}
/*PAGE TABLE*/
table{margin:30px 0; border-bottom:1px solid @gray;
	tr{border-top:1px solid @gray;
		th{vertical-align:middle; padding:20px; width:auto; display:table-cell; background:none; white-space:nowrap;}
		td{vertical-align:middle; padding:20px; width:auto; display:table-cell;}
	}
}

/*BORDER*/
div#border-t{height:8px;left:0;top:0;width:100%;}
div#border-r{height:180%;right:0;top:0;width:6px;}
div#border-b{height:6px;left:0;bottom:0;width:100%;}
div#border-l{height:180%;left:0;top:0;width:6px;}
}
/************************ SP ************************/
@media (max-width:768px)
{
	.pc{display:none;}
	.spmb{margin-bottom:4%;}
}
/************************ NAV ************************/
.topBotomBordersOut a{position:relative; z-index:0;}
.topBotomBordersOut a:before, .topBotomBordersOut a:after{position:absolute; left:0px; width:100%; height:1px; background:@grayD; content:""; opacity:0; transition:all 0.3s;}
.topBotomBordersOut a:before{top:0px; transform:translateY(10px);}
.topBotomBordersOut a:after{bottom:0px; transform:translateY(-10px);}
.topBotomBordersOut a:hover:before, .topBotomBordersOut a:hover:after{opacity:1; transform:translateY(0px);}
/************************ VIDEO ************************/
div.video_box{position:relative; overflow:hidden; padding-bottom:56.25%; padding-top:15px; height:0;}
div.video_box iframe,div.video_box object,div.video_box embed{position:absolute; top:0; left:0; width:100%; height:100%}
/*-----------------------------------------------------
10px = 77%     11px = 85%     12px = 93%     13px = 100%
14px = 108%    15px = 116%    16px = 123.1%  17px = 131%
18px = 138.5%  19px = 146.5%  20px = 153.9%  21px = 161.6%
22px = 167%    23px = 174%    24px = 182%    25px = 189%
26px = 197%
------------------------------------------------------*/