@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/* clearfix */
.clearfix:after,.clearfix:before{display:table;content:" "}.clearfix:after{clear:both}
.clear { clear: both; }
.black { color: #000; }

/* base
============================== */
* { box-sizing: border-box; padding: 0; margin: 0; }
html, body { height: 100%; }
body { 
	color:#101010;
/*	text-transform: full-size-kana;*/
}
img { max-width: 100%; }
a {
	color: #101010;
	text-decoration:none;
	transition: all .3s ease;
}
#wrap {
	min-height: 100%;
	position: relative;
	opacity: 0;
	transition: all 1s ease;
}
body#home { background: #101010; transition: all .3s ease; }
body#home.loaded { background: #fff; }
body.loaded #wrap { opacity: 1; }
body > iframe { display: none; }
/* header
------------------------------- */
header h1 {
	width: 20%;
	min-width: 200px;
	max-width: 300px;
	position: fixed;
	right: 5%;
	top: 60px;
	z-index: 2;
}
header h1 a { display: block; }
header h1 img { width:100%; }

/* gNav */
header nav {
	display: flex;
	align-items: center;
	width: 40%;
	height: 100%;
	background: #101010;
	padding: 0 5%;
	position: fixed;
	left: -40%;
	top: 0;
	z-index: 100;
	transition: all 0.3s ease;
}
header nav li { padding:0; margin: 0 0 1.5em; }
header nav li a { display: block; color:#fff; }
header nav li a svg { height: 1.7em; fill: #fff; }
header nav li rect { transition: all 0.3s ease; }
header nav li a:hover { opacity:0.8; }
header nav li a:hover rect { opacity: 0; }
header nav li.fb,
header nav li.tw { display: inline-block; font-size: 30px; margin: 0 10px 0 0; }

/* menuBtn */
header #menuBtn{
	width: 60px;
	height: 60px;
	background: #fff;
	position: fixed;
	top: 40px;
	left: 4%;
	z-index: 110;
	cursor: pointer;
	transition: all 0.3s ease;
}
header #menuBtn span {
	display: inline-block;
	width: 40px;
	height: 2px;
	background: #101010;
	transition: all 0.3s ease;
	box-sizing: border-box;
	position: absolute;
	left: 10px;
}
header #menuBtn span:nth-of-type(1) { top: 14px; }
header #menuBtn span:nth-of-type(2) { top: 48%; }
header #menuBtn span:nth-of-type(3) { bottom: 14px; }

.menuOpen header nav { left: 0; }
.menuOpen header #menuBtn { background: transparent; }
.menuOpen header #menuBtn span { background: #fff; }
.menuOpen header #menuBtn span:nth-of-type(1) { transform: translateY(15px) rotate(-315deg); }
.menuOpen header #menuBtn span:nth-of-type(2) { opacity: 0; }
.menuOpen header #menuBtn span:nth-of-type(3) { transform: translateY(-15px) rotate(315deg); }

