@charset "UTF-8";
// BASE COLOR
@white:#fff;
@black:#222;
@grayD:#666;
@gray:#ccc;
@grayL:#eee;
@red:#e1131d;
@pink:#ed86b3;
// KEY COLOR
@pinkL:#fde;
@green:#f0fff0;
@greenD:#b2decc;
@blue:#3cb3b3;
/*background:rgba(237,134,179,0.6);*/
// 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:url('../img/bg/bg.jpg'); background-size:150px 150px;
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:@pink; .tdu(); .trans();}
a:visited{color:@pink; .tdu();}
a:hover{color:@grayD; .tdu();}
a:active{color:@pink; .tdn();}
a img{border:none; .tdn();}
a img:hover{border:none; opacity:0.6; .tdn();}
/*LETTER*/
strong{.fb();}
.wf{font-family:"Rubik";}
span.shinee{font-size:1.3em; line-height:1;}
em{background:linear-gradient(transparent 60%, @pink 60%);}
.attention{color:@red;}
.small{font-size:85%;}
::selection{background:@black; color:@white;}
::-moz-selection{background:@black; color:@white;}
/*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;}
}
/*SP NAV*/
button#menubtn{position:absolute; right:10px; top:10px; line-height:42px; height:42px; width:42px; z-index:9999;}
button.btn{background-color:@white; color:@pink; border:none;}
button.btn:after{content: '\f0c9'; font-family:'fontello'; vertical-align:top; font-size:154%;}
button.active{background-color:@white; color:@black;}
button.active:after{content: '\e800'; font-family:'fontello'; line-height:42px; height:42px; width:42px; font-size:154%;}
div#spnav{display:none; position:fixed; top:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:9998;
a:link{color:@white; .tdn();}
a:visited{color:@white; .tdn();}
a:hover{color:@grayD; .tdn();}
a:active{color:@white; .tdn();}
nav{padding:70px 0 0;
ul{.tac();
li{width:50%; float:left; padding:0 0 40px;
a{display:block; font-size:116%; letter-spacing:1px; text-indent:1px; font-weight:500;
i{display:block; font-size:154%; margin:0 0 5px;}
}
}
}
}
}
/*HEADER*/
header{background:@pink; width:100%; padding:10px; margin-bottom:0;
h1{width:60px;}
}
/*FOOTER*/
footer{background:@pink; padding:20px 0; color:@white; .tac(); border-bottom:solid 6px @white;
small{color:@white; font-size:77%; line-height:1.6; display:block;
a:link{color:@white; .tdu();}
a:visited{color:@white; .tdu();}
a:hover{color:@gray; .tdn();}
a:active{color:@white; .tdn();}
}
}
/*MAIN*/
main{margin:0 0 30px; background-size:1280px 425px;}
/*TOP*/
div.topsliderbox{padding:20px 10px 10px; margin:0 auto;}
div.topslider{}
div.topbox{padding:0 10px; margin-bottom:20px;
h2{font-size:131%; letter-spacing:2px; padding-right:-2px; margin-bottom:15px; border-bottom:1px solid @black; padding:0 0 5px;}
div.newsbox{padding:20px; border:2px solid @black; background:rgba(255,255,255,0.85);
article{margin-bottom:15px;
span{font-size:85%;}
h3{line-height:1.7; .fb();
a:link{color:@black; .tdu();}
a:visited{color:@black; .tdu();}
a:hover{color:@grayD; .tdn();}
a:active{color:@black; .tdn();}
}
}
}
div.discbox{padding:20px; border:2px solid @black; background:rgba(255,255,255,0.85);
ul{
li{float:left; width:25%;}
}
}
}
/*PAGE*/
h2.pagetitle{font-size:182%; padding:20px 0; letter-spacing:4px; color:@white; font-weight:500; .tac();
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
div.pagebody{padding:20px 10px; background:rgba(255,255,255,0.85);
article{margin-bottom:20px;
span.postdate{font-size:85%;}
h3.article_title{position:relative; font-size:124%; padding:10px 0 10px 24px; margin-bottom:15px; line-height:1.5; border-top:1px solid @black; border-bottom:1px solid @black; .fb();
a:link{color:@black; .tdn();}
a:visited{color:@black; .tdn();}
a:hover{color:@gray; .tdn();}
a:active{color:@black; .tdn();}
}
h3.article_title:before,h3.article_title:after{content:""; position:absolute; bottom:0; width:6px; height:6px; border:2px solid @pink; margin:auto;}
h3.article_title:before{top:-3px; left:0px; animation: spin 5s linear infinite;}
h3.article_title:after{top:3px; left:3px; animation: spin 5s linear infinite;}
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 5px; margin:0 0 10px; border-bottom:3px double @grayL; .fb();}
img{margin:0 0 15px;}
ul.social{width:80%; display:flex; display:flex;
-webkit-flex-flow:row nowrap; flex-flow:row nowrap;
-webkit-justify-content:flex-start; justify-content:flex-start;
-webkit-align-items:center; align-items:center;
li{width:12%; margin:0 2%;}
li:first-child{margin:0 2% 0 0;}
}
}
div.back{.tac(); padding:60px 0 0; font-weight:500; width:100%; display:block;
a{padding:20px; .inline(); background:@pink;}
a:link{color:@white; .tdn();}
a:visited{color:@white; .tdn();}
a:hover{color:@pink; .tdn(); background:@black;}
a:active{color:@white; .tdn();}
}
div.artistlist{
ul{
li{float:left; width:49%; margin:0 2% 2% 0; position:relative; border:solid 1px @grayL;
img{margin:0;}
h4{position:absolute; bottom:0; left:0; width:100%; margin:0; padding:5px; border:none; background:rgba(0,0,0,0.6);
a{.fb(); text-shadow:1px 1px 0px @black; line-height:1.5;}
a:link{color:@white; .tdn();}
a:visited{color:@white; .tdn();}
a:hover{color:@pink; .tdn();}
a:active{color:@white; .tdn();}
}
}
li:nth-child(even){margin:0 0 2% 0;}
}
}
}
article:last-child{margin-bottom:0;}
article.disc:last-child{margin-bottom:20px}
article.disc{
section.discimg{width:50%; float:left;}
section.discdesc{width:47%; float:left; margin-left:3%;}
span.postdate{padding-bottom:5px; display:block;}
h3.disc_title{margin-bottom:10px; line-height:1.4; .fb();}
div.morebtn{font-size:85%; font-weight:500; display:block;
a{padding:10px; .inline(); background:@pink;}
a:link{color:@white; .tdn();}
a:visited{color:@white; .tdn();}
a:hover{color:@pink; .tdn(); background:@black;}
a:active{color:@white; .tdn();}
}
}
}
/*PAGENATION*/
div.pagenation{font-size:77%; padding:20px 10px 0;
a div{background:@pink; color:@white; display:block; border-radius:6px; padding:15px; .tdn();}
a div:hover{background:@black;}
div.next{float:right;}
div.prev{float:left;}
}
/*PAGE TABLE*/
table{width:100%; margin-bottom:10px;
tr{width:100%; border-top:1px solid @gray; border-bottom:1px solid @gray;
th{padding:10px 10px 0; width:100%; display:block; text-align:left; .fb();}
td{padding:10px; width:100%; display:block;}
}
}
/*CONTACT*/
span.required{background:@pink; 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{width:100%; padding:10px;}
}
/*RECRUIT*/
table.jobmailform{
textarea{width:100%; height:100px; padding:5px; resize:vertical; background:@white; border:1px solid #ddd;}
input[type="text"]{width:100%; padding:5px;}
}
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 4px 0 @black; -webkit-transition:none; transition:none; cursor:pointer;}
input.soushin:hover{background-color:@gray; box-shadow:0 4px 0 @grayD;}
input.soushin:active{top:4px; box-shadow:none;}
/****************************************************/
/************************ PC ************************/
/****************************************************/
@media(min-width:769px){
nav#spmenu{display:none;}
.sp{display:none;}
.leftbox{padding-right:20px;}
.rightbox{padding-left:20px;}
/*HEADER*/
header{padding:20px 0; border-top:solid 6px @white;
h1{width:80px; float:left;}
div.headnav{float:right;
nav.mainnav{
ul{.tac(); font-size:93%;
li{.inline(); letter-spacing:1px;
a{display:block; padding:15px 12px;
i{font-size:124%; display:block; margin-bottom:10px;}
span{font-size:60%; display:block; margin-top:10px;}
}
a:link{color:@white; .tdn();}
a:visited{color:@white; .tdn();}
a:hover{color:@black; .tdn();}
a:active{color:@white; .tdn();}
}
}
}
}
}
/*FOOTER*/
footer{padding:40px 0;}
/*MAIN*/
main{padding:0 0 30px; background-size:2560px 850px; min-height:880px;}
/*TOP*/
div.topsliderbox{padding:20px 0 0; margin:0 auto 20px;}
div.topslider{padding:15px; background:@white; border:1px solid @grayL;}
div.bnbox{
a{display:block; padding:5px; background:@white; border:1px solid @grayL; margin:0 0 15px;
img{}
}
}
ul.topbn{
li{margin-bottom:5%;
img{border:1px solid @grayL;}
}
}
div.topbox{padding:0; margin-bottom:60px;
h2{font-size:164%; letter-spacing:4px; padding-right:-4px; margin-bottom:15px; padding:0 0 10px;}
div.newsbox{padding:30px; border:3px solid @black;
article{margin-bottom:20px;
h3{font-size:108%;}
}
}
div.discbox{padding:30px; border:3px solid @black;
}
}
/*PAGE*/
h2.pagetitle{font-size:300%; letter-spacing:6px; padding:40px 0;}
div.pagebody{padding:0; background:none;
article{margin-bottom:60px; padding:60px; background:rgba(255,255,255,0.85); border:1px solid @grayL;
h3.article_title{font-size:154%; padding:20px 0 20px 32px; margin-bottom:30px;}
h3.article_title:before,h3.article_title:after{width:12px; height:12px;}
h3.article_title:before{top:-6px; left:0px; animation: spin 5s linear infinite;}
h3.article_title:after{top:6px; left:6px; animation: spin 5s linear infinite;}
div.postbody{
section{margin-bottom:30px;}
p{margin-bottom:20px;}
h4{font-size:131%; margin:0 0 15px;}
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;}
ul.social{width:50%;}
}
div.artistlist{
ul{
li{width:24.25%; margin:0 1% 1% 0;}
li:nth-child(even){margin:0 1% 1% 0;}
li:last-child{margin:0 0 1% 0;}
}
}
}
article.disc{margin-bottom:20px; padding:20px;
h3.disc_title{margin-bottom:15px;}
}
}
/*PAGENATION*/
div.pagenation{font-size:100%; padding:40px 0 0;}
/*PAGE TABLE*/
table{margin-bottom:20px; border-bottom:1px solid @gray;
tr{border-top:1px solid @gray; border-bottom:none;
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;}
}
}
}
/************************ SP ************************/
@media (max-width:768px)
{
.pc{display:none;}
.spmb{margin-bottom:4%;}
ul.topbn{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:center; align-items:center;
li{width:31%;
img{border:1px solid @grayL;}
}
}
}
/************************ 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);}
}
/************************ SPIN ************************/
@keyframes spin{
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}
/************************ 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%
------------------------------------------------------*/
