@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Work+Sans:600,800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500,700&display=swap&subset=japanese');

@font-face {
    font-family: "YakuHanJP";
    font-style: normal;
    font-weight: 300;
    src: url("../fonts/YakuHanJP/YakuHanJP-Light.woff2") format("woff2"),
    url("../fonts/YakuHanJP/YakuHanJP-Light.woff") format("woff");
}

@font-face {
    font-family: "YakuHanJP";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/YakuHanJP/YakuHanJP-Regular.woff2") format("woff2"),
    url("../fonts/YakuHanJP/YakuHanJP-Regular.woff") format("woff");
}

@font-face {
    font-family: "YakuHanJP";
    font-style: normal;
    font-weight: 500;
    src: url("../fonts/YakuHanJP/YakuHanJP-Medium.woff2") format("woff2"),
    url("../fonts/YakuHanJP/YakuHanJP-Medium.woff") format("woff");
}

@font-face {
    font-family: "YakuHanJP";
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/YakuHanJP/YakuHanJP-bold.woff2") format("woff2"),
    url("../fonts/YakuHanJP/YakuHanJP-bold.woff") format("woff");
}

@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W0);
  font-weight: 100;
}
@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W1);
  font-weight: 200;
}
@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W2);
  font-weight: 300;
}
@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W3);
  font-weight: 400;
}
@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W4);
  font-weight: 500;
}
@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W5);
  font-weight: 600;
}
@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W6);
  font-weight: 700;
}
@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W7);
  font-weight: 800;
}
@font-face {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W8);
  font-weight: 900;
}
@font-face {
  font-family: "Hiragino Sans W9";
  src: local(HiraginoSans-W9);
  font-weight: 900;
}

* {
	margin: 0;
	padding: 0;
	-webkit-backface-visibility: hidden;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: none;
/*
	overflow-y: scroll;
	overflow-x: visible;
*/
	height: 100%;
	background: #000;
}

body {
	margin: 0;
	padding: 0;
	overflow-x: visible;
	width: 100%;
	height: 100%;
	font-size: 15px;
	font-weight: 300;
	font-family: "Hiragino Sans", "ヒラギノ角ゴ Pro W3", 'Hiragino Kaku Gothic Pro', 'Noto Sans JP', "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Osaka", verdana, sans-serif;
	font-feature-settings: 'palt' 1;
	text-align: center;
	line-height: 2;
	-webkit-font-smoothing: antialiased;
	letter-spacing: 0.12em;
	color: #fff;
	background: #000;
}

body#home {
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
	padding: 0;
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

p {
	padding: 0;
	margin: 0;
}

img {
	-webkit-touch-callout: none;
	-ms-interpolation-mode: bicubic;
	vertical-align: bottom;
}

a {
	word-break: break-all;
	text-decoration: underline;
	color: #545759;
	outline: none;
	-webkit-transition: 0.4s ease-in-out;
	-moz-transition: 0.4s ease-in-out;
	-ms-transition: 0.4s ease-in-out;
	-o-transition: 0.4s ease-in-out;
	transition: 0.4s ease-in-out;
}

a:active,
a:hover,
a:focus {
	outline: none;
}

a:hover {
	filter: alpha(opacity=60);
	-moz-opacity: .6;
	opacity: .6;
}


table {
	border-collapse: collapse;
}

.wrapper :before,
.wrapper :after {
}

#fancybox-content,
#fancybox-wrap *,
#fancybox-wrap {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	-o-box-sizing: content-box;
	-ms-box-sizing: content-box;
	box-sizing: content-box;
}

#fancybox-overlay {
	position: fixed !important;
	height: 100vh !important;
	background: rgb(8,24,127) !important;
	background: -moz-linear-gradient(top,  rgba(8,24,127,1) 0%, rgba(9,37,146,1) 7%, rgba(8,106,204,1) 51%, rgba(174,228,254,1) 100%) !important;
	background: -webkit-linear-gradient(top,  rgba(8,24,127,1) 0%,rgba(9,37,146,1) 7%,rgba(8,106,204,1) 51%,rgba(174,228,254,1) 100%) !important;
	background: linear-gradient(to bottom,  rgba(8,24,127,1) 0%,rgba(9,37,146,1) 7%,rgba(8,106,204,1) 51%,rgba(174,228,254,1) 100%) !important;
}