/* footer
----------------------------------- */
footer {
	width: 100%;
	color:#fff;
	background:#101010;
	padding: 80px 7%;
	position: absolute;
	left: 0;
	bottom: 0;
}
footer nav li { display: inline-block; padding:0; margin: 0 1.5em 2em 0; }
footer nav li svg { max-width: 10em; height: 1.7em; fill: #fff; }
footer nav li rect { transition: all 0.3s ease; }
footer nav li .fa { font-size: 2em; }
footer nav li a { display: block; color: #fff; }
footer nav li a:hover { opacity:0.8; }
footer nav li a:hover svg rect { opacity: 0; }
footer .copyright { font-size: 1em; }

/* contents
------------------------------- */
.contents { padding: 10em 5% 5em; position: relative; }
.contentsTit svg{ max-width: 100%; height: 4em; fill: #101010; }

/* infoList */
.infoList li{
	position:relative;
	background:#101010;
	color:#fff;
}
.infoList li:nth-child(2n){ background: #202020; }
.infoList a {
	display: block;
	height: 100%;
	color:#fff;
	text-decoration:none;
	padding: 0 0 4em;
}
.infoList .thumb {
	position:relative;
	width:100%;
	/*height: 16em;*/
	overflow: hidden;
}
.infoList .thumb span {
	display: block;
	width: 100%;
	height: 100%;
	background: #ccc url(/image/content/ph_ktcc_news.gif) center center;
	background-size: cover;
	transition: all 0.3s ease;
	padding-top: 56.4824%;
}
.infoList li .date { padding: 2em 7% 1em; letter-spacing: 0.1em; }
.infoList li .new{ margin:0 0 0 5px; color:#f31414; }
.infoList li .tit { font-size: 1.3em; padding: 0 7%; }
.infoList li .tit br { display: none; }
.infoList .more { position: absolute; left: 7%; bottom: 1.8em; }
.infoList a:hover { color: #aaa; }
.infoList a:hover .thumb span { transform: scale(1.05); }

/* more */
.more { display: inline-block; position: relative; padding: 0 0.5em 0 0; }
.more::after {
	content: "→";
	display: inline-block;
	position: relative;
	left: 0.5em;
	transition: all 0.3s ease;
}
a:hover .more::after { left: 1em; }
.viewall { clear: both; text-align: right; padding: 1.5em 0 0; }
.viewall a { display: inline-block; color: #101010; font-size: 1.5em; }

/* back */
.detail .back a{
	display: block;
	color:#101010;
	text-decoration: none;
	padding: 4em 0 0;
}

/* nodata */
.nodata {
	background:#101010;
	color:#fff;
	padding: 4em 7%;
}

/* categoryList */
.categoryList li { margin: 0 0 1em; }
.categoryList a {
	display: inline-block;
	font-size: 1.5em;
	font-weight:bold;
	position: relative;
}
.categoryList a::after {
	content: '';
	width: 100%;
	height: 3px;
	background: #101010;
	position: absolute;
	left: 0;
	bottom: -3px;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform .3s;
}
.categoryList a.current::after,
.categoryList a:hover::after { transform: scale(1, 1); }

/* detail */
.detail .date { color:#888; margin: 0 0 1em; }
.detail .tit {
	font-size: 2em;
	font-weight: 500;
	border-bottom: 1px solid;
	padding: 0 0 1.5em;
	margin: 0 0 1.5em;
}
.detail .comment { line-height: 2; }
.detail .ph { margin: 2em 0; }
.detail .ph img { width:100%; }
.detail a{
  color:#FF7316;
  text-decoration:underline;
}
.detail a:hover{
  text-decoration:none;
}

/* home
------------------------------- */
#home #wrap {
	background: #fff url("../images/2017/ph_keyvisual_pc.jpg") no-repeat center center fixed;
	background-size: contain;
}
#home .pagetop { transform: rotate(0deg); bottom: 40px; }
#home.over .pagetop { transform: rotate(180deg); }
#home #keyVisual { position: relative; height: 100vh; }
#home #bnr {
	width: 320px;
	position: absolute;
	bottom: 20px;
	left: 5%;
}
#bnr .slick-list { border:0; }
.slick-dots { width: auto; }
.slick-dots li { margin:0 5px 0 0; }
.slick-slide img { width:100%; }
.bx-wrapper .bx-pager { text-align:left; }
.bx-wrapper .bx-pager.bx-default-pager a { height:12px; width:12px; }
#home .contentsTit { width: auto; float: none; padding:0 0 20px; }
#home section { padding:0 0 9%; }
#home .infoList {
	margin:0 0 10px;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:flex;
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	width: 100%;
	float: none;
}
#home .infoList li { position:relative; }
#home .nodata {
	position:relative;
	background:#101010;
	color:#fff;
	padding: 4em 2%;
}
/* video */
#home #videoInner ul li:not(:last-child){
  margin:0 0 6%;
}
#home #videoInner ul li{
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
	text-align:center;
}
#home #videoInner iframe {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}
#home .video .skuder { margin: -5.5%; }

/* popup */
#home #popup {
	display: flex;
	align-items: center;
	height: 100%;
	width: 100%;
	background:rgba(0,0,0,0.9);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
}
#home #popup .inner { width: 100%; padding-bottom: 56.25%; position: relative; overflow: hidden; }
#home #popup .inner iframe { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
#home #popup #close { width: 70px; height: 60px; position: absolute; top:15px; right:10px; z-index: 103; cursor: pointer; } 
#home #popup #close::before,
#home #popup #close::after {
	content: '';
	display: inline-block;
	width: 100%;
	height: 2px;
	background-color: #666;
	position: absolute;
	left: 0;
	transition: all 0.3s ease 0s;
}
#home #popup #close:hover::before,
#home #popup #close:hover::after { background-color: #eee; }
#home #popup #close::before { top:10px; transform: translateY(15px) rotate(-315deg); }
#home #popup #close::after { bottom:18px; transform: translateY(-15px) rotate(315deg); }



