@charset "utf-8";

/*
Theme Name: aranmusic.net
Description: aran OFFICIAL WEBSITE
*/

/*

http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)

*/

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,
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;
}

/* HTML5 display-role reset for older browsers */

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;
}

* {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

/* COMMON */

body {
	color: #ffffff;
	font-size: 12px;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	line-height: 18px;
	letter-spacing: 0.1em;
	font-feature-settings : "palt" 1;
	background-color: #000a91;
}

a { color: #ffffff; text-decoration: underline; }
a:hover { color: #666666; text-decoration: none; }

img { line-height: 0; vertical-align: top; }

h1, h2, h3, h4, h5, h6 {
	font-weight: 500;
	font-family: "baskerville-urw", "Sawarabi Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
}

h2 { font-weight: normal; }

input,
select,
textarea {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}

.fl { float: left; }
.fr { float: right; }

.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

.header-inner,
.article-inner,
.footer-inner {
	position: relative;
	width: calc(100vmin - 30px);
	margin: 0 auto;
}

h2 {
	font-size: 18px;
	line-height: 150px;
	text-align: center;
}

h2 span { display: block; }

h3 {
	padding: 0 0 18px 0;
	line-height: 100%;
	text-align: center;
}

h4.date {
	font-size: 10px;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}

.fadeinup {
  opacity: 0;
  transform: translate(0px, 30px);
}

.is-active .fadeinup {
	opacity: 1;
	transform: translate(0px, 0px);
	transition: opacity 0.6s linear, transform 0.8s cubic-bezier(.1,1,.5,1);
}

.is-active .delay2000ms { transition-delay: 2s; }
.is-active .delay1800ms { transition-delay: 1.8s; }
.is-active .delay1600ms { transition-delay: 1.6s; }
.is-active .delay1400ms { transition-delay: 1.4s; }
.is-active .delay1200ms { transition-delay: 1.2s; }
.is-active .delay1000ms { transition-delay: 1s; }
.is-active .delay800ms { transition-delay: 0.8s; }
.is-active .delay600ms { transition-delay: 0.6s; }
.is-active .delay400ms { transition-delay: 0.4s; }
.is-active .delay200ms { transition-delay: 0.2s; }

.duotone {
	display: none;
	position: absolute;
    width: calc(100% - 60px) !important;
	opacity: 0;
    transition: opacity 0.9s cubic-bezier(.1,1,.5,1);
	cursor: pointer;
}

.duotone:hover { opacity: 1; }

/* HEADER, FOOTER */

header { background-color: #000000; }

.header-inner { width: 100%; }

h1,
.subtitle {
	z-index: 101;
	position: absolute;
}

h1 {
	top: 19px;
	left: 15px;
}

.subtitle {
	display: none;
	font-size: 10px;
}

.subtitle span { display: block; }

.bx-wrapper { position: relative; }

.slider .set {
	width: 100%;
	height: calc(100vh - 68px);
	background-size: cover !important;
	background-position: center center !important;
}

.slider .content {
	z-index: 2;
	position: absolute;
	bottom: 30px;
	left: 0;
	width: 100%;
	padding: 0 15px;
	text-align: center;
}

.slider .content h2 {
	height: auto;
	padding: 0 0 18px 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

.slider .content span {
	font-size: 10px;
	display: block;
}

.catch {
	z-index: 101;
	position: absolute;
	top: 50%;
	width: 100%;
	margin-top: -40px;
	text-align: center;
}

.catch h2 {
	padding: 0 0 10px 5px;
	font-size: 18px;
	line-height: 20px;
	letter-spacing: 0.1em;
}

.catch p {
	font-size: 10px;
	font-style: italic;
}

footer {
	padding: 30px 0 15px 0;
	text-align: center;
}

/* WORKS, DISCOGRAPHY */

.featured,
.past { padding: 0 0 60px 0; }

.featured .set {
	float: left;
	position: relative;
	width: 50%;
	padding: 1px;
}

.past .set {
	float: left;
	position: relative;
	width: 33.3%;
	padding: 1px;
}

.featured .set h4,
.past .set h4 { display: none; }

.featured .set img,
.past .set img {
	width: 100%;
	height: auto;
	vertical-align: top;
}

/* LIVE INFORMATION */

#live { background-color: rgba(0,0,0,0.7); }

#live .set {
	display: block;
	padding: 15px;
	border-bottom: 1px solid #323232;
	text-align: center;
	text-decoration: none;
}

#live .set:first-of-type { padding: 0 15px 15px 15px; }

#live .set:last-of-type {
	padding: 15px 0 60px 0;
	border: none;
}

#live .set h4.title { font-size: 14px; }

/* PROFILE */

#profile {
	position: relative;
}

#profile .article-inner {
	position: absolute;
	bottom: -30px;
	left: 0;
	width: 100%;
	padding: 0 15px;
}

#profile,
#profile .bg img {
	width: 100%;
	height: calc(100vh - 50px);
	object-fit: cover;
}