#fancybox-close {
	padding: 56px 0 0 0;
	overflow: hidden;
	position: fixed;
	top: 0;
	right: 0;
	width: 56px;
	height: 0;
	cursor: pointer;
	background: url(../images/common/nav/close.svg) no-repeat;
	background-size: 100% auto;
}

#fancybox-right {
	right: -50px;
	width: 50px;
	background: url(../images/common/fancybox/custom/right.png) no-repeat right center;
}

#fancybox-left {
	left: -50px;
	width: 50px;
	background: url(../images/common/fancybox/custom/left.png) no-repeat left center;
}

#fancybox-left-ico,
#fancybox-right-ico {
	background: none;
}


.fancybox-bg {
	display: none;
}

/*--------------------------------------
loading
--------------------------------------*/


.loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	z-index: 5000;
}

.loader {
	margin: -20px 0 0 -20px;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	border: 1px solid #fff;
	border-radius: 50%;
	border-top-color: transparent;
	animation: spin 0.75s infinite linear;
	z-index: 5002;
}

.loader:before {
	content: "";
	margin: -20px 0 0 -20px;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 50%;
	z-index: 5001;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}



/*--------------------------------------
 * コンテンツ
 * ---------------------------------------*/

.wrapper {
	text-align: left;
	position: relative;
}

.wrapper::after {
	content: "";
	opacity: 0;
	height: 0;
	width: 0;
	background: url(../images/contents/release/lyric/lyric_all.png) no-repeat center top;
}

.container {
	position: relative; /*toTop用*/
	overflow: hidden;
	text-align: left;
	width: 100%;
	height: auto;
}

.container::after {
	content: "";
	opacity: 0;
	height: 0;
	width: 0;
	background: url(../images/common/nav/close.svg) no-repeat center top;
}

/*--------------------------------------
 * ヘッダー
 * ---------------------------------------*/

#top {
}


.siteTitle {
	padding-top: 32px;
	overflow: hidden;
	position: fixed;
	top: 24px;
	left: 24px;
	width: 220px;
	height: 0;
	background: url(../images/common/header/title.svg) no-repeat center top;
	background-size: 100% auto;
	z-index: 100;
}

.snsLink {
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 100;
}

.snsLink li {
	float: left;
}

.snsLink li:first-child {
	width: 28px;
	}

.snsLink .twitter a,
.snsLink .facebook a {
	padding: 32px 0 0;
	overflow: hidden;
	display: block;
	width: 28px;
	height: 0;
}

.snsLink .twitter a {
	background: url(../images/common/nav/twitter.svg) no-repeat center center;
	background-size: auto 100%;
}

.snsLink .facebook a {
	background: url(../images/common/nav/facebook.svg) no-repeat center center;
	background-size: auto 100%;
}

/*--------------------------------------
 * コンテンツ
 * ---------------------------------------*/

.primary {
	position: relative;
	width: 100%;
}


.primary::before {
	content: "SCROLL";
	position: fixed;
	bottom: 12px;
	right: -62px;
	display: block;
	width: 100px;
	line-height: 20px;
	text-align: left;
	font-size: 12px;
	letter-spacing: 0;
	font-weight: 700;
	font-family: "Helvetica Neue", Helvetica, 'Work Sans', "Hiragino Sans", "ヒラギノ角ゴ Pro W3", 'Hiragino Kaku Gothic Pro', "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Osaka", verdana, sans-serif;
	-ms-user-select: none;
	user-select: none;
	color: #fff;
	transform: rotate(-90deg);
	transform-origin: top left;
	z-index: 101;
}

/*
.primary::after {
	content: "";
	position: fixed;
	bottom: 70px;
	right: 50px;
	display: block;
	width: 1px;
	height: 50px;
	background: rgba(255, 255, 255, .2);
	z-index: 101;
}

.primary::after {
	opacity: 1;
	bottom: 120px;
	height: 0px;
	background: rgba(255, 255, 255, 1);
	-webkit-animation: expansion 2s cubic-bezier(.17,.67,.07,.99) 0s infinite forwards;
	-moz-animation: expansion 2s cubic-bezier(.17,.67,.07,.99) 0s infinite forwards;
	-ms-animation: expansion 2s cubic-bezier(.17,.67,.07,.99) 0s infinite forwards;
	-o-animation: expansion 2s cubic-bezier(.17,.67,.07,.99) 0s infinite forwards;
	animation: expansion 2s cubic-bezier(.17,.67,.07,.99) 0s infinite forwards;
}
/*

/* expansion */
@-webkit-keyframes expansion {
	0% {
		opacity: 1;
		bottom: 120px;
		height: 0px;
	}
	50% {
		opacity: 1;
		bottom: 70px;
		height: 50px;
	}
	60% {
		opacity: 1;
		bottom: 70px;
		height: 0px;
	}
}

