/*!
 * Credit: Wavelets
 * Developer: Takayuki Suzuki
 * Site: http://wavelets.jp/
 * Create: 2018.01.25
 * Modified: 2018.01.25
 * Memo:  [2018.01.25]
 *
 */



/**
 * ------------------------------------------------------------
 * Reset
 * ------------------------------------------------------------
 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, l, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
button, input, select, textarea {
	font-family : inherit;
	font-size : 100%;
}



/**
 * ------------------------------------------------------------
 * loader
 * ------------------------------------------------------------
 */
.loader { position:relative; height:100vh; }
.loader_messageSvg { opacity:0; }
.loader_messageSvg-current { position:absolute; top:50%; left:50%; width:300px; margin:-120px 0 0 -150px; stroke:#fff; fill:transparent; stroke-width:0.5; stroke-DASHarray:500;
	-webkit-animation: lineAnime 1.5s ease-in-out forwards;
					animation: lineAnime 1.5s ease-in-out forwards;
}

@media screen and (min-width: 768px) {
	.loader_messageSvg-current { width:380px; margin:-73px 0 0 -190px; }
}

@-webkit-keyframes lineAnime {
  0% {
    stroke-DASHoffset: 500;
    fill: transparent;
  }
  80% {
    stroke-DASHoffset: 100;
    fill: transparent;
  }
  100% {
    stroke-DASHoffset: 0;
    fill: #fff;
  }
}

@keyframes lineAnime {
  0% {
    stroke-DASHoffset: 500;
    fill: transparent;
  }
  80% {
    stroke-DASHoffset: 100;
    fill: transparent;
  }
  100% {
    stroke-DASHoffset: 0;
    fill: #fff;
  }
}



/**
 * ------------------------------------------------------------
 * common
 * ------------------------------------------------------------
 */
