// BASE COLOR
@white:#fff;
@black:#222;
@grayD:#666;
@gray:#ccc;
@grayL:#eee;
@grayLL:#f7f7f7;
@red:#e1131d;

// KEY COLOR
@pink:#f39;
@pinkL:#fde;
@green:#f0fff0;
@greenD:#b2decc;
@blue:#0488A5;

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

// MIXIN
.trans{-webkit-transition:0.4s; -moz-transition:0.4s; -o-transition:0.4s; -ms-transition:0.4s; transition:0.4s;}
.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%; background:@white url('../img/bg/bg.png') top center; background-size:1280px 1280px; background-attachment:fixed;
font-family:"Helvetica Neue","Hiragino Sans","ヒラギノ角ゴシック","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",Roboto,"Droid Sans",Arial,"メイリオ",Meiryo,"游ゴシック",YuGothic,sans-serif;}
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:@blue; .tdu; .trans}
a:visited{color:@blue; .tdu;}
a:hover{color:@black; .tdu;}
a:active{color:@blue; .tdn;}
a img{border:none; .tdn;}
a img:hover{border:none; opacity:0.6; .tdn;}
/*LETTER*/
strong{.fb;}
.wf{font-family:"Quicksand";}
em{background:linear-gradient(transparent 60%, @green 60%);}
.attention{color:@red;}
.small{font-size:85%;}
::selection{background:@black; color:@white;}
::-moz-selection{background:@black; color:@white;}

.leftbox{padding-right:15px;}
.rightbox{padding-left:15px;}

/*INTRO*/
.introtzikas_bg{.tac; position:relative; z-index:10000; width:100%; height:100%;
	img{width:50%; margin:auto; position:relative; top:50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%);}
}

div.wrapper{margin:40px auto;
	div.container{border:3px solid @black; background:@white;}
}

/*.home div.wrapper{width:1440px;}*/