#profile .bg {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
}

#profile h2,
#profile p,
#profile ul {
	z-index: 3;
	position: relative;
}

#profile h2 {
	line-height: 90px;
	text-align: left;
}

#profile p { padding: 0 0 28px 0; }
#profile ul { text-align: center; }

#profile ul li {
	display: inline-block;
	width: 60px;
	height: 60px;
	margin: 0 7px;;
}

/* CONTACT */

#contact { padding: 30px 0 0 0; }

#contact .article-inner {

}

#contact .article-inner p {
	padding: 0 0 28px 0;
	text-align: center;
}

#contact .title,
#contact input,
#contact select,
#contact textarea {
	display: block;
	width: 100%;
	height: 60px;
	margin: 0 0 2px 0;
	padding: 0 15px;
	color: #ffffff;
	line-height: 60px;
	background-color: #000000;
	border: none;
	border-radius: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

#contact select {
	background: #000000 url(images/select.svg) no-repeat right 15px top 20px;
	background-size: 20px 20px;
}

#contact textarea {
	height: 240px;
	padding: 20px 15px;
	line-height: 18px;
}

#contact input[type="submit"] {
	z-index: 2;
	position: relative;
	display: block;
	width: 60px;
	height: 60px;
	margin: 0 auto;
	margin-top: -30px;
	text-indent: -9999px;
	background: transparent url(images/send.png) no-repeat center center;
	background-size: 60px 60px;
	cursor: pointer;
}

#contact input::placeholder,
#contact textarea::placeholder {
	color: #666666;
	font-weight: normal;
}

#contact .fl { width: 35%; }
#contact .fr { width: 65%; }

.wpcf7-form-control-wrap {
	display: block;
	position: relative;
	width: 100%;
	min-height: 60px;
}

span.wpcf7-not-valid-tip {
	z-index: 2;
	position: absolute;
	top: 25px;
	right: 20px;
	width: 10px;
	height: 10px;
	text-indent: -9999px;
	background-color: #ff0000;
	border-radius: 5px;
}

.ajax-loader { display: none !important; }

div.wpcf7-response-output {
	margin: 0;
	padding: 0;
}

div.wpcf7-mail-sent-ok,
div.wpcf7-validation-errors {
	color: #f7e700;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	border: none !important;
}

/* SINGLE */

#single .article-inner {
	width: 100%;
	padding: 35px 0 10px 0;
}

#single h2 {
	padding: 0 15px 10px 15px;
	line-height: 24px;
}

#single .number {
	display: block;
	text-align: center;
}

#single h3 {
	padding: 0 0 35px 0;
	text-align: center;
}

#single h3 span {
	display: inline-block;
	padding: 0 10px;
	color: #000a91;
	line-height: 20px;
	background-color: #ffffff;
	border-radius: 10px;
}

.jbg {
	z-index: 0;
	position: relative;
	background-size: cover;
	overflow: hidden;
}

.jbg:before{
	content: "";
	z-index: -1;
	position: absolute;
	top: -5px;
	left: -5px;
	right: -5px;
	bottom: -5px;
	background: inherit;
	filter: blur(10px);
}

.jacket {
	width: 100%;
	height: 100%;
	padding: 72px 15px 45px 15px;
	background-color: rgba(0,0,0,0.8);
}