/* popup_youtube */

#popup_youtube .inner span.btn{
    display:inline-block;
    padding: 15px 40px 12px;
    color:#ff5fa2;
    border: 1px solid #ff5fa2;
    border-radius: 50px;
    line-height:1em;
}
#popup_youtube{
	display:block;
	position:fixed;
	top:0;
	left: 0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.85);
	z-index:1000;
}
#popup_youtube .closeBg{
	display:block;
	position:fixed;
	top:0;
	width:100%;
	height:100%;
	z-index:1001;
}
#popup_youtube .block{
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    z-index: 1100;
    transform: translate(-50%,-50%);
}
#popup_youtube .close .top{
	position:absolute;
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
#popup_youtube .close .bottom{
	position:absolute;
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
#popup_youtube .inner{
	text-align: center;
    line-height: 0;
    max-height: 70vh;
    width: auto;
}
#popup_youtube .inner iframe {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
#popup_youtube .inner a{
  display:block;
    height: 100%;
}
#popup_youtube .inner a:hover{
	opacity:0.7;
}
#popup_youtube .inner .popImage{
    max-height: 70vh;
}
#popup_youtube .inner .popImage img{
    width: auto;
    height: 100%;
    max-height: 70vh;
}
@media screen and (min-width: 900px) {
  #popup_youtube .close{
  	position:absolute;
  	width:40px;
  	height:40px;
  	top:-50px;
  	right:0;
  	cursor:pointer;
  	-webkit-transition: .3s;
  	transition: .3s;
  }
  #popup_youtube .close span{
  	top:20px;
  	width:40px;
  	height:2px;
  	position:absolute;
  	background:#fff;
  }
  #popup_youtube .close:hover{
  	-moz-transform: rotate(90deg);
  	-webkit-transform: rotate(90deg);
  	transform: rotate(90deg);
  }
}
@media screen and (max-width: 900px) {
  #popup_youtube .close{
  	position:absolute;
  	width:30px;
  	height:30px;
  	top:-40px;
  	right:-3px;
  }
  #popup_youtube .close span{
  	top:20px;
  	width:30px;
  	height:2px;
  	position:absolute;
  	background:#fff;
  }
  #popup_youtube .inner {
	    width: 90vw;
	    height: auto;
	}
	#popup_youtube .inner .popImage img{
	    height:  auto;
	}
}