@-moz-keyframes expansion {
	0% {
		opacity: 1;
		bottom: 120px;
		height: 0px;
	}
	50% {
		opacity: 1;
		bottom: 70px;
		height: 50px;
	}
	60% {
		opacity: 1;
		bottom: 70px;
		height: 0px;
	}
}

@-ms-keyframes expansion {
	0% {
		opacity: 1;
		bottom: 120px;
		height: 0px;
	}
	50% {
		opacity: 1;
		bottom: 70px;
		height: 50px;
	}
	60% {
		opacity: 1;
		bottom: 70px;
		height: 0px;
	}
}

@-o-keyframes expansion {
	0% {
		opacity: 1;
		bottom: 120px;
		height: 0px;
	}
	50% {
		opacity: 1;
		bottom: 70px;
		height: 50px;
	}
	60% {
		opacity: 1;
		bottom: 70px;
		height: 0px;
	}
}

@keyframes expansion {
	0% {
		opacity: 1;
		bottom: 120px;
		height: 0px;
	}
	50% {
		opacity: 1;
		bottom: 70px;
		height: 50px;
	}
	60% {
		opacity: 1;
		bottom: 70px;
		height: 0px;
	}
}


#release {
	width: 100%;
	z-index: 100;
}

.pagenation {
	padding: 0 16px 0 0;
	position: fixed;
	right: 0;
	bottom: 32px;
	z-index: 100;
}

.pagenation li {
	margin-top: 1px;
	list-style-type: none;
}

.pagenation a {
	display: block;
	width: 1px;
	height: 16px;
	background: rgba(255, 255, 255, .2);
	-webkit-transition: 0.4s ease-in-out;
	-moz-transition: 0.4s ease-in-out;
	-ms-transition: 0.4s ease-in-out;
	-o-transition: 0.4s ease-in-out;
	transition: 0.4s ease-in-out;
}

.pagenation a.active {
	background: rgba(255, 255, 255, 1);
}

#release .contents,
#release .section,
#release h2 {
	position: relative;
	width: 100%;
	padding-top: 100vh;
}

#release .contents {
}


#release h2 span,
#release .contents .detail,
#release .section > figure {
	display: block;
	position: fixed;
	top: 50%;
	left: 50%;
	opacity: 0;
	width: 90%;
	text-align: center;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
	z-index: 10;
}

#release h2.active span,
#release .contents.active .detail,
#release .section.active > figure {
	-webkit-animation: fadeIn 4s cubic-bezier(.17,.67,.6,.92) 1 forwards;
	-moz-animation: fadeIn 4s cubic-bezier(.17,.67,.6,.92) 1 forwards;
	-ms-animation: fadeIn 4s cubic-bezier(.17,.67,.6,.92) 1 forwards;
	-o-animation: fadeIn 4s cubic-bezier(.17,.67,.6,.92) 1 forwards;
	animation: fadeIn 4s cubic-bezier(.17,.67,.6,.92) 1 forwards;
}

#release h2 span {
	padding-top: 16%;
	overflow: hidden;
	width: 40%;
	height: 0;
	background: url(../images/contents/release/diary.svg) no-repeat center center;
	background-size: 100% auto;
}

#release .section figure img {
	width: 100%;
}

#release #lyric1 figure img {
	background: url(../images/contents/release/lyric/l1.svg) no-repeat;
	background-size: 100% auto;
}

#release #lyric2 figure img {
	background: url(../images/contents/release/lyric/l2.svg) no-repeat;
	background-size: 100% auto;
}

#release #lyric3 figure img {
	background: url(../images/contents/release/lyric/l3.svg) no-repeat;
	background-size: 100% auto;
}

#release #lyric4 figure img {
	background: url(../images/contents/release/lyric/l4.svg) no-repeat;
	background-size: 100% auto;
}

#release #lyric5 figure img {
	background: url(../images/contents/release/lyric/l5.svg) no-repeat;
	background-size: 100% auto;
}

#release #lyric6 figure img {
	background: url(../images/contents/release/lyric/l6.svg) no-repeat;
	background-size: 100% auto;
}

#release #lyric7 figure img {
	background: url(../images/contents/release/lyric/l7.svg) no-repeat;
	background-size: 100% auto;
}

