@charset "UTF-8";


/*****************************
/
top
/
/ *****************************/
body.top,
body.login,
body.extra {
	background: url(/pc/images/bg/home.jpg) no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
	height: 100vh !important;
}


#login_wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 310px;
	height: 350px;
}

	#logo {
		display: block;
		width: 100%;
		margin-bottom: 20px;
	}

	.input_wrapper {
		color: #fff;
		margin-bottom: 30px;
	}

		input,
		textarea{
			padding: 10px;
			width: 100%;
			border-radius: 4px;
			border: 1px solid hsl(0,0%,50%);
			box-shadow: 2px 4px 10px hsla(0,0%,0%,0.25);
		}
		.input_list_item:not(:last-child) {
			margin-bottom: 10px;
		}

		.input_list_item p {
			text-align: left;
			margin-bottom: 1px;
		}

		.input_ttl {
			color: #fff;
			margin-bottom: 0px;
			font-size: 13.5px;
			text-align: left;
			border-left: none;
			padding-left: 0px;
			line-height: 22px;
		}

		#login_error {
			font-size: 12px;
			color: hsl(0,0%,100%);
			margin-top: -2px;
			margin-bottom: 12px;
			background-color: hsla(0,100%,60%,0.7);
			border-radius: 4px;
			padding: 8px 8px 10px 8px;
			display: none;
		}
		#login_error > i {
			font-size: 16px;
			vertical-align: -1px;
			margin-right: 3px;
		}

.login_bg {
	height: 100vh;
	background: rgba(0,0,0,0.2);
}


.btn_std_item.btn_login a {
	background: rgba(0,0,0,0.5);
	border: 1px solid rgba(255,255,255,0.2);
	padding: 14px;
	box-sizing: border-box;
	text-align: center;
	color: hsl(0,0%,90%);
}


/*****************************
/
/ index.htmlだけで使用
/
/ *****************************/


#main {
	position: absolute;
	height: 100vh;
	top: 0px;
}
#center_logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 75%;
	opacity: 0.55;
}


/*****************************
/
メニューリスト
/
/ *****************************/



/* メニューリスト */
.menu_list {
	visibility: hidden;
}

.menu_list_item {
	background: rgba(0,0,0,0.4);
	position: relative;
}

.menu_open,
.menu_list_item,
.submenu_list_item {
	border-bottom: 1px solid rgba(255,255,255,0.2);
}

.menu_list_item a {
	color: #fff;
	position: relative;
	padding: 20px 20px 20px 60px;
	padding: 5.333333vw 5.333333vw 5.333333vw 16vw;
	text-shadow: 1px 1px 4px #000;
}

.menu_list_item a::after {
	content: "";
	width: 40px;
	width: 10.666666vw;
	height: 40px;
	height: 10.666666vw;
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 20px;
	left: 5.333333vw;
	transform: translateY(-50%) scale(0.5);
}

.menu_list_item.ml_contents > a::after {
	background: url(/images/icon_contents.png) no-repeat;
}

.menu_list_item.ml_playlist a::after {
	background: url(/images/icon_playlist.png) no-repeat;
}

.menu_list_item.ml_distribution a::after {
	background: url(/images/icon_distribution.png) no-repeat;
}

.menu_list_item.ml_account a::after {
	background: url(/images/icon_account.png) no-repeat;
}

.submenu_list {
	display: none;
}

.submenu_list_item {
	position: relative;
	text-align: left;
	text-indent: 1.5em;
}

.submenu_list_item:last-child {
	border: none;
}

.submenu_list_item a {
	padding-left: 36px;
	padding-left: 9.6vw;
}

/* ホーム画面のサブメニュー開閉 */
.top .arrow_down::before {
	margin-top: -0.5em;
	transform: translateY(0) scale(0.7);
	transition: transform 0.5s;
}
.top .menu_open.arrow_down::before {
	transform: rotate(180deg) scale(0.7);
	transition: transform 0.5s;
}


/*****************************
/
その他のページ
お問い合わせと利用規約
/
/ *****************************/

#body_overlay
{
	background-color: hsla(0,0%,0%,0.2);
	width: 100vw;
	height: 100vh;
	position: fixed;
}

#body_main
{
	top:0;
	left:0;
	width: 100%;
	position: absolute;
}

	#extra_body
	{
		width: 560px;
		height: 100vh;
		background-color: hsla(0,0%,20%,0.5);
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
		z-index: 10000;
	}

		#extra_body header
		{
			padding-top: 28px;
			width: 100%;
			height: 90px;
			background-color: hsla(158,20%,10%,0.8);
		}

			#extra_body #logo
			{
				width: 110px;
				height: auto;
				margin: auto;
			}

		#extra_body h2
		{
			width: 100%;
			padding: 15px 0 16px 0;
			box-sizing: border-box;
			background-color: hsla(0,0%,0%,0.3);

			font-size: 14px;
			font-weight: 500;
			line-height: 1;
			color: hsl(0,0%,85%);
			text-align: center;

			letter-spacing: 0.05em;
		}

		#extra_body main
		{
			padding: 15px 30px 40px 30px;
		}


			#extra_body form
			{
				padding: 15px 40px 40px 40px;
			}

				#extra_body form dt
				{
					font-size: 14px;
					font-weight: 300;
					line-height: 1;
					margin-bottom: 7px;
					margin-top: 20px;
				}

				#extra_body form dd p
				{
					font-size: 16px;
					font-weight: 300;
					line-height: 1.75;
					margin-top: 10px;
					margin-bottom: 30px;
				}

		#extra_body footer
		{
			width: 560px;
			height: 50px;
			margin-left: auto;
			margin-right: auto;
		}

			#extra_body footer p
			{
				font-size: 10px;
				font-weight: 300;
				line-height: 1;
				margin-bottom: 7px;
				padding-top: 8px;
				text-align: center;
				border-top: 1px solid hsla(0,0%,100%,0.25);
				color: hsla(0,0%,100%,0.6);
				margin-left: 60px;
				margin-right: 60px;
			}