.jacket img {
	width: 100%;
	height: auto;
	-webkit-box-reflect: below 1px -webkit-gradient(
		linear,left top,left bottom,
		from(transparent),
		color-stop(0.935, transparent),
		to(rgba(0,0,0,0.4))
	);
}

#single .date {
	padding: 15px 0 35px 0;
	text-align: center;
}

#single .date span { display: block; }

#single .tracks {
	padding: 0 15px 35px 15px;
	text-align: center;
}

#single .tracks .review {
	padding: 0 0 30px 0;
	text-align: justify;
}

#single .tracks p {
	display: block;
	padding: 0 15px 10px 15px;
	font-weight: bold;
	font-family: "baskerville-urw", "Sawarabi Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
}

#single .tracks p span:nth-of-type(2) { display: none; }

#single .xfd {
	display: block;
	margin: 25px 0 0 0;
	color: #ffffff;
	font-family: "baskerville-urw", "Sawarabi Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
	font-weight: bold;
	text-decoration: none;
	line-height: 50px;
	background-color: #ff0000;
	border-radius: 25px;
}

#single .tracks ul { padding: 25px 0 0 0; }
#single .tracks ul li { padding: 10px 0 0 0; }
#single .tracks ul li span { font-weight: bold; }

#single .buy {
	padding: 35px 15px 40px 15px;
	text-align: center;
	background-color: rgba(0,0,0,0.7);
}

#single .buy ul { padding: 35px 30px 0 30px; }

#single .buy a,
#single .buy ul li span {
	display: block;
	margin: 0 0 2px 0;
	color: #000000;
	font-family: "baskerville-urw", "Sawarabi Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
	font-weight: bold;
	text-decoration: none;
	line-height: 50px;
	text-align: center;
	background-color: #ffffff;
}

#single .buy ul li span { color: #ffffff; background-color: #646464; }

#single .buy .tanoc a { background-color: #ffffff; }
#single .buy .itunes a { color: #ffffff; background-color: #2fa5e9; }
#single .buy .amazon a { background-color: #f99d29; }
#single .buy .spotify a { color: #ffffff; background-color: #1ed760; }
#single .buy .mp3 a { color: #ffffff; background-color: #f99d29; }
#single .buy .line a {  color: #ffffff; background-color: #19bc03; }
#single .buy .diverse a {  color: #ffffff; background-color: #000000; }
#single .buy .melon a {  color: #ffffff; background-color: #78be00; }

#single .buy ul li:first-child a,
#single .buy ul li:first-child span { border-radius: 10px 10px 0 0; }
#single .buy ul li:last-child a,
#single .buy ul li:last-child span { border-radius: 0 0 10px 10px; }

#single .buy .event { padding: 35px 0 0 0; }

#single .buy .event p {
	font-weight: bold;
	font-family: "baskerville-urw", "Sawarabi Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
}

#single .buy .event span { display: none; }

#single .share ul {
	padding: 40px 0 0 0;
	text-align: center;
}

#single .share ul li {
	display: inline-block;
	padding: 0 10px;
}

#single .share ul li a img {
	width: 60px;
	height: 60px;
}

#single .pwdform,
#single .password {
	width: 100%;
	margin: 15px 0 45px 0;
	padding: 45px 15px;
	color: #ffffff;
	background: #000000;
}

#single .password { padding: 0; }

#single .pwdform b {
	display: inline-block;
	padding: 0 0 15px 0;
	font-weight: bold;
}

#single .pwdform input[type="password"] {
	width: 100%;
	height: 45px;
	color: #333333;
	background: #e1e1e1;
	border-radius: 3px;
	border: none;
}

#single .pwdform input[type="submit"] {
	width: 120px;
	height: 45px;
	margin: 0 0 0 3px;
	color: #000000;
	background: #ffffff;
	border-radius: 3px;
	border: none;
	cursor: pointer;
}

#single .pwdform .clearfix {
	display: inline-block;
}

/* LOADER */

#loader {
	display: flex;
	z-index: 10000;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	align-items: center;
}

.spinner {
	width: 70px;
	height: 20px;
	margin: 0 auto;
	text-align: center;
	font-size: 10px;
}

