@charset "utf-8";

/******************************************************************** structure
*/

#header,
#container,
#footer { text-align: left;}

#header:after,
#container:after,
#footer:after { content: ""; clear: both; display: block;}

#header .inner,
#container .inner,
#footer .inner { max-width: 1000px; margin: 0 auto;}

#header {}
#header h1 { position: fixed; margin: 0; padding: 0; right: calc(50% - 470px); background: #000; padding: 10px; top: 30px; line-height: 1; z-index: 3000;}


#header h1:hover { opacity: 0.6; transition: 0.3s;}
#header h1 a,
#header h1 a span { display: inline-block; transition: all .4s; box-sizing: border-box;}
#header h1 a { position: relative; width: 36px; height: 32px;}
#header h1 a span { position: absolute; left: 0; width: 100%; height: 4px; background-color: #fff; border-radius: 4px;}
#header h1 a span:nth-of-type(1) { top: 0;}
#header h1 a span:nth-of-type(2) { top: 14px;}
#header h1 a span:nth-of-type(3) { bottom: 0;}
#header h1 a.open span:nth-of-type(1) { -webkit-transform: translateY(14px) rotate(-315deg); transform: translateY(14px) rotate(-315deg);}
#header h1 a.open span:nth-of-type(2) { opacity: 0;}
#header h1 a.open span:nth-of-type(3) { -webkit-transform: translateY(-14px) rotate(315deg); transform: translateY(-14px) rotate(315deg);}

.topImageView { height: 600px; overflow: hidden; position: relative; z-index: -100;}
.topImageView ul { list-style: none; margin: 0; padding: 0;}
.topImageView ul li { position: absolute; left: 0; top: 0; width: 100%; height: 600px; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; transform: scale(1.1,1.1); opacity: 0; transition: 0.6s; z-index: -10;}
.topImageView ul li.active { transform: scale(1, 1); transition: 0.6s; opacity: 1;}
.topImageView .inner > p { padding: 12em 0 0; margin: 0;}
.topImageView > p { padding: 0; margin: 0; height: 600px; background-position: 50% 50%; background-size: cover;}

#gNavi { position: fixed; right: calc(50% - 500px); top: 92px; background: #3E3531; width: 180px; display: none; z-index: 3000;}
#gNavi .naviLink { list-style: none; margin: 0; padding: 20px 20px 10px; font-size: 120%;}
#gNavi .naviLink a { color: #fff !important; text-decoration: none; display: block;}
#gNavi .naviLink a:hover { opacity: 0.6; transition: 0.3s;}
#gNavi .naviLink li.split { padding-bottom: 0.75em; margin-bottom: 0.75em; border-bottom: 1px solid #fff;}

#gNavi > p { padding: 0 20px 20px;}
#gNavi > p a { border: 1px solid #fff; text-align: center; text-decoration: none; display: block; color: #fff !important; text-decoration: none; padding: 0.2em 0;}
#gNavi > p a:hover { background: #fff; color: #3E3531 !important; transition: 0.3s;}

#gNavi .snsLink { list-style: none; margin: 0; padding: 0; text-align: center;}
#gNavi .snsLink li { display: inline-block; margin-right: 0.5em;}
#gNavi .snsLink li:last-child { margin-right: 0;}
#gNavi .snsLink li a { display: block; width: 22px; height: 22px; text-indent: -9999px; background: url(../img/splite_sns_icons.png); background-size: auto 100%;}
#gNavi .snsLink li a.twitter { background-position: 0 0;}
#gNavi .snsLink li a.youtube { background-position: -22px 0;}
#gNavi .snsLink li a.instagram { background-position: -44px 0;}

#gNavi dl { padding: 0 20px 30px; margin: 0; color: #fff;}
#gNavi dl dt { padding-top: 10px; border-top: 1px solid #fff; margin-bottom: 10px; font-size: 120%; text-align: center;}
#gNavi dl dt a { text-decoration: none; color: #fff !important;}
#gNavi dl dd ul { list-style: none; margin: 0; padding: 0;}