/* BIOGRAPHY
----------------------------------- */
#biography .memberLink { margin:0 0 50px; text-align:center }
#biography .memberLink li { display:inline-block; padding:0 20px; }
#biography .memberLink li a {
	display: inline-block;
	color:#101010;
	font-size:1.5em;
	font-weight:bold;
	position: relative;
}
#biography .memberLink li a::after{
	position: absolute;
	bottom: -3px;
	left: 0;
	content: '';
	width: 100%;
	height: 2px;
	background: #101010;
	transform: scale(0, 1);
	transform-origin: left top;
}
#biography .comment p { margin:0 0 1.5em; }
#biography .profile .ph {
  position: relative;
}
#biography .profile .ph::before{
  position: absolute;
  top: 0;
  left: 0;
  content: url("../images/dummy.png");
  width: 100%;
  height: 100%;
}

/* DISCOGRAPHY
----------------------------------- */
#discography .listTit { clear: both; font-size: 2em; font-weight:bold; }
#discography .discList { padding: 0 0 3em; }
#discography .discList li { }
#discography .discList a { display:block; }
#discography .discList .thumb {
	background: #101010;
	line-height: 0;
	border:1px solid #eee;
	margin:0 0 10px;
	overflow: hidden;
}
#discography .discList .thumb img { width:100%; transition: all 0.3s ease 0s; }
#discography .discList a:hover .thumb img { transform: scale(1.2); opacity: 0.8; }
#discography .discList .tit { margin: 0 0 0.3em; }
#discography .discList .date { font-size: 0.8em; }
#discography .detail .ph { margin-top: 0; }
#discography .detail .cat { margin: 0 0 0.5em; }
#discography .detail .tit { border: none; padding: 0; margin: 0; }
#discography .detail .comment { margin: 0 0 1em; }
#discography .detail .songList { line-height:2em; border-top: 1px solid #333; padding: 2em 0 0; }

/* Photo
----------------------------------- */
#photo .motion { display: none; }
#photo .gallery { width:50%; float:left; padding:0 2% 2em 0; }
#photo .gallery:nth-of-type(2n) { padding:0 0 2em 2%; }
#photo .gallery:nth-of-type(2n+1) { clear:left; }
#photo .gallery li { display:none; }
#photo .gallery li:first-child { display: block; }
#photo .gallery li a { display:block; }
#photo .gallery .thumb { overflow:hidden; line-height:0; }
#photo .gallery .thumb img { width:100%; transition: all 0.3s ease 0s; }
#photo .gallery .thumbTit { margin: 1em 0 0.7em; }
#photo .gallery .thumbTxt { font-size: 0.8em; line-height:1.5em; }
#photo .gallery a:hover img { transform: scale(1.2); }

/* popup */
.pp_social { display:none; }
.pp_gallery ul .portlait img { position:relative; top:-20px; }
#photo .pp_close { background: none; text-indent: 0; text-align: right; }
#photo .pp_close::after { content: ' X'; }