.spinner > div {
	display: inline-block;
	width: 1px;
	height: 100%;
	background-color: #ffffff;

	-webkit-animation: sk-stretchdelay 1.5s infinite ease-in-out;
	animation: sk-stretchdelay 1.5s infinite ease-in-out;
	transform-origin: left bottom;
}

.spinner .rect3 { -webkit-animation-delay: -1.4s; animation-delay: -1.4s; }
.spinner .rect4 { -webkit-animation-delay: -1.3s; animation-delay: -1.3s; }
.spinner .rect10 { -webkit-animation-delay: -1.2s; animation-delay: -1.2s; }
.spinner .rect8 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
.spinner .rect6 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }
.spinner .rect7 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }
.spinner .rect2 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }
.spinner .rect12 { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; }
.spinner .rect3 { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; }
.spinner .rect11 { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; }
.spinner .rect5 { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; }
.spinner .rect13 { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; }

@-webkit-keyframes sk-stretchdelay {
	0%, 40%, 100% { -webkit-transform: scaleY(0.3) }  
	20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
	0%, 40%, 100% { 
		transform: scaleY(0.3);
		-webkit-transform: scaleY(0.3);
	} 20% { 
		transform: scaleY(1.0);
		-webkit-transform: scaleY(1.0);
	}
}

/* MEDIA QUERIES */

@media screen and (max-width:980px) {
	
	.pcmenu { display: none; }

	.hamburger {
		display: block;
		z-index: 9999;
		position: absolute;
		top: 17px;
		right: 16px;
		width: 30px;
		height: 22px;
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
		transition: all 0.3s;
	}

	.hamburger .center {
		display:block;
		width: 30px;
		height: 2px;
		background: #ffffff;
	}

	.hamburger:before {
		content: "";
		position: absolute;
		top: -8px;
		right: 0;
		width: 30px;
		height: 2px;
		background: #ffffff;
		transition: all 0.3s;
	}

	.hamburger:after {
		content: "";
		position: absolute;
		bottom: -8px;
		right: 0;
		width: 30px;
		height: 2px;
		background: #ffffff;
		transition: all 0.3s;
	}

	.hamburger.active:before {
		transform: rotate(-135deg);
		top: 0;
		right: 0;
	}

	.hamburger.active:after {
		transform: rotate(135deg);
		bottom: 0;
		right: 0;
	}

	.hamburger.active .center { background: transparent; }

	nav {
		display: none;
		z-index: 8888;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #000000;
	}
	
	nav ul {
		position: absolute;
		top: 50%;
		margin-top: -112px;
		width: 100%;
		text-align: center;
		line-height: 45px;
	}
	
	nav ul li {
		font-size: 14px;
		font-weight: normal;
		font-family: "baskerville-urw", "Sawarabi Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
	}
	
	nav ul li a {text-decoration: none; }

}

