@charset "utf-8";

/* --------------------------------------------------
   Play Controller
   -------------------------------------------------- */
.mv-player {
	z-index: 5;
	cursor: pointer;
	width: 64px;
	height: 64px;
	padding: 0;
}
.mv-player::before {
	content: "";
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: transform .3s var(--easeOut);
}
.mv-player:focus {
	outline: transparent;
}
/* 最初の再生ボタン */
.mv-player.-start {
	position: absolute;
	top: 50%;
	right: calc(50% - 32px);
	color: var(--c-co);
}
.mv-player.-start::before {
	border-radius: 64px;
	box-shadow: 0 2px 8px rgba(0,0,0,.1);
	background: var(--c-white);
	transition: transform .3s var(--easeOut);
}
.mv-player.-start:hover::before {
	transform: scale(1.1);
}
.mv-player.-start:not(.is-active),
.mv-player.is-playing {
	opacity: 0;
	transform: scale(1.4);
	pointer-events: none;
}
.mv-player.-start.is-anim.is-active,
.mv-player.is-anim.is-playing {
	transition: opacity, transform var(--easeOut);
}
.mv-player.-start.is-anim.is-active {
	transition-duration: 1s;
}
.mv-player.is-anim.is-playing {
	transition-duration: var(--mv-beat);
}
/* 常設の再生ボタン */
.mv-player.-standing {
	position: fixed;
	overflow: hidden;
	top: 0;
	right: 0;
	color: var(--c-white);
}
.mv-player.-standing::before {
	top: calc(50% - 45px);
	left: calc(50% - 45px);
	width: 90px;
	height: 90px;
	border-radius: 90px;
	background: var(--c-co);
}
.mv-player.is-unactive::before,
.mv-player.is-unactive .ico {
	transform: scale(0);
	pointer-events: none;
}
.mv-player.is-anim.-standing::before,
.mv-player.is-anim.-standing .ico {
	transition: transform .3s var(--easeOut);
}
.mv-player.is-anim.-standing .ico {
	transition-delay: .2s;
	transition-timing-function: var(--easeBack);
}
.mv-player.is-anim.-standing .ico .play {
	visibility: hidden;
}
.mv-player .ico {
	position: relative;
	width: 14px;
	height: 14px;
	margin: 0 0 2px 4px;
	fill: currentcolor;
	vertical-align: middle;
}
.mv-player .ico .play,
.mv-player .ico .pause {
	transform-origin: 50%;
	transition: transform .1s var(--easeOut);
}
.mv-player[data-playing="true"] .play,
.mv-player[data-playing="false"] .pause {
	transform: scaleY(0);
}
.mv-player[data-playing="false"] .play,
.mv-player[data-playing="true"] .pause {
	transition-duration: .4s;
	transition-delay: .1s;
}
@media screen and (max-width: 480px) {
	.mv-player {
		width: 48px;
		height: 48px;
	}
	.mv-player.-start {
		right: calc(50% - 24px);
	}
	.mv-player .ico {
		width: 12px;
		height: 12px;
	}
}

/* --------------------------------------------------
   Volume Controller
   -------------------------------------------------- */
.mv-volume {
	z-index: 5;
	display: flex;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	height: 48px;
	-webkit-clip-path: polygon(0 0, 48px 0, 48px 100%, 0 100%);
	clip-path: polygon(0 0, 48px 0, 48px 100%, 0 100%);
	line-height: 1;
	transition: clip-path 1s cubic-bezier(.2,1,.2,1);
}
.mv-volume.is-active {
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.mv-volume.is-unactive {
	transform: translateY(-100%);
}
.mv-volume.is-anim {
	transition: transform .6s var(--easeOut);
}
@media screen and (min-width: 481px) {
	.mv-volume {
		height: 64px;
		-webkit-clip-path: polygon(0 0, 64px 0, 64px 100%, 0 100%);
		clip-path: polygon(0 0, 64px 0, 64px 100%, 0 100%);
	}
}

/* :::::: icon :::::: */
.mv-volume .ico {
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 48px;
	height: 100%;
	background: var(--c-co);
}
@media screen and (min-width: 481px) {
	.mv-volume .ico {
		width: 64px;
	}
}
.mv-volume .ico svg {
	width: 30px;
	height: 30px;
	fill: var(--c-white);
	vertical-align: middle;
}
.mv-volume .ico .on,
.mv-volume .ico .off {
	fill: none;
	stroke: var(--c-white);
	stroke-linecap: round;
}
.mv-volume .ico .on {
	stroke-width: 3;
	transition: opacity 1s cubic-bezier(.2,1,.2,1);
}
.mv-volume .ico .on:not(.is-active) {
	opacity: 0;
}
.mv-volume .ico .off {
	stroke-width: 3;
	stroke-dasharray: 11.4;
	stroke-dashoffset: 11.4;
	transition: stroke-dashoffset 0.3s cubic-bezier(.2,1,.2,1);
}
.mv-volume .ico .off.l {
	stroke-dashoffset: 11.4;
}
.mv-volume .ico .off.r {
	stroke-dashoffset: 34.2;
}
.mv-volume .ico .off.is-active {
	stroke-dashoffset: 22.8;
	transition-duration: .6s;
}
.mv-volume .ico .off.l.is-active {
	transition-delay: .1s;
}
.mv-volume .ico .off.r.is-active {
	transition-delay: .2s;
}

/* :::::: slider :::::: */
.mv-volume .slider {
	position: relative;
	width: calc(100vw - 96px);
	height: 100%;
	background: rgba(134,192,222,.5);
}
@media screen and (min-width: 481px) {
	.mv-volume .slider {
		width: calc(100vw - 128px);
	}
}
.noUi-target {
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-user-select: none;
	-ms-touch-action: none;
	touch-action: none;
	-ms-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
.noUi-base,
.noUi-connects {
	z-index: 1;
	position: relative;
	width: 100%;
	height: 100%;
}
.noUi-connects {
	/*z-index: 0;*/
	overflow: hidden;
}
.noUi-connect {
	background: var(--c-co);
}
.noUi-connect,
.noUi-origin {
	will-change: transform;
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	transform-origin: 0 0;
}
.noUi-origin {
	width: calc(100% - 10px);
}
.noUi-horizontal .noUi-origin {
	height: 0;
}
.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
	transition: transform .3s cubic-bezier(.2,1,.2,1);
}
.noUi-horizontal .noUi-handle {
	cursor: pointer;
	position: absolute;
	top: 0;
	left: 0;
	width: 10px;
	height: 48px;
	background: transparent;
}
.noUi-horizontal .noUi-handle:focus {
	outline: transparent;
}
html:not([dir="rtl"]) .noUi-horizontal .noUi-origin,
html:not([dir="rtl"]) .noUi-horizontal .noUi-handle {
	right: 0;
	left: auto;
}
@media screen and (min-width: 481px) {
	.noUi-horizontal .noUi-handle {
		height: 64px;
	}
}