#release #lyric8 figure img {
	background: url(../images/contents/release/lyric/l8.svg) no-repeat;
	background-size: 100% auto;
}

#release #lyric9 figure img {
	background: url(../images/contents/release/lyric/l9.svg) no-repeat;
	background-size: 100% auto;
}

#release #lyric10 figure img {
	background: url(../images/contents/release/lyric/l10.svg) no-repeat;
	background-size: 100% auto;
}

#release #lyric11 figure img {
	background: url(../images/contents/release/lyric/l11.svg) no-repeat;
	background-size: 100% auto;
}

#release #lyric12 figure img {
	background: url(../images/contents/release/lyric/l12.svg) no-repeat;
	background-size: 100% auto;
}

#release h2::after,
#release .section::after {
	content: "";
	position: relative;
	position: fixed;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100vh;
	background: #000;
background: rgb(0,0,0);
background: -moz-linear-gradient(top,  rgba(0,0,0,1) 47%, rgba(0,23,43,1) 100%);
background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 47%,rgba(0,23,43,1) 100%);
background: linear-gradient(to bottom,  rgba(0,0,0,1) 47%,rgba(0,23,43,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00172b',GradientType=0 );

	z-index: 5;
}

#release .section:not(#lyric12):not(.contents).active::after {
	-webkit-animation: fadeOut 6s cubic-bezier(.17,.67,.6,.92) 1 forwards;
	-moz-animation: fadeOut 6s cubic-bezier(.17,.67,.6,.92) 1 forwards;
	-ms-animation: fadeOut 6s cubic-bezier(.17,.67,.6,.92) 1 forwards;
	-o-animation: fadeOut 6s cubic-bezier(.17,.67,.6,.92) 1 forwards;
	animation: fadeOut 6s cubic-bezier(.17,.67,.6,.92) 1 forwards;
}

#release #lyric12::after,
#release .contents::after {
	opacity: 0;
background: rgb(8,24,127);
background: -moz-linear-gradient(top,  rgba(8,24,127,1) 0%, rgba(9,37,146,1) 7%, rgba(8,106,204,1) 51%, rgba(174,228,254,1) 100%);
background: -webkit-linear-gradient(top,  rgba(8,24,127,1) 0%,rgba(9,37,146,1) 7%,rgba(8,106,204,1) 51%,rgba(174,228,254,1) 100%);
background: linear-gradient(to bottom,  rgba(8,24,127,1) 0%,rgba(9,37,146,1) 7%,rgba(8,106,204,1) 51%,rgba(174,228,254,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#08187f', endColorstr='#aee4fe',GradientType=0 );
}

/*
#release #lyric1::after {
}

#release #lyric2::after {
}

#release #lyric3::after {
}

#release #lyric4::after {
	background: url(../images/contents/release/lyric/bg/bg1.png) no-repeat;
	background-size: 100% 100%;
}

#release #lyric5::after {
	background: url(../images/contents/release/lyric/bg/bg2.png) no-repeat;
	background-size: 100% 100%;
}

#release #lyric6::after {
	background: url(../images/contents/release/lyric/bg/bg3.png) no-repeat;
	background-size: 100% 100%;
}

#release #lyric7::after {
	background: url(../images/contents/release/lyric/bg/bg4.png) no-repeat;
	background-size: 100% 100%;
}
*/


#release #lyric12.active::after {
	-webkit-animation: fadeIn 4s cubic-bezier(.17,.67,.6,.92) 1 forwards;
	-moz-animation: fadeIn 4s cubic-bezier(.17,.67,.6,.92) 1 forwards;
	-ms-animation: fadeIn 4s cubic-bezier(.17,.67,.6,.92) 1 forwards;
	-o-animation: fadeIn 4s cubic-bezier(.17,.67,.6,.92) 1 forwards;
	animation: fadeIn 4s cubic-bezier(.17,.67,.6,.92) 1 forwards;
}

#release .contents.active::after {
	-webkit-animation: fadeIn 0s cubic-bezier(.17,.67,.6,.92) 1 forwards;
	-moz-animation: fadeIn 0s cubic-bezier(.17,.67,.6,.92) 1 forwards;
	-ms-animation: fadeIn 0s cubic-bezier(.17,.67,.6,.92) 1 forwards;
	-o-animation: fadeIn 0s cubic-bezier(.17,.67,.6,.92) 1 forwards;
	animation: fadeIn 0s cubic-bezier(.17,.67,.6,.92) 1 forwards;
}



