@charset "utf-8";

/*============================================================
	BODY
*/
.content {
	/* padding: 0; */
}

.content-top {
	padding: 0;
}

/*============================================================
	BUTTON REGISTER
*/
.content .btn-gradation {
	margin: 0 auto;
	max-width: 390px;
	width: 100%;
	font-size: 16px;
}

@media screen and (max-width: 767px) {
	.content .btn-gradation {
		max-width: 100%;
	}
}

/*============================================================
	HEADLINE
*/
.headline {
	margin: 0 auto;
	max-width: 320px;
	text-align: center;
	line-height: 1.5;
}
.headline h2 {
	font-size: 40px;
	color: #239d86;
}
.headline h3::before {
	content: '';
	display: block;
	margin: 0 0 10px 0;
	height: 2px;
	background-color: #239d86;
}
.headline h3 {
	padding: 20px 0 0 0;
	font-size: 18px;
}

@media screen and (max-width: 767px) {
	.headline {
		max-width: 240px;
	}
	.headline h2 {
		font-size: 24px;
	}
	.headline h3::before {
		margin: 0 0 10px 0;
	}
	.headline h3 {
		padding: 15px 0 0 0;
		font-size: 12px;
	}
}

/*============================================================
	MAIN
*/
.main {
	padding: 40px 0 50px 0;
	background: rgb(94,227,201);
	background: linear-gradient(90deg, rgba(94,227,201,1) 0%, rgba(101,180,165,1) 100%);
}
.main .outer {
	background-color: rgba(255,255,255,0.8);
}
.main .row {
	display: flex;
	align-items: center;
	margin: 0 -35px;
	padding: 20px 0;
}
.main .head {
	padding: 0 35px;
	flex-basis: 50%;
}
.main .head h2 {
	margin: 0 auto;
	max-width: 348px;
}
.main .head h2 img {
	margin-left: -15px;
}
.main .head h3 {
	margin: 30px 0 45px 0;
	padding: 15px 0;
	border-top: 1px solid #2c2c2c;
	border-bottom: 1px solid #2c2c2c;
	text-align: center;
	font-weight: 700;
	font-size: 30px;
	line-height: 1.7;
}
.main .head h3 span{
	font-size: 20px;
}
.main .detail {
	padding: 0 35px;
	flex-basis: 50%;
}
.main .detail ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px;
}
.main .detail ul li {
	padding: 15px;
	flex-basis: 50%;
}
.main .detail ul li div {
	position: relative;
	padding: 30px 0;
	height: 100%;
	background-color: #fff;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}
.main .detail ul li div::before {
	content: '';
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 32px 32px;
	border-color: transparent transparent #239d86 transparent;
}
.main .detail ul li img {
	display: block;
	/* margin: 0 auto;
	width: 160px; */
	margin: 0 auto 16px;
	width: 100px;
}
.main .detail ul li img.--streaming {
	width: 130px;
    margin: 0 auto -10px;
}
.main .detail ul li h4 {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 70px;
	text-align: center;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.7;
	color: #555;
}
.main .btn-register {
	display: none;
	margin: 40px 0 0 0;
}

@media screen and (max-width: 1080px) {
	.main .row {
		display: block;
		margin: 0;
		padding: 60px 0;
	}
	.main .head {
		padding: 0;
	}
	.main .head a {
		display: none;
	}
	.main .detail {
		padding: 0;
	}
	.main .btn-register {
		display: block;
	}
}

@media screen and (max-width: 767px) {
	.main {
		padding: 22px 0 26px 0;
	}
	.main .row {
		padding: 30px 0 30px 0;
	}
	.main .head h2 {
		max-width: 150px;
	}
	.main .head h2 img {
		margin-left: -10px;
	}
	.main .head h3 {
		margin: 20px 0 14px 0;
		padding: 10px 0;
		font-size: 12px;
	}
	.main .head h3 br {
		display: none;
	}
	.main .detail ul {
		margin: 0 -6px;
	}
	.main .detail ul li {
		padding: 6px;
	}
	.main .detail ul li div {
		padding: 15px 0;
	}
	.main .detail ul li div::before {
		border-width: 0 0 16px 16px;
	}
	.main .detail ul li img {
		width: 90px;
	}
	.main .detail ul li h4 {
		min-height: 50px;
		font-size: 12px;
	}
	.main .btn-register {
		margin: 14px 0 0 0;
	}
}

/*============================================================
	ABOUT
*/
.about {
	padding: 80px 0;
	line-height: 2;
}
.about .lead {
	margin: 30px 0 20px 0;
	text-align: center;
	font-size: 100%;
}
.about .lead p {
	margin: 2em 0 0 0;
}
.about .lead p:first-child {
	margin: 0;
}
.about .lead p strong {
	font-weight: 700;
	color: #239d86;
}
.about .notes {
	display: table;
	margin: 0 auto;
	font-size: 12px;
}

@media screen and (max-width: 767px) {
	.about .notes {
		display: block;
		font-size: 11px;
	}
	.about .notes li {
		padding-left: 1em;
		text-indent: -1em;
	}
}

/*============================================================
	HOWTO
*/
.howto {
	padding: 80px 0;
	background-color: #e7f7f4;
}
.howto .step {
	margin: 40px 0 0 0;
}
.howto .step .label {
	display: flex;
}
.howto .step .label span {
	display: block;
	width: 120px;
	background-color: #239d86;
	border-radius: 4px 4px 0 0;
	text-align: center;
	font-size: 24px;
	color: #fff;
}
.howto .step .label span i {
	font-size: 32px;
}
.howto .step .frame {
	display: flex;
	margin: 0 0 40px 0;
	padding: 25px;
	background-color: #fff;
	box-shadow: 10px 10px 0px 0px #9dc6be;
}
.howto .step .frame .row {
	display: flex;
	align-items: center;
	flex-basis: 565px;
	margin: 0;
}
.howto .step .frame .screen {
	flex-basis: 222px;
}
.howto .step .frame .screen img {
	box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}
.howto .step .frame .head {
	flex: 1;
	padding: 0 25px;
}
.howto .step .frame .head p {
	display: flex;
	align-items: center;
	font-size: 18px;
	color: #239d86;
}
.howto .step .frame .head p::before,
.howto .step .frame .head p::after {
	content: '';
	display: block;
	width: 16px;
	height: 2px;
	background-color: #239d86;
}
.howto .step .frame .head p span {
	display: block;
	margin: 0 8px;
	padding: 0 0 2px 0;
}
.howto .step .frame .head h3 {
	margin: 5px 0 0 0;
	font-weight: 700;
	font-size: 24px;
	line-height: 1.5;
}
.howto .step .frame .detail {
	flex: 1;
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 0 0 25px;
	height: 152px;
}
.howto .step .frame .detail::before {
	content: '';
	display: block;
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: 0;
	width: 1px;
	background-color: #585858;
}
.howto .step .frame .detail .inner {
	line-height: 2;
}
.howto .step .frame .detail .inner .notes {
	margin: 5px 0 0 0;
	font-size: 12px;
}

@media screen and (max-width: 1080px) {
	.howto .step .frame {
		display: block;
	}
	.howto .step .frame .head h3 br {
		display: none;
	}
	.howto .step .frame .detail {
		display: block;
		margin: 30px 0 0 0;
		padding: 0;
		height: auto;
	}
	.howto .step .frame .detail::before {
		display: none;
	}
}

@media screen and (max-width: 767px) {
	.howto {
		padding: 80px 0 40px 0;
	}
	.howto .step .label span {
		width: 82px;
		font-size: 16px;
	}
	.howto .step .label span i {
		font-size: 24px;
	}
	.howto .step .frame {
		margin: 0 0 50px 0;
		padding: 16px;
	}
	.howto .step .frame .row {
		display: block;
	}
	.howto .step .frame .head {
		margin: 15px 0 0 0;
		padding: 0;
	}
	.howto .step .frame .head p {
		justify-content: center;
		font-size: 16px;
	}
	.howto .step .frame .head h3 {
		text-align: center;
		font-size: 18px;
	}
	.howto .step .frame .detail {
		margin: 15px 0 0 0;
	}
	.howto .step .frame .detail::before {
		display: block;
		position: static;
		margin: 0 0 15px 0;
		width: 100%;
		height: 1px;
	}
	.howto .step .frame .detail .inner {
		line-height: 1.7;
	}
	.howto .step .frame .detail .inner .notes {
		font-size: 11px;
	}
}

/*============================================================
	REGISTER
*/
.register {
	padding: 35px 0 50px 0;
}
.register .head h2 {
	margin: 0 auto;
	max-width: 238px;
}
.register .head h2 img {
	margin-left: -15px;
}
.register .head h3 {
	margin: 20px auto 25px auto;
	padding: 10px 0;
	max-width: 574px;
	border-top: 1px solid #2c2c2c;
	border-bottom: 1px solid #2c2c2c;
	text-align: center;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.7;
}

@media screen and (max-width: 767px) {
	.register {
		padding: 60px 0 120px 0;
	}
	.register .head h2 {
		max-width: 160px;
	}
	.register .head h2 img {
		margin-left: -10px;
	}
	.register .head h3 {
		margin: 20px auto 35px auto;
		font-size: 12px;
	}
}

/*============================================================
	申請選択ページ
*/
.select {
	display: flex;
    justify-content: center;
    align-items: center;
	/* padding: 295px 0; */
	padding: 220px 0 110px 0;
}
.select .frame {
	margin: 0 auto;
    padding: 56px 40px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}
.select .frame .h {
	padding: 0 0 40px 0;
    text-align: center;
    font-size: 24px;
    color: #239d86;
}
.select__btn {
	margin-bottom: 24px;
}
.select__sup {
	margin-top: 40px;
}
.select__sup-txt {
	display: flex;
	gap: 8px;
}
.select__sup-txt:first-child {
	margin-bottom: 24px;
}
.select__sup-hint {
	width: 16px;
	height: 16px;
	background-color: #239d86;
	background-image: url(/images/icon-hint.svg?ef4dbcebb476c026c7a9e214565e862c);
	background-size: contain;
	border-radius: 50%;
	margin-top: 5px;
}
.select__sup p {
	max-width: 100%;
    width: 359px;
	font-size: 14px;
}
@media screen and (max-width: 767px) {
	.select-apply {
		padding: 160px 0;
	}
	.select {
		/* padding: 40px 0 80px 0; */
	}
	.select .frame {
		padding: 40px 16px;
		border-radius: 10px;
	}
	.select .frame .h {
		padding: 0 0 24px 0;
	}
	.select__sup {
		margin-top: 24px;
	}
	.select__sup p {
		width: 271px;
	}
}

/*============================================================
	新規申し込み
*/
.new {
	display: flex;
    justify-content: center;
    align-items: center;
	/* padding: 80px 0; */
	padding-bottom: 80px;
}
.new .frame {
	margin: 0 auto;
    padding: 52px 40px 43px 34px;
    flex-basis: 1180px;
    background-color: #fff;
}
.new__heading {
	margin-bottom: 40px;
}
.new__heading h1 {
	justify-content: left;
}
.icon-application {
	width: 33px;
	height: 40px;
	margin-right: 16px;
}
.new__head {
	text-align: center;
	font-size: 24px;
	color: #239D86;
	margin-bottom: 32px;
}
.new__head .-br {
	display: none;
}
@media screen and (max-width: 767px) {
	.new {
		padding: 40px 0 80px 0;
	}
	.new .frame {
		padding: 40px 16px;
		flex-basis: 327px;
		border-radius: 10px;
	}
	.new__heading {
		margin-bottom: 24px;
	}
	.new__head {
		font-size: 20px;
	}
	.new__head .-br {
		display: block;
	}
}

/*============================================================
	お客様情報一覧
*/
.list {
	display: flex;
    justify-content: center;
    align-items: center;
	padding: 50px 0;
}
.list .frame {
	margin: 0 auto;
    padding: 40px 40px 56px 40px;
    flex-basis: 1180px;
    background-color: #fff;
}
.list__ttl h1 {
	justify-content: left;
	margin-bottom: 40px;
}
.list__tb table th div {
	justify-content: center;
}
.list__tb table th {
	padding-top: 22px;
	padding-bottom: 22px;
}
.list__tb table th, .list__tb table td {
	border: none;
	text-align: center;
}
.list__tb table .list__tb-tr {
	cursor: pointer;
	transition: .3s;
}
.list__tb table .list__tb-tr:hover {
	background-color: #F1F1F1;
}
.list__tb table .list__tb-tr:nth-child(odd):hover {
	background-color: #C3EBE2;
}
.list__tb table .list__tb-tr[data-href] {
    cursor: pointer;
}
.list__tb table .list__tb-tr:nth-child(odd) {
	background-color: #E4FAF5;
}
.list__tb table td {
	padding: 19px 17px;
}
.list__tb table td .-name {
	width: 316px;
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
@media screen and (max-width: 767px) {
	.list {
		padding: 40px 0 80px 0;
	}
	.list .frame {
		padding: 40px 0 40px 16px;
		flex-basis: 327px;
		border-radius: 10px;
	}
	.table-scroll {
		width: 311px;
		overflow-x: scroll;
		padding-right: 16px;
	}
	.list__tb table td .-name {
		width: 186px;
	}
	.list__tb table td div {
		width: 166px;
	}
}

/*============================================================
	オンライン納品_管理画面ページ
*/
.page {
	display: flex;
    justify-content: center;
    align-items: center;
	padding: 80px 0;
}
.page .frame {
	margin: 0 auto;
    padding: 32px 38px 56px 38px;
    flex-basis: 1180px;
    background-color: #fff;
}
.page__ttl h1 {
	justify-content: left;
	margin-bottom: 40px;
}
.page__ttl h1 .sp {
	display: none;
}
.page__heading {
	font-size: 16px;
	margin-bottom: 40px;
}
.page__info-ttl {
	display: flex;
	gap: 24px;
	align-items: center;
	margin-bottom: 40px;
}
.page__info-ttl h2 {
	font-size: 24px;
	font-weight: bold;
}
.page__info-btn a {
	width: 88px;
	height: 40px;
	font-size: 14px;
}
.page__hr {
	margin-top: 56px;
	margin-bottom: 56px;
}
.page__setting h2 {
	font-size: 24px;
	font-weight: bold;
}
.page__setting-form {
	width: 100%;
    line-height: 1.5;
	margin-bottom: 56px;
}
.page__setting-form dl {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 60px;
}
.page__setting-form dl:last-child {
	margin-bottom: 0;
}
.page__setting-form dt {
	width: 267px;
	padding-top: 11px;
	font-size: 16px;
	font-weight: bold;
}
.page__form-inline {
	display: flex;
	align-items: center;
}
.page__form-control {
	/* width: 500px; */
	width: 470px;
}
.page__form-entered {
	padding-top: 11px;

}
input[type="file"] {
    display: none;
}
.page__form-file {
	display: block;
	border: 1px dashed #989898;
	border-radius: 4px;
	background-color: #FAFAFA;
	width: 500px;
	height: 300px;
    cursor: pointer;
	transition: .3s;
	font-size: 14px;
	color: #2C2C2C;
	margin-bottom: 8px;
	position: relative;
}
.page__form-file:hover {
	opacity: .6;
}
.page__form-file.-uploaded:hover {
	opacity: 1;
	cursor: auto;
}
.page__form-file .-upload {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	gap: 16px;
}
.icon-upload {
	width: 48px;
	height: 48px;
	margin: 0 auto;
}
.page__setting-form .page__form-id {
	display: block;
}
.page__form-mail {
	display: flex;
	margin-bottom: 8px;
}
.page__form-mail:last-child {
	margin-bottom: 0;
}
.page__form-file.-icon {
	height: 200px;
	padding: 61px 120px;
}
.page__form-file.-thumb {
	width: 184px;
	height: 138px;
	border-radius: 0;
}
.page__form-file.-thumb .-upload {
	gap: 8px;
	font-size: 12px;
	width: 100%;
	text-align: center;
}
.page__form-url {
	display: flex;
	align-items: center;
	gap: 16px;
}
.page__form-link {
	display: flex;
	align-items: center;
	gap: 4px;
	color: #239D86;
}
.page__form-link:hover {
	color: #239D86 !important;
}
.icon-share {
	width: 16px;
	height: 16px;
}
.page__form-btn {
	display: flex;
	align-items: center;
	gap: 16px;
}
.page__form-btn a {
	font-size: 14px;
	height: 40px;
	padding: 14px 16px 12px 16px;
}
.page__form-btn.only-pc {
	display: flex;
}
.page__form-btn.only-sp {
	display: none;
}
.page__upload-ttl {
	display: flex;
	gap: 24px;
	align-items: center;
	margin-bottom: 40px;
}
.page__upload-ttl h2 {
	font-size: 24px;
	font-weight: bold;
}
.page__upload-layout {
	display: flex;
	justify-content: end;
	gap: 20px;
}
.page__upload-btn a {
	padding: 30px 24px;
}
.page__upload-btn a br {
	display: none;
}
.page__upload-img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 240px;
	height: 240px;
	overflow: auto;
	display: flex;
    align-items: center;
}
.page__upload-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 180px;
    overflow: auto;
    display: flex;
    align-items: center;
}
.btn-layout .outer.page__outer {
	max-width: 588px;
}
.page__outer .-sp {
	display: none;
}
.page__form-layout .page__form-ttl {
	width: 247px;
	font-weight: bold;
	padding-top: 0 !important;
}
.page__file-btn {
	width: 144px;
	height: 40px;
	font-size: 14px;
	transition: .3s;
	margin-bottom: 8px;
}
.page__file-btn:hover {
	opacity: .6;
}
.page__movie {
	width: 615px;
	row-gap: 24px;
}
.page__movie-up label {
	transition: .3s;
}
.page__movie-up label:hover {
	opacity: .6;
}
.page__up-thumb {
	width: 184px;
	/* height: 138px; */
	margin-bottom: 8px;
}
.page__up-radio {
	display: block !important;
}
.file-message {
	position: relative;
	padding-left: 30px;
}
.file-message::before {
	content: "";
	display: block;
	background-image: url(/images/icon_movie.svg);
	width: 24px;
	height: 24px;
	margin-right: 8px;
	position: absolute;
	top: 0;
	left: 0;
}
.page__file-wrap {
	display: flex;
	align-items: center;
	gap: 16px;
}
.file-delete {
	width: 88px;
	height: 40px;
	font-size: 14px;
	transition: .3s;
}
.file-delete:hover {
	opacity: .6;
}
.page__upload-thumb {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 184px;
    height: 138px;
    overflow: auto;
    display: flex;
    align-items: center;
}
.page__upload-thumb {
	position: relative;
}
.-iconEdit::before {
	content: "";
	display: block;
	background-image: url(/images/icon_edit.svg);
	width: 24px;
	height: 24px;
	position: absolute;
	top: 4px;
	right: 4px;
}
.hidden {
    display: none;
}
.page__form-ttl.-thumb {
	display: flex;
	align-items: center;
}
.page__form-layout .page__form-ttl {
	margin-top: 5px;
}
.page__attention {
	margin-bottom: 24px;
}
.page__attention-ttl {
	font-size: 20px;
	font-weight: bold;
	color: #2C2C2C;
	margin-bottom: 8px;
}
.page__attention-txt {
	font-size: 16px;
	font-weight: bold;
	color: #2C2C2C;
}
.page__attention-txt span {
	color: #EA1C1C;
}
.page__checkarea {
	display: grid;
    gap: 8px;
}
.page__checkarea li {
	font-size: 14px;
	color: #2C2C2C;
}
.page__checkarea .-checkbox span::before {
	border: 1px solid #707070;
	border-radius: 3px;
}
.page__form-up {
	width: 40px;
}
.page__form-up:hover {
	background-color: #239d86;
    border-color: #239d86;
    color: #fff !important;
}
.page__form-up .icon-arrow-prev {
	transform: rotate(90deg);
}
.page__form-down {
	width: 40px;
}
.page__form-down:hover {
	background-color: #239d86;
    border-color: #239d86;
    color: #fff !important;
}
.page__form-down .icon-arrow-next {
	transform: rotate(90deg);
}
.-disabled {
	border: 1px solid #CCCCCC;
	background-color: transparent;
	color: #CCCCCC !important;
	pointer-events: none;
}
.page__apply {
	margin-top: 56px;
}
.page__apply-warp {
	display: flex;
	gap: 40px;
	margin-bottom: 24px;
}
.page__apply-img {
	width: 320px;
	/* height: 240px; */
	position: relative;
}
.page__apply-img::before {
	content: "";
	display: block;
	background-image: url(/images/icon_edit.svg);
	width: 24px;
	height: 24px;
	position: absolute;
	top: 0;
	right: 0;
}
.page__apply-img-2 {
	width: 320px;
	/* height: 240px; */
	position: relative;
}
.page__apply-img-2::before {
	content: "";
	display: block;
	/* background-image: url(/images/icon_edit.svg); */
	width: 24px;
	height: 24px;
	position: absolute;
	top: 0;
	right: 0;
}
.page__apply-cart dl {
	display: flex;
    flex-wrap: wrap;
	margin-bottom: 16px;
}
.page__apply-cart dt {
	width: 160px;
	font-weight: bold;
}
.page__apply-cart dd {
	margin-bottom: 0;
    flex: 1;
}
.page__apply-edit {
	display: flex;
	align-items: center;
	gap: 8px;
}
.page__apply-edit a {
	width: 18px;
	height: 18px;
}
.page__table-total {
	margin-top: 16px;
}
.page__table-total dl {
	display: flex;
    flex-wrap: wrap;
	margin-bottom: 8px;
}
.page__table-total dt {
	width: 140px;
	font-weight: bold;
}
.page__table-total dd {
	margin-bottom: 0;
    flex: 1;
}
.page__apply-head {
	background-color: #E4FAF5;
	padding: 24px 0;
	text-align: center;
}
.page__apply-head p {
	color: #2C2C2C;
	font-size: 15px;
}
.page__back-btn {
	margin-top: 80px;
}
.page__back-btn .outer {
	display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    margin: 0 auto;
    max-width: 186px;
}
.page__back-btn .outer .btn-action {
	height: 40px;
	font-size: 14px;
	padding: 5px 14px;
}
@media screen and (min-width:768px) and ( max-width:1024px) {
	.page .frame {
		margin: 0 20px;
		flex-basis: auto;
	}
	.page__setting-form dl {
		display: block;
		margin-bottom: 24px;
	}
	.page__form-inline {
		display: block;
	}
	.page__form-url.page__form-inline {
		display: flex;
	}
	.page__form-mail {
		display: block;
	}
}
@media screen and (max-width: 767px) {
	.page {
		padding: 40px 0 80px;
	}
	.page .frame {
		padding: 40px 16px 65px 16px;
		flex-basis: 327px;
		border-radius: 10px;
	}
	.page__ttl h1 {
		text-align: left;
		margin-bottom: 24px;
	}
	.page__ttl h1 .sp {
		display: block;
	}
	.page__info-ttl {
		margin-bottom: 24px;
	}
	.page__heading {
		margin-bottom: 24px;
	}
	.page__hr {
		margin-top: 40px;
		margin-bottom: 40px;
	}
	.page__setting-form {
		margin-bottom: 40px;
	}
	.page__setting-form dl {
		display: block;
		margin-bottom: 24px;
	}
	.page__setting-form dt {
		margin-bottom: 16px;
		padding-top: 0;
	}
	.page__form-control {
		width: 295px;
		margin-bottom: 8px;
	}
	.page__form-inline {
		display: block;
	}
	.page__form-mail {
		display: block;
	}
	.page__form-file {
		width: 295px;
		height: 177px;
		padding: 48px 50px;
		font-size: 12px;
	}
	.page__form-file .-upload {
		gap: 0;
		width: 100%;
		text-align: center;
	}
	.icon-upload {
		margin-bottom: 12px;
	}
	.page__form-file.-icon {
		height: 177px;
		padding: 48px 50px;
	}
	.page__form-link {
		margin-bottom: 16px;
	}
	.page__form-btn {
		margin-bottom: 12px;
	}
	.page__form-btn.only-pc {
		display: none;
	}
	.page__form-btn.only-sp {
		display: flex;
		justify-content: flex-end;
		margin-top: 16px;
	}
	.page__upload-ttl h2 {
		font-size: 20px;
	}
	.page__upload-layout {
		display: block;
	}
	.page__upload-btn {
		margin-bottom: 24px;
	}
	.page__upload-btn:last-child {
		margin-bottom: 0;
	}
	.page__upload-btn a {
		font-size: 15px;
		padding: 16px 10px;
		height: auto;
	}
	.page__upload-btn a br {
		display: block;
	}
	.page__upload-img {
		width: 150px;
		height: 150px;
	}
	.page__upload-logo {
		height: 160px;
	}
	.btn-layout .outer.page__outer {
		max-width: 100%;
	} 
	.btn-layout .outer.page__outer a {
		padding: 12px 0;
		height: auto;
	}
	.page__outer .-sp {
		display: block;
	}
	.form-layout-cart.page__form-layout dl {
		display: block;
	}
	.page__form-layout.form-layout-cart dt {
		padding-bottom: 16px;
	}
	.page__form-layout.form-layout-cart dd {
		padding-bottom: 12px;
	}
	.page__form-dom.form-inline {
		display: block;
	}
	.page__form-dom.form-inline .-mb {
		margin-bottom: 16px;
	}
	.page__movie {
		margin-top: 16px;
		width: 100%;
	}
	.page__file-wrap {
		display: block;
	}
	.file-delete {
		margin-top: 16px;
	}
	.page__attention-ttl {
		font-size: 18px;
		margin-bottom: 8px;
	}
	.page__checkarea .-checkbox.-only-sp span::before {
		top: 15%;
	}
	.page__apply {
		margin-top: 24px;
	}
	.page__apply h2 {
		font-size: 16px;
	}
	.page__apply-warp {
		display: block;
	}
	.page__apply-img {
		display: block;
		width: 100%;
		height: 100%;
		margin-bottom: 16px;
	}
	.page__apply-cart dl {
		display: block;
	}
	.page__apply-cart dt {
		width: 100%;
		margin-bottom: 8px;
	}
	.page__back-btn {
		margin-top: 32px;
	}
}

/*============================================================
	オンライン納品_申請楽曲選択ページ
*/
.music {
	display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 0;
}
.music .frame {
    width: 100%;
}
.music__ttl {
	margin-bottom: 58px;
}
@media screen and (max-width: 767px) {
	.music {
		padding: 0 0 80px 0;
	}
	.music__ttl {
		margin-bottom: 24px;
	}
	.music .frame {
		max-width: 100%;
		overflow-x: scroll;
	}

	.table-list-sp table td {
		padding: 8px 5px;
		min-width: 200px;
	}
}


.order-change {
    list-style: none;
    padding: 10px;
}
.order-change li {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    cursor: -webkit-grab;
    cursor: grab;
    max-width: 500px;
    transition: box-shadow .3s;
}
.order-change li.onGrab {
    cursor: -webkit-grabbing;
    cursor: grabbing;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, .15);
    position: absolute;
    z-index: 1;
}
.order-change li:not(:last-child) {
    margin-bottom: 10px;
}
.hidden {
    visibility: hidden;
}