.bgGray { background-color: #F8F8F6;}

.fontUp { font-size: 110%;}

.colorRed { color: red;}
.colorBlue { color: #00A0E9;}

.inlineBox { display: inline-block; border: 1px solid #111; padding: 0 1em;}

.faq { padding: 0.25em 0 0.75em; margin: 0;}
.faq dt { padding-left: 1.5em; text-indent: -0.75em;}
.faq dt:before { content: 'Q.'; display: inline-block; width: 0.75em;}
.faq dd { padding-left: 1.5em; text-indent: -0.75em;}
.faq dd:before { content: 'A.'; display: inline-block; width: 0.75em;}
.faq dd li { text-indent: 0;}

.cTitle { text-align: center; font-weight: normal; line-height: 1.5; margin-bottom: 2em;}
.cTitle .alpha { font-size: 200%; display: inline-block; border-bottom: 1px solid #aaa; letter-spacing: 0.2em; padding: 0 0.5em;}
.pTitle { font-size: 180%; padding: 0.5em 0 0.25em; text-align: center; border-bottom: 1px solid #aaa; margin-bottom: 0.5em; font-weight: normal;}

.inlineBlock { display: inline-block;}

.button { text-decoration: none; padding: 1em 2em; display: inline-block;}
.button.buttonNormal { background: url(../img/button_arrow.png) no-repeat 12px 50%; border: 2px solid #333; color: #333 !important; padding-left: 0; padding-right: 0; width: 230px;}
.button.buttonNormal:hover { background-color: #000; color: #fff !important; transition: 0.3s; background-image: url(../img/button_arrow_hover.png);}

.wpcf7-submit { border: none; background: url(../img/button_arrow.png) no-repeat 12px 50%; border: 2px solid #333; color: #333 !important; padding: 1em 0; width: 230px;}
.wpcf7-submit:hover { background-color: #000; color: #fff !important; transition: 0.3s; background-image: url(../img/button_arrow_hover.png);}

.postInner { max-width: 800px; margin: 0 auto 2em; font-size: 120%;}
.postInner hr { display: block; border: none; border-bottom: 1px dashed #777; margin: 1.5em 0;}
.postInner .mainBox { max-width: 500px; margin: 0 auto; padding: 1em 0 2em;}
.postInner .mainBox dl { padding-left: 280px; padding-top: 6em;}
.postInner .mainBox dl dt { font-size: 180%; line-height: 1;}
.postInner .mainBox dl dd { font-size: 120%; margin-bottom: 0.2em;}
.postInner img { max-width: 100%; max-height: 100%; height: auto !important;}

.w800 { max-width: 800px; margin-right: auto; margin-left: auto;}

#footer {}
#footer .copy { text-align: center; font-size: 85%; padding: 0.5em 0; background: #000; color: #fff;}
#footer a { text-decoration: none; color: #333 !important;}
#footer a:hover { text-decoration: underline;}

.newsView { padding: 3em 0;}
.newsView dl { margin: 0 auto 3em; padding: 1.5em 0 0; max-width: 800px; font-size: 110%;}
.newsView dl dt { float: left; width: 150px; text-align: center;}
.newsView dl dt a { display: block; text-decoration: none; color: #fff !important;}
.newsView dl dt a:hover { opacity: 0.6; transition: 0.3s;}
.newsView dl dt .live { background: #F39800;}
.newsView dl dt .sidcography { background: #0BA29A;}
.newsView dl dt .goods { background: #132B88;}
.newsView dl dt .event { background: #E4007F;}
.newsView dl dt .info { background: #898989;}
.newsView dl dd { margin-left: 170px; border-bottom: 1px solid #aaa; margin-bottom: 0.75em;}
.newsView dl dd a { display: block; text-decoration: none; color: #333;}
.newsView dl dd a:hover { color: #F39800 !important; transition: 0.3s;}
.newsView dl dd a em { float: left; font-weight: normal;}
.newsView dl dd a span { padding-left: 6.5em; display: block;}

.pageSendList { list-style: none; margin: 0; padding: 0; text-align: center; line-height: 1.8; font-size: 120%;}
.pageSendList li { display: inline-block;}
.pageSendList li span,
.pageSendList li a { width: 1.8em; display: block;}
.pageSendList li a { text-decoration: none;}
.pageSendList li span { background: #F39800; border: 1px solid #F39800; color: #fff;}
.pageSendList li a { border: 1px solid #111; color: #111 !important;}
.pageSendList li a:hover { background: #F39800; border: 1px solid #F39800; color: #fff !important; transition: 0.3s;}
.pageSendList li.arrow a { border: none;}
.pageSendList li.arrow a:hover { background: no-repeat; border: none; color: #F39800 !important; transition: 0.3s;}
.pageSendList li.arrow span { border:none; color: #111; background: no-repeat;}

.newsDetailView { padding: 3em 0;}
.newsDetailView dl { max-width: 150px; margin: 0 auto 1em; padding: 0.5em 0; text-align: center;}
.newsDetailView dl dt { margin-bottom: 0.3em;}
.newsDetailView dl dt a { display: block; text-decoration: none; color: #fff !important;}
.newsDetailView dl dt a:hover { opacity: 0.6; transition: 0.3s;}
.newsDetailView dl dt .live { background: #F39800;}
.newsDetailView dl dt .sidcography { background: #0BA29A;}
.newsDetailView dl dt .goods { background: #132B88;}
.newsDetailView dl dt .event { background: #E4007F;}
.newsDetailView dl dt .info { background: #898989;}
.newsDetailView h3.title { margin: 0 0 1em; padding: 0; text-align: center; font-weight: normal; font-size: 180%;}

.sendPage { text-align: center; padding: 1em 0; font-size: 120%;}
.sendPage a { display: inline-block; margin-right: 2em; text-decoration: none; color: #111 !important;}
.sendPage a:hover { text-decoration: underline; color: #F39800 !important; transition: 0.3s;}
.sendPage a:last-child { margin-right: 0;}

.movieView { padding: 3em 0;}

.menuView { padding: 3em 0 0;}
.menuView ul { margin: 0; padding: 0; list-style: none;}
.menuView ul:after { content: ""; clear: both; display: block;}
.menuView ul li { height: 303px; float: left; width: 33.3%; background-size: cover; background-position: 50% 50%; position: relative;}
.menuView ul li:after { content: ''; left: 0; top: 0; width: 100%; height: 100%; opacity: 1; position: absolute; background-size: cover; background-position: 50% 50%; transition: 0.3s;}
.menuView ul li:hover:after { opacity: 0; transition: 0.3s;}
.menuView ul li.live { width: 66.6%; background-image: url(../img/menu_button01_bg_hover.jpg);}
.menuView ul li.live:after { background-image: url(../img/menu_button01_bg.jpg);}
.menuView ul li.discography { background-image: url(../img/menu_button02_bg_hover.jpg);}
.menuView ul li.discography:after { background-image: url(../img/menu_button02_bg.jpg);}
.menuView ul li.profile { background-image: url(../img/menu_button03_bg_hover.jpg);}
.menuView ul li.profile:after { background-image: url(../img/menu_button03_bg.jpg);}
.menuView ul li.goods { background-image: url(../img/menu_button04_bg_hover.jpg);}
.menuView ul li.goods:after { background-image: url(../img/menu_button04_bg.jpg);}
.menuView ul li.fanclub { background-image: url(../img/menu_button05_bg_hover.jpg);}
.menuView ul li.fanclub:after { background-image: url(../img/menu_button05_bg.jpg);}
.menuView ul li dl { margin: 0; padding: 8em 0 0; text-align: center; color: #fff; position: absolute; left: 0; top: 0; width: 100%; z-index: 1000;}
.menuView ul li dl dt { font-size: 200%; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); margin-bottom: 0.2em;}
.menuView ul li dl dd a { display: inline-block; border: 1px solid #fff; text-decoration: none; color: #fff !important; width: 10em; font-size: 120%; padding: 0.2em 0;}

.instagramView { padding: 3em 0;}

.linksView { padding: 3em 0 1em;}
.linksView ul { margin: 0; padding: 2em 0; list-style: none; text-align: center;}
.linksView ul li { display: inline-block; width: 31%; margin-right: 2%;}
.linksView ul li:last-child { margin-right: 0;}
.linksView ul li a { display: block; border: 2px solid #111; text-align: center; line-height: 90px;}
.linksView ul li a:hover { opacity: 0.6; transition: 0.3s;}
.linksView ul li a img { vertical-align: middle;}

.breadcrumbs { padding: 0.5em 0;}
.breadcrumbs.direct { padding-top: 6em; margin-bottom: -2em;}
.breadcrumbs a { color: #111 !important; text-decoration: none;}
.breadcrumbs a:hover { text-decoration: underline; color: #F39800 !important; transition: 0.3s;}
.breadcrumbs .user { color: #E79A00;}

.discographyView { padding: 3em 0;}
.discographyView .catList { text-align: center; list-style: none; margin: 0; padding: 0;}
.discographyView .catList li { display: inline-block; margin-right: 0.5em;}
.discographyView .catList li:last-child { margin-right: 0;}
.discographyView .catList li a { width: 6em; border: 1px solid #111; display: block; text-decoration: none; color: #111 !important;}
.discographyView .catList li a:hover { background: #111; color: #fff !important; transition: 0.3s;}

.discographyList { max-width: 800px; margin: 0 auto; padding: 3em 0 0;}
.discographyList .discographyBox { border-bottom: 1px solid #aaa; margin-bottom: 2em; padding-bottom: 2em;}
.discographyList .discographyBox:after { content: ""; clear: both; display: block;}
.discographyBox .rightSide { padding-left: 280px;}
.discographyBox .rightSide dl { margin: 0; padding: 0;}
.discographyBox .rightSide dl dt { font-weight: bold; font-size: 140%; border-bottom: 1px dashed #aaa; margin-bottom: 0.5em; padding-bottom: 0.5em;}
.discographyBox .rightSide dl dd { font-size: 120%;}
.discographyBox .rightSide dl dd.linkUrl { text-align: right; padding-top: 0.5em;}
.discographyBox .rightSide dl dd.linkUrl a { text-decoration: none; color: #333 !important;}
.discographyBox .rightSide dl dd.linkUrl a:hover { text-decoration: underline;}
.discographyBox .photo { margin: 0; padding: 0; float: left; width: 250px; line-height: 250px; text-align: center;}
.discographyBox .photo img { vertical-align: middle; max-height: 100%;}
.discographyBox .catList { text-align: left; font-size: 85%;}
.discographyBox .catList li { text-align: center;}

.discographyAttention { max-width: 800px; margin: 0 auto; padding: 0; font-size: 120%; border-bottom: 1px solid #aaa; margin-bottom: 1.5em; padding-bottom: 1.5em;}

.discographyView .yearList { text-align: center; list-style: none; margin: 0; padding: 1em 0 0;}
.discographyView .yearList li { display: inline-block; margin-right: 0.5em;}
.discographyView .yearList li:last-child { margin-right: 0;}
.discographyView .yearList li a,
.discographyView .yearList li span { width: 6em; display: block; border: 1px solid #111; padding: 0.25em 0;}
.discographyView .yearList li a { color: #111 !important; text-decoration: none;}
.discographyView .yearList li a:hover { background-color: #F39800; color: #fff !important; border-color: #F39800; transition: 0.3s;}
.discographyView .yearList li span { background: #F39800; color: #fff; border-color: #F39800;}

.fanclubView { padding: 3em 0; margin: 0 auto; max-width: 800px;}
.fanclubView .flowList { list-style: none; margin: 0; padding: 2em 0 4em; text-align: center;}
.fanclubView .flowList li { display: inline-block; margin-right: 15px; border-radius: 50%; border: 2px solid #111;}
.fanclubView .flowList li:last-child { margin-right: 0;}
.fanclubView .flowList li img { vertical-align: middle;}
.fanclubView .flowList li a { line-height: 175px; width: 175px; border-radius: 50%; display: block; background: #fff; vertical-align: middle;}
.fanclubView .flowList li a:hover { background: transparent; transition: 0.3s;}
.fanclubView .flowList li a:hover img { opacity: 0; transition: 0.3s;}
.fanclubView .flowList li.fanclubFlow1 { background: url(../img/fanclub_flow1_on.png) 50% 50% no-repeat #000;}
.fanclubView .flowList li.fanclubFlow2 { background: url(../img/fanclub_flow2_on.png) 50% 50% no-repeat #000;}
.fanclubView .flowList li.fanclubFlow3 { background: url(../img/fanclub_flow3_on.png) 50% 50% no-repeat #000;}
.fanclubView .flowList li.fanclubFlow4 { background: url(../img/fanclub_flow4_on.png) 50% 50% no-repeat #000;}

.fanclubView .termsList { text-align: center; list-style: none; margin: 0; padding: 1em 0 2em;}
.fanclubView .termsList li { display: inline-block; margin-right: 0.5em;}
.fanclubView .termsList li:last-child { margin-right: 0;}
.fanclubView .termsList li a,
.fanclubView .termsList li span { width: 14em; display: block; border: 1px solid #111; padding: 0.25em 0; font-size: 90%;}
.fanclubView .termsList li a { color: #111 !important; text-decoration: none;}
.fanclubView .termsList li a:hover { background-color: #F39800; color: #fff !important; border-color: #F39800; transition: 0.3s;}
.fanclubView .termsList li span { background: #F39800; color: #fff; border-color: #F39800;}

.loginView { padding: 3em 0; margin: 0 auto; max-width: 470px;}
.loginView dl { margin: 0; padding: 2em 0 0;}
.loginView dl dt { float: left; font-size: 120%; background: #DADBDB; width: 150px; text-align: center; padding: 0.2em 0;}
.loginView dl dd { padding-left: 160px; margin-bottom: 1em;}

.memberNewsView { padding: 3em 0; max-width: 630px; margin: 0 auto;}
.memberNewsView dl { margin: 0; padding: 0;}
.memberNewsView dl dt { float: left;}
.memberNewsView dl dd { border-bottom: 1px solid #aaa; padding-bottom: 0.5em; margin-bottom: 0.5em; padding-left: 8em;}

.memberBlogView { padding: 3em 0;}

.blogIndexList { list-style: none; margin: 0 auto 2em; padding: 0; max-width: 800px; position: relative;}
.blogIndexList li { display: inline-block; width: 32%; margin-right: 1%; margin-bottom: 1em; vertical-align: top;}
.blogIndexList li:nth-child(3n) { margin-right: 0; margin-bottom: 3em;}
.blogIndexList li:nth-child(3n):after { content: ''; display: block; border-bottom: 1px dashed #aaa; left: 0; width: 100%; position: absolute; height: 1em;}
.blogIndexList li .photo { margin: 0; padding: 0;}
.blogIndexList li .photo a { display: block; height: 160px; background-size: cover; background-position: 50% 50%;}
.blogIndexList li .photo a:hover { opacity: 0.6; transition: 0.3s;}
.blogIndexList li dl { margin: 0; padding: 0.25em 0;}
.blogIndexList li dl dt { float: left;}
.blogIndexList li dl dd { text-align: right; font-size: 90%;}
.blogIndexList li .blogButton { text-align: center;}
.blogIndexList li .blogButton a { background: url(../img/button_arrow.png) no-repeat 5px 50%; display: inline-block; width: 135px; border: 2px solid #111; color: #111 !important;}
.blogIndexList li .blogButton a:hover { background-color: #111; color: #fff !important; transition: 0.3s; background-image: url(../img/button_arrow_hover.png);}
.blogIndexList li .blogButton .button { padding: 0.5em 0;}
.blogIndexList li .title { font-size: 95%;}

.textLinksView { padding: 3em 0;} 
.textLinksView ul { list-style: none; margin: 0 auto; padding: 1em 0 3em; max-width: 800px; text-align: center;}
.textLinksView ul li { display: inline-block; width: 32%; margin-right: 1%;}
.textLinksView ul li:last-child { margin-right: 0;}
.textLinksView ul li a { display: block; border: 2px solid #111; text-align: center; text-decoration: none; color: #111 !important; background: url(../img/button_arrow.png) no-repeat 15px 50%; padding: 1.5em 0;}
.textLinksView ul li a:hover { background-color: #111; color: #fff !important; transition: 0.3s; background-image: url(../img/button_arrow_hover.png);}

.blogDetailView { padding: 3em 0;}
.blogDetailView .leftSide { width: 780px; float: left;}
.blogDetailView .rightSide { width: 200px; float: right;}
.blogDetailView .rightSide h2 { background: #111; color: #fff; text-align: center; font-weight: normal; padding: 0.5em 0;}
.blogDetailView .rightSide .cateList { list-style: none; margin: 0 0 2em; padding: 0.5em 0.5em 1em; border: 1px solid #aaa; border-top: none;}
.blogDetailView .rightSide .cateList li { border-bottom: 1px dashed #aaa;}
.blogDetailView .rightSide .cateList a { display: block; text-decoration: none; color: #111 !important; padding: 0.5em 0;}
.blogDetailView .rightSide .cateList a:before { content: '・';}

.blogDetailView .rightSide .articleList { list-style: none; margin: 0; padding: 1em 0.5em; border: 1px solid #aaa; border-top: none;}
.blogDetailView .rightSide .articleList a { display: block; text-decoration: none; color: #111 !important; line-height: 1.5; padding: 0 0 1em; border-bottom: 1px dashed #aaa; margin-bottom: 1em; min-height: 4.5em;}
.blogDetailView .rightSide .articleList .thumb { width: 56px; height: 56px; display: block; border-radius: 50%; background-size: cover; background-position: 50% 50%; border: 2px solid #fff;}
.blogDetailView .rightSide .articleList .thumbWrap { display: block; float: left; border: 1px solid #111; border-radius: 50%;}
.blogDetailView .rightSide .articleList .date { display: block; padding-left: 70px; font-size: 90%; line-height: 1.2; padding-top: 5px;}
.blogDetailView .rightSide .articleList .title { display: block; padding-left: 70px;}
.blogDetailView .rightSide .articleList a:hover .thumbWrap { opacity: 0.6; transition: 0.3s;}

.entryView { padding: 3em 0; margin: 0 auto; max-width: 800px;}
.entryView dl { margin: 0 auto; padding: 2em 0 0; max-width: 650px;}
.entryView dl.noTop { padding-top: 0;}
.entryView dl dt { float: left; background: #DADBDB; width: 150px; text-align: center; padding: 0.45em 0;}
.entryView dl dt.rows10 { padding: 7.7em 0;}
.entryView dl dd { padding-left: 160px; margin-bottom: 1em; min-height: 1.7em;}
.entryView dl dd.radioOnly { padding-top: 0.45em; padding-bottom: 0.45em;}
.entryView dl dd.selectOnly { padding-top: 0.2em; padding-bottom: 0.2em;}
.entryView dl dd .size4 { width: 4em;}
.entryView dl dd .size6 { width: 6em;}
.entryView dl dd .size8 { width: 8em;}
.entryView dl dd .size10 { width: 10em;}
.entryView dl dd .sizeFull { width: calc(100% - 10px);}
.entryView dl dd label { margin-right: 1em;}
.entryView dl dd label:last-child { margin-right: 0;}

.tableLikeView { padding: 1em 0; margin: 0;}
.tableLikeView dt { float: left; background: #eee; text-align: center; width: 14em; padding: 0.5em 0; border-radius: 5px;}
.tableLikeView dd { margin-left: 14.5em; padding: 0.5em 1em; background: #fafafa; margin-bottom: 0.5em; border-radius: 5px;}

.entryView input[name=old_pass],
.entryView input[name=new_pass],
.entryView input[name=new_pass_chk] { width: calc(100% - 10px);}

.errMes { color: #f00; margin: 0; padding: 0;}

.mesListView img { box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);}