/*HEADER*/
header{background:@white; width:100%; padding:20px; margin:0 0 10px; position:relative;
	h1{width:180px; margin:0 auto 15px;}
	div.gnav{
		nav.mainnav{
			ul{.tac; .fb;
				li{width:12%; .inline;
					a{display:block; padding:12px 0;}
					a:link{color:@black; .tdn;}
					a:visited{color:@black; .tdn;}
					a:hover{color:@red; .tdn;}
					a:active{color:@black; .tdn;}
				}
			}
		}
	}
	div.headnav{position:absolute; top:30px; right:40px;
		nav.snsnav{margin:0;
			ul{text-align:right;
				li{.inline;
					a{padding:0 5px;
						i{font-size:182%; vertical-align:middle;}
					}
					a:link{color:@black; .tdn;}
					a:visited{color:@black; .tdn;}
					a:hover{color:@black; .tdn;}
					a:active{color:@black; .tdn;}
					a.tw:hover{color:#4099FF;}
					a.fb:hover{color:#44609D;}
					a.yt:hover{color:#E52D27;}
				}
			}
		}
	}
}

/*FOOTER*/
footer{width:100%; background:@black; padding:20px 0; .tac;
	small{color:@white; font-size:85%;}
}

/*MAIN*/
main{margin-bottom:40px;}

/*TOP*/
div.topsliderbox{margin:0 auto 60px; position:relative;
	div.voicezone{position:absolute; top:60px; left:-150px; width:150px;
		div.people{position:relative;
			a.sounds{display:none; width:80px;}
			a#btn1{position:absolute; top:-60px; right:10px;}
			a#btn2{position:absolute; top:-20px; left:-40px;}
			a#btn3{position:absolute; top:120px; left:-20px;}
			img#bn{position:absolute; top:200px; right:10px;}
			a#room{position:absolute; top:250px; right:15px;}
		}
	}
	div.topslider{}
}

div.topbox{padding:0 20px;
	h2{font-size:164%; letter-spacing:4px; padding:15px; background:@black; color:@white; .fb;}
	div.topnews{background:#f5f5f5;
		div.newsbox{padding:20px;
			article{margin-bottom:20px; padding-bottom:20px; border-bottom:1px dotted @gray;
				section{
					img{border-radius:100%; border:3px solid @black; margin-bottom:7px;}
					h3{.tac; .fb;}
					ul{
						li{margin-bottom:10px;
							span{font-size:85%;}
							h4{line-height:1.7;
								a:link{color:@black; .tdu;}
								a:visited{color:@black; .tdu;}
								a:hover{color:@grayD; .tdn;}
								a:active{color:@black; .tdn;}
							}
						}
					}
					p{float:right; font-size:77%;
						a{display:block; background:@black; padding:8px; border-radius:2px;}
						a:link{color:@white; .tdn;}
						a:visited{color:@white; .tdn;}
						a:hover{color:@white; .tdn; background:@red;}
						a:active{color:@white; .tdn;}
					}
				}
			}
			article:last-child{margin-bottom:0; padding-bottom:0; border-bottom:none;}
		}
	}
	div.bnbox{margin:0 0 20px}
	div.twbox{height:593px;
		h2{text-align:right;}
	}
}

/*PAGE*/
.pagetitle{font-size:300%; padding:20px 0; margin:0 0 5.5%; letter-spacing:2px; padding-right:-2px; .tac; .fb; background:@black; color:@white;}

aside{padding:0 60px; border-right:1px dotted @gray;
	div.sidebox{margin-bottom:20px; padding-bottom:20px; border-bottom:1px dotted @gray;
		ul{.tac;
			li{ line-height:1.8;
				img{height:45px; margin:0 auto 10px; display:block;}
				a{font-size:108%; .fb;}
				a:link{color:@black; .tdn;}
				a:visited{color:@black; .tdn;}
				a:hover{color:@gray; .tdn;}
				a:active{color:@black; .tdn;}
			}
		}
	}
	div.sidestage{margin-bottom:20px; padding-bottom:20px;
		ul{.tac;
			li{line-height:2;
				a{font-size:116%; .fb;}
				a:link{color:@black; .tdn;}
				a:visited{color:@black; .tdn;}
				a:hover{color:@gray; .tdn;}
				a:active{color:@black; .tdn;}
			}
		}
	}
}

div.pagebody{padding:0 60px 0 40px;
	article{margin-bottom:60px;
		span.postdate{font-size:85%; float:right;}
		h3{position:relative; font-size:154%; padding:20px 0 20px 32px; margin-bottom:30px; line-height:1.5; border-top:2px solid @black; border-bottom:2px solid @black; .fb;
			a:link{color:@black; .tdn;}
			a:visited{color:@black; .tdn;}
			a:hover{color:@gray; .tdn;}
			a:active{color:@black; .tdn;}
			span.stageyear{float:right;}
		}
		h3:before,h3:after{content:""; position:absolute; bottom:0; width:12px; height:12px; border:2px solid @red; margin:auto;}
		h3:before{top:-6px; left:0px; animation: spin 5s linear infinite;}
		h3:after{top:6px; left:6px; animation: spin 5s linear infinite;}
		section.profimg{height:672px; margin:0 auto 30px;}
		section.profdata{margin:0 auto 30px;}
		section.profbtn{
			ul{.fb; .tac;
				li{float:left; width:30%; margin-right:5%;
					a{background:@black; display:block; padding:15px; border-radius:3px;}
					a:link{color:@white; .tdn;}
					a:visited{color:@white; .tdn;}
					a:hover{color:@white; .tdn; background:@gray;}
					a:active{color:@white; .tdn;}
				}
				li:last-child{margin-right:0;}
			}
		}
		div.postbody{line-height:1.7; word-wrap:break-word;
			section{margin-bottom:30px;}
			section:last-child{margin-bottom:0;}
			p{margin-bottom:20px;}
			p:last-child{margin-bottom:0;}
			h4{font-size:116%; padding:0 0 5px; margin-bottom:15px; border-bottom:1px solid @grayD; .fb;
				i{color:@red;}
			}
			h4.alt{background:@black; color:@white; padding:10px; margin-bottom:20px; border-bottom:none;
				i{color:@red;}
			}
			img{margin:0 0 20px;}
			.size-thumbnail{width:320px; height:auto;}
			.size-medium{width:320px; height:auto;}
			.size-large{width:640px; height:auto;}
			.aligncenter{clear:both; display:block; overflow:hidden; margin: 0 auto 20px;}
			.alignleft{float:left; margin:0 20px 20px 0; .inline;}
			.alignright{float:right; margin:0 0 20px 20px; .inline;}
			img.alignleft + br{display:none;}
			img.alignright + br{display:none;}
			div.disco{
				ul{
					li{width:33%; float:left;
						img{margin:0;}
					}
				}
			}
		}
		div.back{.tac; padding:60px 0 0;
			a{border:2px solid @black; padding:20px; .inline; .tdn;}
			a:hover{background:@green;}
			
		}
	}
	article:last-child{margin-bottom:0;}
	div.disclist{
		article{margin-bottom:0px; padding:0; background:none; border:none;
			h3{font-size:77%; padding:10px 0; margin-bottom:30px; border:none;}
			h3:before,h3:after{content:none;}
		}
	}
}

/*PROFILE CAT*/
div.pagebody{
	ul.proflist{width:100%; margin:0 auto 5%; .tac;
		li{float:left; width:28%; margin-left:8%;
			a{
				section{
					img{border:4px solid @black; margin-bottom:10px; .trans;}
					img:hover{border:4px solid @red; opacity:1.0;}
					h3{font-size:116%; margin-bottom:5px; .fb;}
				}
			}
			a:link{color:@black; .tdn;}
			a:visited{color:@black; .tdn;}
			a:hover{color:@red; .tdn;}
			a:active{color:@black; .tdn;}
		}
		li:first-child{margin-left:0;}
	}
}


/*PAGENATION*/
div.pagenation{
	a div{background:@black; color:@white; display:block; border-radius:3px; padding:15px; .fb; .tdn; .trans;}
	a div:hover{background:@red;}
	div.next{float:right;}
	div.prev{float:left;}
	div.back{.tac;}
}

/*CAT STAGE*/
p.buybtn{.tac; .fb;
	a{display:block; padding:10px; background:@black; border-radius:3px;}
	a:link{color:@white; .tdn;}
	a:visited{color:@white; .tdn;}
	a:hover{color:@white; .tdn; background:@red;}
	a:active{color:@white; .tdn;}
}

/*PAGE TABLE*/
table{width:100%; margin-bottom:20px; border:1px solid @gray; border-top:none;
	tr{width:100%; border-top:1px solid @gray;
		th{vertical-align:middle; padding:20px; width:auto; white-space:nowrap; background:@grayLL; .fb;}
		td{vertical-align:middle; padding:20px; width:auto;}
	}
}

/*PAGE FAQ*/
span.faqcap{font-size:200%; line-height:1; font-style:italic; padding:0 10px 10px 0; color:@red; text-shadow: 1px 1px 1px @grayD; font-weight:normal;
font-family:"Garamond","Georgia","Times New Roman","游明朝",YuMincho,"Hiragino Mincho Pro","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HGS明朝E","ＭＳ Ｐ明朝","メイリオ",Meiryo,serif;}

/*PAGE COMPANY*/
ul.companylogo{margin:20px auto; .tac;
	li{width:32%; .inline; .tac;
		img{height:70px; width:auto; margin:0 auto 10px; .tac;}
		strong{display:block;}
	}
}

/*PROF IMG*/
#photo_container{clear:both; display:block; overflow:hidden;}
#main_photo{position:relative; float:left; width:501px; min-width:501px; height:auto; overflow:hidden; border:2px solid @black;}
#main_photo img{position:absolute; top:0; width:100%; max-width:501px; min-width:501px; height:auto;}
#thumbnail{float:right; width:162px; overflow:hidden;}
#thumbnail li{margin-bottom:13px; border:2px solid @black;}
#thumbnail li:hover{border:2px solid #222;}
#thumbnail li:last-child{margin-bottom:0;}
#thumbnail li.current{border:2px solid @red;}
#thumbnail li a{display:block;}
#thumbnail li a img{width:158px; height:auto; opacity:0.5; filter:alpha(opacity=50); margin:0;}
#thumbnail li.current a img{opacity:1; filter:alpha(opacity=100);}

/************************ NAV ************************/
.topBotomBordersOut a{position:relative; z-index:0;}
.topBotomBordersOut a:before, .topBotomBordersOut a:after{position:absolute; left:0px; width:100%; height:1px; background:@red; content:""; opacity:0; transition:all 0.3s;}
.topBotomBordersOut a:before{top:0px; transform:translateY(5px);}
.topBotomBordersOut a:after{bottom:0px; transform:translateY(-5px);}
.topBotomBordersOut a:hover:before, .topBotomBordersOut a:hover:after{opacity:1; transform:translateY(0px);}
/************************ SPIN ************************/
@keyframes spin{
	0%{transform: rotate(0deg);}
	100%{transform: rotate(360deg);}
}
/************************ FUWA ************************/
.fuwafuwa{
-webkit-animation-name:fuwafuwa;
-webkit-animation-duration:2.5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:ease;
-moz-animation-name:fuwafuwa;
-moz-animation-duration:2.5s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:ease;
}
@-webkit-keyframes fuwafuwa{
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -10px);}
	100% {-webkit-transform:translate(0, 0);}
}
@-moz-keyframes fuwafuwa{
	0% {-moz-transform:translate(0, 0);}
	50% {-moz-transform:translate(0, -10px);}
	100% {-moz-transform:translate(0, 0);}
}
/************************ VIDEO ************************/
div.video_box{position:relative; overflow:hidden; padding-bottom:56.25%; padding-top:30px; 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%
------------------------------------------------------*/