@media screen and (min-width: 900px){
	/* PC only
	=================================== */
	.sp {display: none!important;}
	body {
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 500;
	}
	#wrap { padding: 0 0 234px; }
	header #menuBtn:hover span:nth-of-type(1) { top: 20px; }
	header #menuBtn:hover span:nth-of-type(3) { bottom: 20px; }
	.menuOpen header #menuBtn:hover span:nth-of-type(1) { width: 50px; left: 5px; top: 14px; }
	.menuOpen header #menuBtn:hover span:nth-of-type(3) { width: 50px; left: 5px; bottom: 14px; }

	/* pagetop */
	.pagetop{
		width: 60px;
		height: 60px;
		background: #fff;
		position: fixed;
		right: 4%;
		bottom: -80px;
		z-index: 110;
		transition: all 0.3s ease;
		transform: rotate(180deg);
	}
	.over .pagetop { opacity: 1; bottom: 40px; }
	.pagetop::before,
	.pagetop::after{
	  position: absolute;
	  bottom: 0;
	  margin: auto;
	  content: "";
	  vertical-align: middle;
	  transition: all 0.3s ease 0s;
	}
	.pagetop::before{
		width: 2px;
		height: 32px;
		background: #101010;
		left: 30px;
		top: 0;
	}
	.pagetop::after{
		width: 24px;
		height: 24px;
		border-top: 2px solid #101010;
		border-right: 2px solid #101010;
		left: 18px;
		top: 0px;
		transform: rotate(-225deg);
	}
	.pagetop:hover::before { height: 40px; }
	.pagetop:hover::after { top: 8px; }
	/* layout pc */
	.contents {
	/*	max-width:1700px; */
		padding: 10em 7% 5em;
		margin:0 auto;
		position: relative; 
	}
	.contentsTit {
		width: 30%;
		float: left;
		line-height:1.5em;
		text-align:left;
		padding:0 0 80px;
	}
	.contentsTit svg{
		max-width: 100%;
		height: 4em;
		fill: #101010;
	}
	
	/* info pc */
	.infoList { width: 65%; float: right; }
	.categoryList { position: absolute; top: 18em; left: 7%; }
	.nodata { width: 65%; /*float: right;*/ }
	.detail { width: 65%; float: right; padding: 0 0 40px; }

	/* home pc */
	#home header h1 { position: absolute; }
	#home .infoList li{ width: 33.33333%; width: calc(100% / 3); }
	#home .nodata { width: 33.33333%; width: calc(100% / 3); }
	#home .infoList .tit { font-size: 1.2em; }

	/* bio pc */
	#biography .profile li { border-top: 1px solid; padding: 4em 0 0; margin: 4em 0 0; }
	#biography .profile .ph { width: 40%; float: left; margin: 0 1.5em 1em 0; }
	#biography .profile .txt { padding:0 0 0 380px; }
	#biography .profile .name { line-height: 2.5em; margin: 0 0 2em; }
	#biography .profile .name img {
		height: 2.5em;
		margin-right: 1em;
		position: relative;
		top: 0.8em;
	}
	
	/* disco pc */
	#discography .listTit { width: 20%; float: left; }
	#discography .discList { width: 80%; float: right; }
	#discography .discList li { float:left; width: 32%; margin: 0 2% 2em 0; }
	#discography .discList li:nth-child(3n) { margin-right: 0; }
	#discography .discList li:nth-child(3n+1) { clear: left; }
	
	/* photo pc */
}
/* font-size */
@media screen and (min-width: 900px) { body { font-size: 1.3vw; } }
@media screen and (min-width: 1200px){ body { font-size: 1vw; } }
@media screen and (min-width: 1700px){ body { font-size: 17px; } }
@media screen and (max-width: 900px){
	/* SP only
	=================================== */
	.pc { display: none!important; }
	body{ font-size: 13px; font-family: 'Noto Sans JP', sans-serif; }
	#wrap { padding-bottom: 130px; }
	.pagetop { display: none; }

	/* header sp */
	header h1 { width: 150px; min-width: 0; top: 18px; }
	header nav { width: 100%; left: -100%; padding: 0 7%; }
	header nav li a svg { height: 20px; }
	header nav li.fb,
	header nav li.tw { font-size: 26px; }
	header #menuBtn { left: 0; top: 0; background: transparent; }
	header #menuBtn span { width: 25px; left: 18px; }
	header #menuBtn span:nth-of-type(1) { top: 20px; }
	header #menuBtn span:nth-of-type(3) { bottom: 20px; }
	.menuOpen header #menuBtn { left: 2%; }
	.menuOpen header #menuBtn span:nth-of-type(1) { transform: translateY(9px) rotate(-315deg); }
	.menuOpen header #menuBtn span:nth-of-type(2) { opacity: 0; }
	.menuOpen header #menuBtn span:nth-of-type(3) { transform: translateY(-9px) rotate(315deg); }

	/* footer sp */
	footer { text-align:center; padding: 30px 5% 20px; }
	footer nav { display: none; }
	footer .logo a { display: block; width: 200px; margin: 0 auto 20px; }

	/* layout sp */
	#wrap{
	  position:relative;
	  width:100%;
	  min-height:100%;
	  box-sizing: border-box;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	}
	.contents { padding: 80px 5% 0 }
	.contentsTit { padding:0 0 20px; font-size:10vw; }
	.contentsTit svg { height:9vw; }
	.contentsTit rect { display: none; }

	/* info sp */
	#infoDetail .contentsTit { display: none; }
	.infoList { margin: 0 0 1.5em; }
	.infoList li { width:100%; font-size: 11px; }
	.infoList li .thumb {/*height: 18em;*/ }
	.infoList li .date{ padding: 1.8em 5% 1em; }
	.infoList li .tit { font-size: 14px; padding: 0 5%; }
	.infoList li .more { left: 5%; }
	.categoryList li {
		display: inline-block;
	  	padding: 0;
	  	margin: 0 15px 30px 0;
	}
	.categoryList a { font-size:13px; }
	.viewall { margin: 0 -5.5% 0 0; padding: 0 5% 1.5em 0; }
	.viewall a { font-size: 16px; }
	.back a { font-size: 14px; padding: 2em 0 0; }
	.detail { margin-bottom: 2em; }
	.detail .tit { font-size: 18px; }
	.nodata { font-size: 14px; text-align: center; }
	
	/* home sp */
	#home #bg{
	  background: #fff url("../images/2017/ph_keyvisual_sp.jpg") no-repeat center top;
	  background-size: contain;
	  height: 100%;
	  left: 0;
	  position: fixed;
	  top: 0;
	  width: 100%;
	  z-index: 0;
	}
	#home #keyVisual { height: 88vh; }
	#home #bnr { width: 100%; left: 0; bottom:0; }
	.slick-initialized .slick-slide { margin: 0 5px; }
	.slick-dots{
	  padding:0 30px;
	  bottom: -25px;
	  box-sizing: border-box;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	}
	.slick-dots li{ width: 12px; height: 12px; }
	.slick-dots li button:before{ width: 10px; height: 10px; }

	#home .contents {
	  padding: 0;
	  width:100%;
	  box-sizing: border-box;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	}
	#home .contentsTit rect { display: block; }
	#home section { position: relative; padding: 2em 5% 0; }
	#home section.video{ padding-bottom: 2em; }
	#home #videoInner ul li{ margin-bottom: 2em; }
	#home .viewall { border-bottom: 0.5px solid; }
	#home .info .infoList li { margin: 0 0 1.5em; }

	/* bio sp */
	#biography .phBio { margin: 0 0 15px; }
	#biography .memberLink { margin:0 0 30px; }
	#biography .memberLink li { padding:0 10px; }
	#biography .memberLink li a { font-size:18px; }
	#biography .txt p { font-size: 14px; padding: 0; }
	#biography .profile li { padding:60px 0 0; }
	#biography .artist {
	  width:100%;
	  margin:0 0 10px;
	  border:1px solid #666;
	  box-sizing: border-box;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	}
	#biography .artist:after { display:table;content:" "; clear:both; }
	#biography .artist .ph { float:left; width:40%;line-height: 0;  margin: 0; }
	#biography .artist .name { padding:25% 0 0 45%; }
	#biography .name img { height:15px; }
	#biography .name span { display:block; margin:0; }

	/* disco sp */
	#discography .listTit { font-size: 18px; margin: 0 0 1em; }
	#discography .discList li { width: 50%; float: left; margin: 0 0 2em; }
	#discography .discList li:nth-child(odd) { clear: left; padding-right: 1%; }
	#discography .discList li:nth-child(even) { padding-left: 1%; }
	#discography .discList .tit { font-size: 15px; line-height: 1.4; }
	#discography .detail .ph { margin: 0 0 1em; }
	#discography .detail .cat { font-size: 12px; margin: 0 0 0.5em; }
	#discography .diskTit{ padding:10px 0 0; font-size:24px; }
	#discography .diskDetail{ padding:0; font-size:14px; }

	/* photo sp */
}