@media screen and (min-width: 980px) {

	/* COMMON */

	body { border-bottom: 3px solid #ffffff; }

	h2 {
		font-size: 30px;
		line-height: 30px;
	}
	
	.article-inner h2 { padding: 0 0 115px 0; }

	h3 {
		padding: 0 0 58px 0;
		font-size: 18px;
		font-weight: normal;
		line-height: 100%;
		text-align: center;
	}
	
	article { padding: 115px 0 0 0; }

	.header-inner,
	.article-inner,
	.footer-inner {
		position: relative;
		width: 980px;
		margin: 0 auto;
	}

	.duotone { display: block; }
	
	#profile a img,
	#contact input[type="submit"],
	#single .share ul li a img {
		transition: transform 0.3s cubic-bezier(.1,1,.5,1);
	}
	#profile a img:hover,
	#contact input[type="submit"]:hover,
	#single .share ul li a img:hover {
		transform: scale(0.9);
	}

	/* HEADER, FOOTER */

	.header-inner {
		z-index: 101;
		position: absolute;
		width: 100%;
		border-top: 3px solid #ffffff;
	}

	h1 {
		top: 24px;
		left: 25px;
	}

	.subtitle {
		display: block;
		top: 20px;
		left: 130px;
	}
	
	nav { display: none; }

	.pcmenu {
		position: absolute;
		top: 22px;
		right: 30px;
	}
		
	.pcmenu ul li {
		float: left;
		padding: 0 0 0 25px;
		font-size: 14px;
		font-weight: normal;
		font-family: "baskerville-urw", "Sawarabi Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
	}
	
	.pcmenu ul li a {
		display: inline-block;
		position: relative;
		text-decoration: none;
	}
	
	.pcmenu ul li a:hover { color: #ffffff; }

	.pcmenu ul li a:before {
		content: "";
		display: inline-block;
		position: absolute;
		top: 22px;
		left: 0;
		width: 0;
		height: 1px;
		background: #ffffff;
		transition: 0.2s cubic-bezier(.1,1,.5,1);
	}
	
	.pcmenu ul li a:hover:before {
		width: 100%;
	}

	
	.slider .set {
		height: calc(100vh - 30px);
		background-attachment: fixed !important;
	}

	.slider .content h2 {
		display: inline-block;
		padding: 0 15px 0 0;
		font-size: 14px;
		font-weight: 500;
		line-height: 20px;
	}

	.slider .content span { display: inline-block; }

	.slider .content span br { display: none; }

	.catch {
		margin-top: -75px;
		text-align: center;
	}

	.catch h2 {
		padding: 0 0 20px 20px;
		font-size: 48px;
		line-height: 50px;
	}

	footer { padding: 120px 0 15px 0; }
	footer br { display: none; }

	/* WORKS, DISCOGRAPHY */

	#works .article-inner { overflow: hidden; }

	.featured,
	.past {
		width: 1040px;
		margin-left: -30px;
		padding: 0 0 90px 0;
	}

	.past { padding: 0 0 45px 0; }

	.featured .set {
		float: left;
		width: 50%;
		padding: 0 30px 60px 30px;
	}

	.past .set {
		float: left;
		width: 25%;
		height: 320px;
		padding: 0 30px;
	}

	.featured .set h4,
	.past .set h4 {
		display: block;
		text-align: center;
	}

	.featured .set h4.title,
	.past .set h4.title {
		padding: 7px 0 0 0;
		font-size: 14px;
	}

	.past .set h4.title { font-size: 12px; }

	.featured .set img,
	.past .set img {
		padding: 0 0 15px 0;
	}

	/* LIVE INFORMATION */

	#live .set {
		position: relative;
		display: block;
		width: 100%;
		height: 60px;
		margin: 0 auto;
		margin-bottom: 10px;
		padding: 0 30px;
		color: #000000;
		line-height: 60px;
		background-color: #ffffff;
		border: none;
		border-radius: 30px;
		transition: all 0.5s cubic-bezier(.1,1,.5,1);
	}

	#live .set:hover {
		background-color: #000a91;
	}

	#live .set:hover h4 { color: #ffffff; }

	#live .content {
		padding: 0 0 120px 0;
	}

	#live .set:first-of-type,
	#live .set:last-of-type { padding: 0 30px; }

	#live .set:after {
	    content: "";
		display: block;
		clear: both;
	}

	#live .set h4.date { float: left; }

	#live .set h4.title {
		float: right;
		font-size: 14px;
		font-weight: bold;
	}

	/* PROFILE */

	#profile .article-inner {
		position: relative;
		width: 980px;
		height: 100%;
	}

	#profile .content {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 50%;
	}

	#profile h2,
	#profile p,
	#profile ul { position: absolute; }

	#profile h2 {
		left: -15px;
		bottom: 90px;
		padding: 0;
		line-height: 100%;
	}

	#profile p {
		right: 0;
		bottom: 90px;
		width: 50%;
		padding: 0 0 0 90px;
	}

	#profile ul {
		left: -22px;
		bottom: 0;
		text-align: left;
	}

	/* CONTACT */
	
	#contact { padding: 115px 0 0 0; }
	
	#contact h2 {
		padding: 0 0 25px 0;
		line-height: 100%;
		text-align: right;
	}

	#contact .article-inner p { text-align: right; }

	.wpcf7 {
		width: 980px;
		margin: 0 auto !important;
	}

	#contact textarea {
		height: 400px;
	}
	
	/* SINGLE */
	
	.jacket {
		width: 100%;
		height: calc(100vh - 30px);
		padding: 105px 0 75px 0;
	}

	.jacket img {
		display: block;
		width: auto;
		/* max-width: 980px; */
		height: 100%;
		margin: 0 auto;
	}

	#single .article-inner {
		padding: 0;
	}

	#single h2,
	#single h3 {
		text-align: left;
	}

	#single h2 {
		width: 980px;
		margin: 0 auto;
		padding: 0 0 90px 0;
	}

	#single h3 { padding: 0; }

	#single .date {
		width: 980px;
		margin: -113px auto 0;
		padding: 0;
		text-align: right;
	}

	#single h3 span {
		padding: 60px 0 0 0;
		color: #ffffff;
		background-color: transparent;
		border-radius: 0;
	}

	#single .tracks {
		position: relative;
		width: 980px;
		margin: 0 auto;
		padding: 0;
	}

	#single .tracks .review { padding: 45px 0 0 0; }

	#single .tracks p {
		position: relative;
		width: 100%;
		height: 90px;
		margin: 0 auto;
		padding: 0 0 0 60px;
		font-size: 18px;
		line-height: 90px;
		text-align: left;
		border-bottom: 1px solid rgba(255,255,255,0.2);
	}

	#single .tracks p:last-of-type { border: none; }

	#single .tracks p span {
		display: block;
		position: absolute;
		font-weight: normal;
	}

	#single .tracks p span:nth-of-type(1) {
		top: 0;
		left: 0;
	}

	#single .tracks p span:nth-of-type(2) {
		display: block;
		top: 0;
		right: 0;
	}

	#single .xfd {
		margin: 45px 0 0 0;
		font-size: 14px;
		line-height: 60px;
		background-color: #ff0000;
		border-radius: 30px;
		transition: all 0.5s cubic-bezier(.1,1,.5,1);
	}

	#single .xfd:hover {
		color: #000000;
		background-color: #ffffff;
	}

	#single .tracks ul { padding: 65px 0 0 0; }

	#single .tracks ul li {
		float: left;
		text-align: left;
	}

	#single .tracks ul li:nth-of-type(2n) { clear: both; }

	#single .tracks ul li:nth-of-type(2n):after {
		content: "|";
		padding: 0 10px;
	}

	#single .tracks ul li br { display: none; }

	#single .buy {
		margin: 115px 0 0 0;
		padding: 115px 0;
	}

	#single .buy h2 {
		padding: 0 0 20px 0;
		text-align: center;
	}

	#single .buy ul {
		width: 980px;
		margin: 0 auto;
		padding: 105px 0 30px 0;
		overflow: hidden;
	}

	#single .buy ul li {
		float: left;
		width: 33.3%;
		margin: 0 0 30px 0;
	}

	#single .buy ul li:nth-child(1) { padding: 0 20px 0 0; }
	#single .buy ul li:nth-child(2) { padding: 0 10px; }
	#single .buy ul li:nth-child(4) { padding: 0 20px 0 0; }
	#single .buy ul li:nth-child(5) { padding: 0 10px; }
	#single .buy ul li:nth-child(7) { padding: 0 20px 0 0; }
	#single .buy ul li:nth-child(8) { padding: 0 10px; }
	#single .buy ul li:nth-child(3n) { padding: 0 0 0 20px; }

	#single .buy a,
	#single .buy ul li span {
		display: block;
		color: #000000;
		font-family: "baskerville-urw", "Sawarabi Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
		font-weight: bold;
		text-decoration: none;
		font-size: 14px;
		line-height: 60px;
		text-align: center;
		background-color: #ffffff;
		border-radius: 30px;
		transition: all 0.5s cubic-bezier(.1,1,.5,1);
}

	#single .buy ul li span { color: #ffffff; background-color: #646464; }

	#single .buy ul li:first-child a,
	#single .buy ul li:first-child span,
	#single .buy ul li:last-child a,
	#single .buy ul li:last-child span { border-radius: 30px; }

	#single .buy .tanoc a {  background-color: #ffffff; }
	#single .buy .itunes a { color: #ffffff; background-color: #2fa5e9; }
	#single .buy .amazon a { background-color: #f99d29; }
	#single .buy .spotify a { color: #ffffff; background-color: #1ed760; }
	#single .buy .mp3 a { color: #ffffff; background-color: #f99d29; }
	#single .buy .line a { color: #ffffff; background-color: #19bc03; }

	#single .buy .tanoc a:hover,
	#single .buy .itunes a:hover,
	#single .buy .amazon a:hover,
	#single .buy .spotify a:hover,
	#single .buy .mp3 a:hover,
	#single .buy .line a:hover {
		color: #ffffff;
		background-color: #000a91;
	}

	#single .buy .event p {
		font-size: 30px;
		font-weight: normal;
		line-height: 44px;
	}

	#single .buy .event span {
		display: block;
		padding: 0 0 8px 0;
	}

	#single .share ul {
		padding: 120px 0 0 0;
	}
	
	#single .pwdform,
	#single .password {
		width: 100%;
		margin: 45px 0 0 0;
		padding: 45px 15px;
		color: #ffffff;
		background: #000000;
	}
	
	#single .password { padding: 0; }
	
	#single .password a {
		transition: all 0.5s cubic-bezier(.1,1,.5,1);
	}
	
	#single .password a:hover { color: #ffffff; background: #ff0000; }

	#single .pwdform b {
		display: inline-block;
		padding: 0 0 15px 0;
		font-weight: bold;
	}

	#single .pwdform input[type="password"] {
		width: 600px;
		height: 45px;
		color: #333333;
		background: #e1e1e1;
		border-radius: 3px;
		border: none;
	}

	#single .pwdform input[type="submit"] {
		width: 120px;
		height: 45px;
		margin: 0 0 0 3px;
		color: #000000;
		background: #ffffff;
		border-radius: 3px;
		border: none;
	}