body { font-family:'Cinzel', sans-serif,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "ＭＳ Ｐゴシック"; color:#fff; font-weight:400; line-height:1.6; background-color:#000; }
body::before { background:url(../img/sp/bg.jpg) repeat-y center top; background-size:100% auto; display:block; position:fixed; top:0; left:0; width:100%; height:100%; padding-bottom:108px; content:""; z-index:-1; }
.body { opacity:0; margin-top:50px; overflow:hidden; }

/**
 * ------------------------------------------------------------
 * header
 * ------------------------------------------------------------
 */
.header { position:fixed; top:0; width:100%; box-shadow:0 0 6px 2px rgba(0,0,0,0.3); z-index:100;
	-webkit-backdrop-filter: saturate(100%) blur(4px);
	backdrop-filter: saturate(100%) blur(4px);
}
.header_container { height:50px; width:100%; display:table; }
.header_ttl { display:table-cell; width:100%; vertical-align:middle; text-align:center; }
.header_ttlLink { margin-left:50px; }
.header_ttlImg { width:75px; fill:#fff; vertical-align:bottom; }

.header_nav { display:none; }
.header_navContainer { position:absolute; left:0; top:100px; width:100%; }
.header_navItem { text-align:center; }
.header_navItem + .header_navItem { margin-top:25px; }
.header_navLink { text-decoration:none; color:#fff; font-weight:400; font-size:20px; }

.header_action { padding:0 15px 0; display:table-cell; vertical-align:middle; width:20px; }
.header_ico { display:block; position:relative; width:20px; height:2px; background-color:#fff; margin:-2px 0 0 0; }
.header_ico:before { position:absolute; top:-8px; display:block; content:""; width:20px; height:2px; background-color:#fff; transition:0.3s; }
.header_ico:after { position:absolute; top:8px; display:block; content:""; width:20px; height:2px; background-color:#fff; transition:0.3s; }


.header-active { background-color:rgba(0,0,0,0.9); }
.header-active .header_action {}
.header-active .header_action .header_ico:before { top:0; }
.header-active .header_action .header_ico:after { top:0; }
.header-active .header_action .header_ico { height:0; }
.header-active .header_action .header_ico:before { transform:rotate(-45deg); top:0; }
.header-active .header_action .header_ico:after { transform:rotate(45deg); top:0; }



/**
 * ------------------------------------------------------------
 * hero
 * ------------------------------------------------------------
 */
.hero_container { margin:50px 15px 0; }
.hero_jacket { width:230px; margin:auto; }
.hero_jacketImg { width:100%; vertical-align:bottom; }
.hero_text { margin-top:25px; text-align:center; }
.hero_textTtl { margin-top:0; font-weight:400; font-size:20px; letter-spacing:10px; }
.hero_textTtlAlbum { margin-top:10px; display:block; font-weight:400; font-style:italic; font-size:35px; letter-spacing:0; }
.hero_textLead { margin-top:10px; font-size:22px; }
.hero_movie { margin:60px 15px 0; }
.hero_movieFrame { width:100%; height:auto; }



/**
 * ------------------------------------------------------------
 * about
 * ------------------------------------------------------------
 */
.about { position:relative; width:640px; margin-top:100px; margin-left:-102px; padding:80px 0 100px; background:url(../img/sp/about_bg.jpg); background-position:0px center; background-size:100% auto; transform:rotate(10deg); background-repeat: repeat-x; }
.about_container { width:100vw; margin-left:100px; transform:rotate(-10deg); }
.about_inner { margin:0 15px; }
.about_ttl { font-weight:400; font-size:24px; line-height:2; text-align:center; background:url(../img/sp/ttl_ico.png) center no-repeat; background-size:contain; }
.about_artist { margin-top:20px; min-width:290px; height:193px; position:relative; overflow:hidden; }
.about_artistImg { position:absolute; bottom:0; width:100%;  }
.about_textTtl { margin-top:30px; font-weight:400; font-size:20px; text-align:center; letter-spacing:10px; }
.about_textLead { margin-top:20px; font-size:15px; text-align:center; }



/**
 * ------------------------------------------------------------
 * contact
 * ------------------------------------------------------------
 */
.contact { padding:50px 15px 0; }
.contact_container { width:100%; margin:auto; }

.contact_ttl { font-weight:400; font-size:24px; line-height:2; text-align:center; background:url(../img/sp/ttl_ico.png) center no-repeat; background-size:contain; }
.contact_actionInner { margin-top:20px; }
.contact_inputContainer + .contact_inputContainer { margin-top:10px; }
.contact_inputContainer + .contact_textAreaContainer { margin-top:10px; }
.contact_input { width:100%; padding:10px 0; border:none; height:20px; background-color:rgba(255,255,255,0.2); color:#fff; font-size:14px; border-radius:0; }
.contact_textAreaContainer .contact_input { height:160px; }
.contact_button { padding:10px 0; width:180px; text-align:center; display:block; margin:30px auto 0; font-size:16px; color:#fff; border:2px solid #fff; border-radius:30px; background-color:transparent; cursor:pointer; transition:0.4s; }
.contact_button:hover { opacity:1; }

.contact_input::-webkit-input-placeholder,
.contact_textArea::-webkit-input-placeholder { color:#fff; padding-left:10px; }
.contact_input:-ms-input-placeholder,
.contact_textArea::-webkit-input-placeholder { color:#fff; padding-left:10px; }
.contact_input::-moz-placeholder,
.contact_textArea::-webkit-input-placeholder { color:#fff; padding-left:10px; }



/**
 * ------------------------------------------------------------
 * footer
 * ------------------------------------------------------------
 */
.footer { margin-top:80px; width:100%; background-color:rgba(0,0,0,0.5); }
.footer_copy { padding:15px 0; font-size:10px; text-align:center; }



/**
 * ------------------------------------------------------------
 * slick override
 * ------------------------------------------------------------
 */
 .slick-prev, .slick-next { z-index:2; font-size:0; line-height:0; position:absolute; top:50%; margin:-20px 0 0 0; width:30px; height:30px; padding:0; cursor:pointer; color:transparent; border:none; outline:none; background:rgba(0,0,0,0.6); border-radius:15px; }
.slick-prev { margin-left:-15px; }
.slick-prev:after { position: absolute; top:50%; left:50%; display:block; content:""; width:10px; height:10px; margin:-5px 0 0 -3px; border-top:1px solid #fff; border-right:1px solid #fff; transform:rotate(225deg); }
.slick-next { right:0; margin-right:-15px; }
.slick-next:after { position: absolute; top:50%; left:50%; display:block; content:""; width:10px; height:10px; margin:-5px 0 0 -8px; border-top:1px solid #fff; border-right:1px solid #fff; transform:rotate(45deg); }
.slick-dots { margin-top:5px; font-size:0; line-height:1; text-align:center; }
.slick-dots button { display:block; outline:0; position:relative; border:0; padding:0; width:100%; height:100%; background:transparent; }
.slick-dots li { display:inline-block; margin:0 3px; width:8px; height:8px; }
.hero_movie .slick-dots button:before { content:""; position:absolute; left:0; top:0; border-radius:4px; width:100%; height:100%; background:#fff; }
.hero_movie .slick-dots .slick-active button:before { background-color:#d585de; }



/**
 * ------------------------------------------------------------------------------------------------------------------------
 * PC用レイアウト
 * ------------------------------------------------------------------------------------------------------------------------
 */
@media screen and (min-width: 768px) {
	/**
	 * ------------------------------------------------------------
	 * common
	 * ------------------------------------------------------------
	 */
	body { background:url(../img/pc/bg.jpg) no-repeat center bottom fixed; }
	body::before { content:none; }
	.body { margin-top:70px; overflow:hidden; }



	/**
	 * ------------------------------------------------------------
	 * header
	 * ------------------------------------------------------------
	 */
	.header { position:fixed; top:0; width:100%; box-shadow:0 0 6px 2px rgba(0,0,0,0.3); z-index:100; background-color:rgba(0,0,0,0.7); transition:0.3s;
		-webkit-backdrop-filter: saturate(100%) blur(4px);
		backdrop-filter: saturate(100%) blur(4px);
	}
	.header_container { height:70px; width:1000px; margin:auto; display:table; }
	.header_ttl { display:table-cell; width:100%; vertical-align:middle; text-align:left; }
	.header_ttlLink { margin-left:0; }
	.header_ttlImg { width:100px; transition:0.3s; }
	.header_ttlImg:hover { opacity:0.6; }

	.header_nav { display:block; }
	.header_navContainer { display:table; width:850px; height:70px; position:inherit; }
	.header_navItem { display:table-cell; text-align:center; vertical-align:middle; }
	.header_navItem + .header_navItem { margin-top:25px; }
	.header_navLink { display:block; height:70px; text-decoration:none; color:#fff; font-weight:400; font-size:16px; line-height:70px; transition:0.4s; }
	.header_navLink:hover { background-color:rgba(255,255,255,0.3); }

	.header_action { display:none; }


	/**
	 * ------------------------------------------------------------
	 * hero
	 * ------------------------------------------------------------
	 */
	.hero_container { display:table; width:1000px; margin:50px auto 0; }
	.hero_jacket { display:table-cell; width:440px; }
	.hero_text { display:table-cell; vertical-align:middle; padding-left:20px; margin-top:0; text-align:left; }
	.hero_textTtl { margin-top:0; font-weight:400; font-size:30px; }
	.hero_textTtlAlbum { margin-top:5px; display:block; font-weight:400; font-style:italic; font-size:56px; }
	.hero_textLead { margin-top:40px; font-size:34px; font-weight:400; }
	.hero_movie { width:560px; margin:100px auto 0; }
	.hero_movieFrame { width:560px; height:315px; }



	/**
	 * ------------------------------------------------------------
	 * about
	 * ------------------------------------------------------------
	 */
	.about { position:relative; width:200vw; margin-top:200px; background:url(../img/pc/about_bg.jpg); background-position:0px center;  background-size:auto;  transform:rotate(8deg); }
	.about_container { width:100vw; transform:rotate(-8deg); }
	.about_inner { margin:0 15px; }
	.about_ttl { font-weight:400; font-size:38px; line-height:2; text-align:center; background:url(../img/pc/ttl_ico.png) center no-repeat; background-size:contain; }
	.about_artist { margin:40px auto 0; width:690px; height:460px;}
	.about_artistImg { position:absolute; bottom:0; width:100%;  }
	.about_textTtl { margin-top:50px; font-weight:400; font-size:40px; letter-spacing:10px; }
	.about_textLead { margin-top:30px; font-size:17px; text-align:center; }



	/**
	 * ------------------------------------------------------------
	 * contact
	 * ------------------------------------------------------------
	 */
	.contact { padding:50px 15px 0; }
	.contact_container { width:690px; margin:auto; }

	.contact_ttl { font-weight:400; font-size:38px; line-height:2; text-align:center; background:url(../img/pc/ttl_ico.png) center no-repeat; background-size:contain; }
	.contact_actionInner { margin-top:40px; }
	.contact_inputContainer + .contact_inputContainer { margin-top:10px; }
	.contact_inputContainer + .contact_textAreaContainer { margin-top:10px; }
	.contact_input { width:100%; padding:10px 0; border:none; height:40px; background-color:rgba(255,255,255,0.2); color:#fff; font-size:14px; border-radius:0; }
	.contact_textAreaContainer .contact_input { height:300px; }
	.contact_button { padding:15px 0; width:240px; text-align:center; display:block; margin:30px auto 0; font-size:18px; color:#fff; border:2px solid #fff; border-radius:36px; background-color:transparent; cursor:pointer; transition:0.4s; }
	.contact_button:hover { background-color:rgba(255,255,255,0.3);  }

	.contact_input::-webkit-input-placeholder,
	.contact_textArea::-webkit-input-placeholder { color:#fff; padding-left:10px; }
	.contact_input:-ms-input-placeholder,
	.contact_textArea::-webkit-input-placeholder { color:#fff; padding-left:10px; }
	.contact_input::-moz-placeholder,
	.contact_textArea::-webkit-input-placeholder { color:#fff; padding-left:10px; }



	/**
	 * ------------------------------------------------------------
	 * footer
	 * ------------------------------------------------------------
	 */
	.footer { margin-top:80px; width:100%; background-color:rgba(0,0,0,0.5); }
	.footer_copy { padding:15px 0; font-size:10px; text-align:center; }
}