/* fadeOut */
@-webkit-keyframes fadeOut {
	0% { opacity: 1;}
	50% { opacity: 0;}
	100% { opacity: 0;}
}

@-moz-keyframes fadeOut {
	0% { opacity: 1;}
	50% { opacity: 0;}
	100% { opacity: 0;}
}

@-ms-keyframes fadeOut {
	0% { opacity: 1;}
	50% { opacity: 0;}
	100% { opacity: 0;}
}

@-o-keyframes fadeOut {
	0% { opacity: 1;}
	50% { opacity: 0;}
	100% { opacity: 0;}
}

@keyframes fadeOut {
	0% { opacity: 1;}
	50% { opacity: 0;}
	100% { opacity: 0;}
}

/* fadeIn */
@-webkit-keyframes fadeIn {
	0% { opacity: 0;}
	80% { opacity: 1;}
	100% { opacity: 1;}
}

@-moz-keyframes fadeIn {
	0% { opacity: 0;}
	80% { opacity: 1;}
	100% { opacity: 1;}
}

@-ms-keyframes fadeIn {
	0% { opacity: 0;}
	80% { opacity: 1;}
	100% { opacity: 1;}
}

@-o-keyframes fadeIn {
	0% { opacity: 0;}
	80% { opacity: 1;}
	100% { opacity: 1;}
}

@keyframes fadeIn {
	0% { opacity: 0;}
	80% { opacity: 1;}
	100% { opacity: 1;}
}

#release .contents .detail {
	overflow: hidden;
	width: 80%;
	display: none;
}

#release .contents.active .detail {
	display: block;
}

#release .contents .detail::before {
	content: "";
	padding-top: 48%;
	float: left;
	display: block;
	width: 50%;
	height: 0;
}

#release .detail h3 {
	padding-top: 28%;
	overflow: hidden;
	width: 50%;
	height: 0;
	background: url(../images/contents/release/title.svg) no-repeat;
	background-size: 100% auto;
}

#release .detail .date {
	padding-top: 7%;
	overflow: hidden;
	width: 50%;
	height: 0;
	background: url(../images/contents/release/date.svg) no-repeat;
	background-size: 100% auto;
}

#release .detail .jacket {
	position: absolute;
	top: 0;
	left: 0;
	width: 46%;
}

#release .detail .jacket img {
	width: 100%;
	background: url(../images/contents/release/jacket.jpg) no-repeat;
	background-size: 100% auto;
}

#release .link {
	overflow: hidden;
}

#release .link li {
	padding: 2% 2% 0 0;
	float: left;
	width: 45%;
}

#release .link a {
	padding: 0 .8em;
	display: block;
	width: 100%;
	color: #086ACC;
	font-size: 1.3vw;
	text-align: center;
	line-height: 2.8;
	letter-spacing: 0;
	font-weight: 700;
	text-decoration: none;
	background: #fff;
	border-radius: 4px;
	-ms-user-select: none;
	user-select: none;
}

#release .lyric button {
	padding: 0 .8em;
	display: block;
	width: 100%;
	color: #086ACC;
	font-size: 1.3vw;
	font-weight: 700;
	line-height: 2.8;
	letter-spacing: 0;
	text-decoration: none;
	background: #fff;
	border-radius: 4px;
	outline: none;
	border: none;
	cursor: pointer;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: 0.4s ease-in-out;
	-moz-transition: 0.4s ease-in-out;
	-ms-transition: 0.4s ease-in-out;
	-o-transition: 0.4s ease-in-out;
	transition: 0.4s ease-in-out;
}

#release .lyric button:hover {
	filter: alpha(opacity=60);
	-moz-opacity: .6;
	opacity: .6;
}

#lyrics figure {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	max-width: 100%;
	z-index: 4000;
}

#lyrics figure > button {
	margin: 0;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	max-width: 100%;
	cursor: pointer;
	border: none;
	outline: none;
background: rgb(8,24,127);
background: -moz-linear-gradient(top,  rgba(8,24,127,.95) 0%, rgba(9,37,146,.95) 7%, rgba(8,106,204,.95) 51%, rgba(174,228,254,.95) 100%);
background: -webkit-linear-gradient(top,  rgba(8,24,127,.95) 0%,rgba(9,37,146,.95) 7%,rgba(8,106,204,.95) 51%,rgba(174,228,254,.95) 100%);
background: linear-gradient(to bottom,  rgba(8,24,127,.95) 0%,rgba(9,37,146,.95) 7%,rgba(8,106,204,.95) 51%,rgba(174,228,254,.95) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#08187f', endColorstr='#aee4fe',GradientType=0 );
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
	transition: none;
	z-index: 400;
}

	#lyrics figure > button:active,
	#lyrics figure > button:hover,
	#lyrics figure > button:focus {
		outline: none;
		opacity: 1;
	}