#single .pwdform .clearfix {
	display: inline-block;
}

}

#container { opacity: 0; }

/* SNSアイコン：スマホで5つを1行に収める（2026-11-14） */
@media screen and (max-width: 979px) {
	#profile ul li { width: 50px; height: 50px; margin: 0 4px; }
	#profile ul li img { width: 100%; height: auto; }
}

/* reCAPTCHA：バッジを隠し、フォーム下に注記を表示（2026-11-14） */
.grecaptcha-badge { visibility: hidden; }
.recaptcha-note {
	margin: 20px 15px 0;
	font-size: 10px;
	line-height: 1.8;
	color: rgba(255,255,255,0.6);
	text-align: center;
}
.recaptcha-note a { color: rgba(255,255,255,0.85); text-decoration: underline; }

/* スマホ：フッター下に余白（画面の角の丸み・ホームバー対策）（2026-11-14） */
@media screen and (max-width: 979px) {
	footer { padding-bottom: calc(50px + env(safe-area-inset-bottom)); }
}

/* プロフィール：アー写の上に影を敷いて白文字を読みやすくする（2026-11-14） */
#profile::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 30%, rgba(0,0,0,0) 55%);
	pointer-events: none;
}

/* ヘッダー・スライド：明るい画像でもロゴ・メニュー・説明文が読めるように（2026-11-14） */
.slider .set::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.4) 100%);
}
.header-inner h1 img { filter: drop-shadow(0 0 6px rgba(0,0,0,0.35)); }
.header-inner .subtitle,
.pcmenu a,
.slider .set .content { text-shadow: 0 0 8px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25); }

/* リリースページ：URLコピーのボタン（2026-11-14） */
#single .share ul li.copy { position: relative; }
#single .share .copy-msg {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 10px;
	padding: 4px 10px;
	font-size: 10px;
	white-space: nowrap;
	color: #000;
	background: #fff;
	border-radius: 3px;
	opacity: 0;
	transition: opacity 0.3s;
	pointer-events: none;
}
#single .share li.copied .copy-msg { opacity: 1; }

/* プロフィール文を読みやすい大きさに（2026-11-14） */
#profile p { font-size: 14px; line-height: 1.9; }
@media screen and (min-width: 980px) {
	#profile p { font-size: 15px; }
}