#lyrics figure > button::before {
	content: "";
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	width: 56px;
	height: 56px;
	cursor: pointer;
	background: url(../images/common/nav/close.svg) no-repeat;
	background-size: 100% auto;
	z-index: 401;
}

#lyrics figure div {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80%;
	height: 70%;
	overflow-y: scroll;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
	z-index: 401;
}

#lyrics figure img {
	width: 100%;
	background: url(../images/contents/release/lyric/lyric_all.png) no-repeat center top;
	background-size: 100%;
}


/*--------------------------------------
フッター
---------------------------------------*/

footer {
	padding-left: 24px;
	position: fixed;
	bottom: 0;
	left: 0;
	overflow: hidden;
	width: 100%;
	text-align: left;
	z-index: 22;
}

.copyright {
	font-size: 10px;
	line-height: 60px;
	letter-spacing: 0;
	font-weight: 600;
	font-family: "Helvetica Neue", Helvetica, 'Work Sans', "Hiragino Sans", "ヒラギノ角ゴ Pro W3", 'Hiragino Kaku Gothic Pro', "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Osaka", verdana, sans-serif;
}

.copyright br {
	display: none;
}

.copyright a {
	color: #fff;
	text-decoration: none;
}

.copyright a:hover {
	text-decoration: underline;
}



/*--------------------------------------------------------------------------------------------------*/


/*--------------------------------------
* 横向き対応
* ---------------------------------------*/



/*--------------------------------------------------------------------------------------------------*/

@media only screen and (max-width: 896px) {
	body {
	}

	a:hover {
	}

	#fancybox-close {
		padding: 48px 0 0 0;
		width: 48px;
	}


	/*--------------------------------------
	loading
	--------------------------------------*/
	/* loading */
	.loading {
	}

	.loading:before {
	}

/*--------------------------------------
 * コンテンツ
 * ---------------------------------------*/

	.wrapper {
	}

	.wrapper::after {
		background: url(../images/contents/release/lyric/lyric_all_sp.png) no-repeat center top;
	}

	.container {
	}


/*--------------------------------------
 * ヘッダー
 * ---------------------------------------*/

	.siteTitle {
		padding-top: 4%;
		width: 42%;
		bottom: auto;
		top: 16px;
		left: 12px;
		background-position: center center;
	}

	.tablet .siteTitle,
	.pc .siteTitle {
		padding-top: 32px;
		width: 200px;
		top: 6px;
	}

	.snsLink {
		bottom: auto;
		left: auto;
		top: 6px;
		right: 6px;
	}

/*--------------------------------------
 * コンテンツ
 * ---------------------------------------*/

	.primary {
	}

	.primary::after {
		content: "";
		opacity: 0;
		height: 0;
		width: 0;
		background: url(../images/contents/release/jacket_sp.jpg) no-repeat;
		background-size: 100% auto;
	}

	.primary::before {
		bottom: 20px;
		right: -68px;
		font-size: 10px;
	}


#release h2 span {
	padding-top: 30%;
	overflow: hidden;
	width: 70%;
	height: 0;
	background: url(../images/contents/release/diary.svg) no-repeat center center;
	background-size: 100% auto;
}

	#release .section figure img {
		height: 100%;
	}

	#release #lyric1 figure img {
		background: url(../images/contents/release/lyric/l1_sp.svg) no-repeat center center;
		background-size: 100% auto;
	}

	#release #lyric2 figure img {
		background: url(../images/contents/release/lyric/l2_sp.svg) no-repeat center center;
		background-size: 100% auto;
	}

	#release #lyric3 figure img {
		background: url(../images/contents/release/lyric/l3_sp.svg) no-repeat center center;
		background-size: 100% auto;
	}

	#release #lyric4 figure img {
		background: url(../images/contents/release/lyric/l4_sp.svg) no-repeat center center;
		background-size: 100% auto;
	}

	#release #lyric5 figure img {
		background: url(../images/contents/release/lyric/l5_sp.svg) no-repeat center center;
		background-size: 100% auto;
	}

	#release #lyric6 figure img {
		background: url(../images/contents/release/lyric/l6_sp.svg) no-repeat center center;
		background-size: 100% auto;
	}

	#release #lyric7 figure img {
		background: url(../images/contents/release/lyric/l7_sp.svg) no-repeat center center;
		background-size: 100% auto;
	}

	#release #lyric8 figure img {
		background: url(../images/contents/release/lyric/l8_sp.svg) no-repeat center center;
		background-size: 100% auto;
	}

	#release #lyric9 figure img {
		background: url(../images/contents/release/lyric/l9_sp.svg) no-repeat center center;
		background-size: 100% auto;
	}

	#release #lyric10 figure img {
		background: url(../images/contents/release/lyric/l10_sp.svg) no-repeat center center;
		background-size: 100% auto;
	}

	#release #lyric11 figure img {
		background: url(../images/contents/release/lyric/l11_sp.svg) no-repeat center center;
		background-size: 100% auto;
	}

	#release #lyric12 figure img {
		background: url(../images/contents/release/lyric/l12_sp.svg) no-repeat center center;
		background-size: 100% auto;
	}


	.pagenation {
		padding: 0 10px 0 0;
		bottom: 40px;
	}

	#release .contents .detail {
		padding: 0 24px;
		width: 100%;
	}

	@media only screen and (max-width: 320px) {

		#release .contents .detail {
			padding: 0;
			width: 76%;
		}

	}

	.tablet #release .contents .detail,
	.pc #release .contents .detail {
		width: 80%;
	}

	#release .contents .detail::before {
		display: none;
	}

	.tablet #release .contents .detail::before,
	.pc #release .contents .detail::before {
		display: block;
	}

	#release .detail h3 {
		margin: 0 auto;
		padding-top: 44%;
		width: 80%;
		background: url(../images/contents/release/title_sp.svg) no-repeat center top;
		background-size: 100% auto;
	}

	.tablet #release .detail h3,
	.pc #release .detail h3 {
		margin: 0;
		padding-top: 28%;
		width: 50%;
		background: url(../images/contents/release/title.svg) no-repeat;
		background-size: 100% auto;
	}

	#release .detail .date {
		margin: 0 auto;
		padding-top: 12%;
		width: 74%;
		background-position: center top;
	}

	.tablet #release .detail .date,
	.pc #release .detail .date {
		margin: 0;
		padding-top: 8%;
		width: 50%;
	}

	#release .detail .jacket {
		margin: 0 auto;
		position: static;
		width: 58%;
	}

	.tablet #release .detail .jacket,
	.pc #release .detail .jacket {
		margin: 0;
		position: absolute;
		width: 46%;
	}

	#release .detail .jacket img {
		background: url(../images/contents/release/jacket_sp.jpg) no-repeat;
		background-size: 100% auto;
	}

	.tablet #release .detail .jacket img,
	.pc #release .detail .jacket img {
			background: url(../images/contents/release/jacket.jpg) no-repeat;
	background-size: 100% auto;
	}

	#release .link {
		padding: 5% 0 0;
		text-align: center;
	}

	.tablet #release .link,
	.pc #release .link {
		padding: 0;
		text-align: left;
	}

	#release .link ul {
	}

	#release .link li {
		padding: 0 0.1% 2%;
		display: inline-block;
		float: none;
	}

	.tablet #release .link li,
	.pc #release .link li {
		padding: 0 2% 2% 0;
		display: block;
		float: left;
	}

	#release .link a,
	#release .lyric button {
		padding: 0 0.5em;
		font-size: 12px;
	}

	@media only screen and (max-width: 320px) {

		#release .link a,
		#release .lyric button {
			padding: 0 0.4em;
			font-size: 11px;
		}

	}


		#release .link li {
			padding: 0 1% 2%;
			width: 50%;
		display: block;
		float: left;
		}

		#release .link a {
			display: block;
		}

		#release .lyric button {
			padding: 0 2em;
			display: block;
		width: 100%;
		}


	.tablet #release .link a,
	.tablet #release .lyric button,
	.pc #release .link a,
	.pc #release .lyric button {
		padding: 0 .8em;
		font-size: 1.3vw;
	}

	#lyrics figure div {
		width: 100%;
		height: calc(100% - 96px);
	}

	.tablet #lyrics figure div,
	.pc #lyrics figure div {
		width: 80%;
		height: 70%;
	}

#lyrics figure img {
		padding-top: 286.7%;
		overflow: hidden;
		width: 100%;
		height: 0;
		background: url(../images/contents/release/lyric/lyric_all_sp.png) no-repeat center top;
		background-size: 100%;
	}

	.tablet #lyrics figure img,
	.pc #lyrics figure img {
		padding: 0;
		height: auto;
		background: url(../images/contents/release/lyric/lyric_all.png) no-repeat center top;
		background-size: 100%;
	}

/*--------------------------------------
フッター
---------------------------------------*/

	footer {
		padding: 0 0 12px;
		bottom: 0;
	}

	.tablet footer,
	.pc footer {
		padding: 0 0 16px;
	}

	.copyright {
		font-size: 10px;
		line-height: 1.5;
		text-align: center;
		transform: scale(.8);
	}

	.tablet .copyright,
	.pc .copyright {
		transform: scale(1);
	}

	.copyright br {
		display: block;
	}

	.tablet .copyright br,
	.pc .copyright br {
		display: none;
	}


	@media screen and (orientation: landscape) {

		.sp .siteTitle {
			padding-top: 32px;
			width: 200px;
			top: 6px;
		}

		.sp #release h2 span {
			padding-top: 16%;
			overflow: hidden;
			width: 40%;
		}

		.sp #release #lyric1 figure img {
			background: url(../images/contents/release/lyric/l1.svg) no-repeat center center;
			background-size: 100% auto;
		}

		.sp #release #lyric2 figure img {
			background: url(../images/contents/release/lyric/l2.svg) no-repeat center center;
			background-size: 100% auto;
		}

		.sp #release #lyric3 figure img {
			background: url(../images/contents/release/lyric/l3.svg) no-repeat center center;
			background-size: 100% auto;
		}

		.sp #release #lyric4 figure img {
			background: url(../images/contents/release/lyric/l4.svg) no-repeat center center;
			background-size: 100% auto;
		}

		.sp #release #lyric5 figure img {
			background: url(../images/contents/release/lyric/l5.svg) no-repeat center center;
			background-size: 100% auto;
		}

		.sp #release #lyric6 figure img {
			background: url(../images/contents/release/lyric/l6.svg) no-repeat center center;
			background-size: 100% auto;
		}

		.sp #release #lyric7 figure img {
			background: url(../images/contents/release/lyric/l7.svg) no-repeat center center;
			background-size: 100% auto;
		}

		.sp #release #lyric8 figure img {
			background: url(../images/contents/release/lyric/l8.svg) no-repeat center center;
			background-size: 100% auto;
		}

		.sp #release #lyric9 figure img {
			background: url(../images/contents/release/lyric/l9.svg) no-repeat center center;
			background-size: 100% auto;
		}

		.sp #release #lyric10 figure img {
			background: url(../images/contents/release/lyric/l10.svg) no-repeat center center;
			background-size: 100% auto;
		}

		.sp #release #lyric11 figure img {
			background: url(../images/contents/release/lyric/l11.svg) no-repeat center center;
			background-size: 100% auto;
		}

		.sp #release #lyric12 figure img {
			background: url(../images/contents/release/lyric/l12.svg) no-repeat center center;
			background-size: 100% auto;
		}

		.sp #release .contents .detail {
			padding: 0;
			width: 80%;
		}

		.sp #release .contents .detail::before {
			display: block;
		}

		.sp #release .detail h3 {
			margin: 0;
			padding-top: 28%;
			width: 50%;
			background: url(../images/contents/release/title.svg) no-repeat;
			background-size: 100% auto;
		}

		.sp #release .detail .date {
			margin: 0;
			padding-top: 8%;
			width: 50%;
		}

		.sp #release .detail .jacket {
			margin: 0;
			position: absolute;
			width: 46%;
		}

		.sp #release .detail .jacket img {
			background: url(../images/contents/release/jacket.jpg) no-repeat;
			background-size: 100% auto;
		}

		.sp #release .link {
			padding: 0;
			text-align: left;
		}

		.sp #release .link li {
			padding: 0 2% 2% 0;
			display: block;
			float: left;
		}

		.sp #release .link a,
		.sp #release .lyric button {
			padding: 0 .8em;
			font-size: 1.3vw;
		}

		.sp #lyrics figure img {
			padding: 0;
			height: auto;
			background: url(../images/contents/release/lyric/lyric_all.png) no-repeat center top;
			background-size: 100%;
		}

		.sp footer {
			padding: 0 0 16px;
		}

		.sp .copyright {
			transform: scale(1);
		}

		.sp .copyright br {
			display: none;
		}


	}

}