:root {
	--text-black: #242529;
	--text-green: #4FC529;
	--text-red: #f31e1e;
	--gray-color: rgb( 117 , 138 , 153 );
	--darkgray-color: #3F3F3F;
	--background-gray: rgb(242, 242, 242);

	--yellow-color: #FFB13D;

	--main-skyblue: #25A4F4;

	--footer-height: 5.6vh;
}

/* bootstrapの色変更 */

/*------------------------------------
- COLOR primary
------------------------------------*/
.alert-primary {
	color: #0058a1;
	background-color: #e9f5ff;
	border-color: #d4ebff;
}

.alert-primary hr {
	border-top-color: #bbe0ff;
}

.alert-primary .alert-link {
	color: #003c6e;
}

.badge-primary {
	color: #fff;
	background-color: #1d99ff;
}

.badge-primary[href]:hover, .badge-primary[href]:focus {
	color: #fff;
	background-color: #007fe9;
}

.bg-primary {
	background-color: #1d99ff !important;
}

a.bg-primary:hover, a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
	background-color: #007fe9 !important;
}

.border-primary {
	border-color: #1d99ff !important;
}

.btn-primary {
	color: #fff;
	background-color: #1d99ff;
	border-color: #1d99ff;
}

.btn-primary:hover {
	color: #fff;
	background-color: #0088f8;
	border-color: #007fe9;
}

.btn-primary:focus, .btn-primary.focus {
	box-shadow: 0 0 0 0.2rem rgba(29, 153, 255, 0.5);
}

.btn-primary.disabled, .btn-primary:disabled {
	color: #fff;
	background-color: #1d99ff;
	border-color: #1d99ff;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
	color: #fff;
	background-color: #007fe9;
	border-color: #0077d9;
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus {
	box-shadow: 0 0 0 0.2rem rgba(29, 153, 255, 0.5);
}

.btn-outline-primary {
	color: #1d99ff;
	background-color: transparent;
	border-color: #1d99ff;
}

.btn-outline-primary:hover {
	color: #fff;
	background-color: #1d99ff;
	border-color: #1d99ff;
}

.btn-outline-primary:focus, .btn-outline-primary.focus {
	box-shadow: 0 0 0 0.2rem rgba(29, 153, 255, 0.5);
}

.btn-outline-primary.disabled, .btn-outline-primary:disabled {
	color: #1d99ff;
	background-color: transparent;
}

.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle {
	color: #fff;
	background-color: #1d99ff;
	border-color: #1d99ff;
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus {
	box-shadow: 0 0 0 0.2rem rgba(29, 153, 255, 0.5);
}

.list-group-item-primary {
	color: #0058a1;
	background-color: #d4ebff;
}

.list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
	color: #0058a1;
	background-color: #bbe0ff;
}

.list-group-item-primary.list-group-item-action.active {
	color: #fff;
	background-color: #0058a1;
	border-color: #0058a1;
}

.table-primary,
.table-primary > th,
.table-primary > td {
	background-color: #d4ebff;
}

.table-hover .table-primary:hover {
	background-color: #bbe0ff;
}

.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th {
	background-color: #bbe0ff;
}

.text-primary {
	color: #1d99ff !important;
}

a.text-primary:hover, a.text-primary:focus {
	color: #007fe9 !important;
}



/**
 Google Material Icon マテリアルアイコン
**/

/* アイコンカラー */
.material-symbols-rounded {
	color: var(--text-black);
}

.material-symbols-rounded.current {
	color: var(--main-skyblue);
	font-weight: bold;
}

.material-symbols-rounded.gray {
	color: rgb( 117 , 138 , 153 );
}

.material-symbols-rounded.white {
	color: white;
}

.material-symbols-rounded.skyblue {
	color: var(--main-skyblue);
}

/* アイコンサイズ */
.material-symbols-rounded.size-20 {
	font-size: 20px;
	font-variation-settings:
		'FILL' 0,
		/* 'wght' 600, */
		'GRAD' 0,
		'OPSZ' 20
}
.material-symbols-rounded.size-24 {
	font-size: 24px;
	font-variation-settings:
		'FILL' 0,
		/* 'wght' 600, */
		'GRAD' 0,
		'OPSZ' 24
}
.material-symbols-rounded.size-32 {
	font-size: 32px;
	font-variation-settings:
		'FILL' 0,
		/* 'wght' 600, */
		'GRAD' 0,
		'OPSZ' 24
}
.material-symbols-rounded.size-40 {
	font-size: 40px;
	font-variation-settings:
		'FILL' 0,
		/* 'wght' 600, */
		'GRAD' 0,
		'OPSZ' 40
}
.material-symbols-rounded.size-48 {
	font-size: 48px;
	font-variation-settings:
		'FILL' 0,
		/* 'wght' 600, */
		'GRAD' 0,
		'OPSZ' 48
}
/* /アイコンサイズ*/

/* いいね・シェアなど投稿関連のボタン */
.item-icon {

}

.liked {
	background-color: #F44336;
	color : white;
	border: none;
}

.bookmarked {
	background-color: #FFC107;
	color : white;
	border: none;
}


* {
	font-weight: lighter;
	font-feature-settings: "palt";
}

ul {
	padding-left: 0;
}
html,body {
	margin: 0;
	font-size: 0.9rem;
	color: var(--text-black);
	/* font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; */

	font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}

main {
	padding-bottom: 70px;
}
img {
	max-width: 100%;
}
* {
	box-sizing: border-box;
}
a {
	text-decoration: none;
	color : var(--text-black);
	cursor: pointer;
}
.p10px {
	padding: 0 10px;
}
.hide {
	display: none;
}
.flex, header {
	display: flex;
	position: relative;
}
.flex-right {
	justify-content: flex-end;
}
.outer, header {
	margin: auto;
	max-width: 100%;
	width: 480px;
}
header {
	border-bottom: 1px solid #ddd;
}

/* ボタン */
.back-button {
	padding: 0;
	border: none;
	outline: none;
	font: inherit;
	color: inherit;
	background: none;
	height: 100%;
}

/* サイドメニュー */
.drawer-nav {
	z-index: 100;
	padding: 1rem 1rem calc(var(--footer-height) * 1.5);
}

.drawer-overlay {
	z-index: 99;
}

.sidebar-profile {
	padding: 1rem 0.8rem 0;
}

.sidebar-profile p {
	/* color: var(--gray-color); */
	color: var(--darkgray-color);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;  
}

.sidebar-profile .name {
	margin: 0.4rem 0 0;
	font-size: 1rem;
	font-weight: bold;
}

.sidebar-profile .account {
	margin: 0 0 0.4rem;
	font-size: 0.8rem;
}

.sidebar-profile > .follow-box {
	display: flex;
	text-align: center;
}

.sidebar-profile > .follow-box > div {
	flex: 1;
}

.sidebar-profile > .follow-box .number {
	margin: 0;
	font-size: 1rem;
	font-weight: bold;
}

.sidebar-profile > .follow-box .text {
	margin: 0;
	font-size: 0.6rem;
}

.sidebar-menu .point-box {
	margin: 0 0.5rem 0.4rem; /* hr の margin:0.2rem と重複するので 0.4にしておく */
	padding: 0.4rem 0.6rem;
	background-color: var(--yellow-color);
	color: white;
}

.sidebar-menu a {
	display: flex;
	align-items: center;
	padding: 0.4rem 0.8rem;
	font-size: 1rem;
}

.sidebar-menu > a:hover {
	background-color: #F0F2F4;
	color: var(--text-black);
}

.sidebar-hr {
	margin: 0.2rem 0;
}

.sidebar-accodion-inner {
	padding-left: 1rem;
	display: none;
}

/* /サイドメニュー*/


.outer {
	position: relative;
}
header .logo {
	flex :1;
	text-align: center;
	padding-top: 10px;
}
header .logo img {
	height: 40px;
	margin-left: -60px;
}


/* フッター */
footer {
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: auto;
	padding: 0 1rem;
	max-width: 100%;
	width: 480px;
	border-top : 1px solid #ddd;
	bottom : 0;
	left: 50%;
	transform: translate(-50%);
	height: var(--footer-height);
	min-height: 28px;
	background-color: #fff;
	z-index: 101; /* ドロワーが100なので+1 */
}

footer .footer-item {
	flex: 1;
	height: 100%;	/* 親要素いっぱいに広げる */
	text-align: center;
	display: flex;
	position: relative;
}

footer .footer-item a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
}

footer .footer-item a span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);  
}

footer .current {
	color : var(--main-skyblue);
}

/* /フッター */


/* 通知 */
.unread {
	background-color: var(--background-gray);
}

header .user, header .menu {
	width: 60px;
	height: 60px;
	text-align: center;
	border: none;
	background-color: transparent;
}
header h1 {
	margin: 0;
	line-height: 48px;
	font-size: 1.4rem;
	flex: 1;
	text-align: center;
}
/* /通知 */


/* サムネイル */
.blur-container {
	display: inline-block;
	position: relative;
}

.blur-container:after {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    -moz-box-shadow: inset 0px 0px 2px 2px white;
    -webkit-box-shadow: inset 0px 0px 2px 2px white;
    box-shadow: inset 0px 0px 2px 2px white;
    content: "";
}

/* /サムネイル */


header .fas {
	font-size: 30px;
	line-height: 60px;
	color : var(--main-skyblue);
}
.col3-content {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	padding: 0 10px;
	gap : 10px;
}
.col3-content > * {
	width: calc(33% - 6px);
}

.col4-content {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	padding: 0 10px;
	gap : 10px;
}
.col4-content > * {
	width: calc(33% - 6px);
}


.col5-content > * {
	width: calc(20%);
}
.search-user-result li {
	display: flex;
	width: 100%;
	padding: 10px 10px;
	align-items: center;
	border-bottom: solid 1px #eee;
}
.search-user-result .left {
	width: 50px;
}
.search-user-result .center {
	flex: 1;
}
.search-user-result .right {
	width: 140px;
}

.icon {
	width: 40px;
	min-width: 40px;
	height: 40px;
	background-color: #ddd;
	border-radius: 50%;
	border: 1px solid #E5E5E5;
}

.follow {
	background-color: transparent;
	border: solid 2px var(--main-skyblue);
	color : black;
	padding: 3px 0px;
	text-align: center;
	border-radius: 15px;
	height: 30px;
	font-size: 90%;
	width: 80px;
}
.follow.on {
	background-color: var(--main-skyblue);
	border-color: var(--main-skyblue);
	color : white;
}

.crop {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
header h1 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}
.search-bar {
	background-color: #ccc;
	padding: 5px;
	position: relative;
	border-radius: 22px;
}
.followers {
	font-size: 90%;
	text-align: right;
	padding-right: 10px;
	line-height: 30px;
}

.search-bar::before {
	content : "\f002";
	position: absolute;
	top : 13px;
	left: 15px;
	font-family: "Font Awesome 5 Pro";
	font-weight: 900;
	display: inline-block;
	color : #666;
}
.search-bar input {
	padding-left: 30px;
	border-radius: 17px;
}
h2 {
	padding: 5px 10px;
	font-size: 20px;
	margin-top: 30px;
}
h3 {
	font-size: 20px;
	margin-top: 20px;
}

.icon.px100 {
	width: 100px;
	height: 100px;
}

.icon.px40 {
	width: 40px;
	height: 40px;
}

/* .profile .name {
	margin-top: 10px;
	font-weight: bold;
	font-size: 100%;
	margin-bottom: 0px;
}
.profile .account {
	color : #666;
} */

.link-button .fa-star {
	color : #ffc107;
}
.link-button {
	padding: 10px 20px;
	border: solid 1px #aaa;
	border-radius: 20px;
	display: block;
	margin: auto;
	width: 80%;
}


.link-button2 .fa-star {
	color : #ffc107;
}
.link-button2 {
	padding: 5px 10px;
	border: solid 1px #aaa;
	border-radius: 10px;
	display: block;
	margin: auto;
	width: 30%;
}


.link-banner {
	width: 640px;
  	height: 100px;
	background-image: url(sftp://54.168.116.252//var/www/fans-me/public/banner/01.jpg);
	background-repeat: no-repeat;
}


.logo-box {
	padding-bottom: 3rem;
}
.no-head-top {
	padding-top: 3rem;
}
.logo-box img {
	width: 200px;
}

form.material {
	padding: 0 20px;
}
.material .form-control{
	border: none;
	border-bottom: 1px solid #ced4da ;
	border-radius: 0;
}
.material .form-row {
	padding: 10px 0;
}
.material .label {
	color : var(--main-skyblue);
	font-weight: bold;
}
.red-text {
	color : #ff3b66;
}
.blue-text {
	color : #00acee;
}
.button {
	color : white;
	font-weight: bold;
	border : none;
	padding: 12px;
	border-radius: 5px;
	width: 100%;
	text-align: center;
}
a.button:hover {
	color : white;
}
.button.thin {
	padding: 6px;
}
.button.red {
	background-color : var(--main-skyblue);
}
.button.red-outline {
	background-color: transparent;
    border: 2px solid var(--main-skyblue);
    color: var(--main-skyblue);
}
.button.red2 {
	background-color : #FF0000;
}
.button.blue {
	background-color : #00acee;
}
.button.yellow {
	border: 3px solid var(--yellow-color);
	background-color: transparent;
	color: var(--darkgray-color);
}
.button.gray{
	border: 3px solid var(--gray-color);
	background-color: transparent;
	color: var(--darkgray-color);
}

.block {
	display: block;
}
.mt20px {
	margin-top: 20px;
}
.mt5px {
	margin-top: 5px;
}
.help-text {
	color : #aaa;
	margin: 3px 0;
}

.error {
	color : #ff3b66;
	font-weight: bold;
	margin: 10px 0;
}
textarea.form-control {
	min-height: 200px;
}



.c-switch-check {
	display: none;
}
.c-switch-label {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 30px;
	border-radius: calc(30px / 2);
	background: #cccccc;
	transition: background 200ms;
}
.c-switch-label::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	display: block;
	width: calc(30px - 4px);
	height: calc(30px - 4px);
	border-radius: calc((30px - 4px) / 2);
	background: #ffffff;
	transform: translateX(0);
	transition: transform 200ms;
}
.c-switch-check:checked + .c-switch-label {
	background: #3dcc55;
}
.c-switch-check:checked + .c-switch-label::before {
	transform: translateX(calc((50px - 4px) - (30px - 4px)));
}
.form-row.switch {
	display: flex;
}
.form-row.switch label {
	line-height: 30px;
	margin-left: 15px;
	font-size: 16px;
}
.material .input-group-text {
	background-color: transparent;
	border : none;
}
.material .form-control:invalid {
	border-color: var(--main-skyblue);
}


.form-row.controls input {
	display: none;
}

.form-row.controls {
	display: flex;
	gap : 10px;
}
.form-row.controls i {
	font-size: 20px;
}
.form-row.controls button {
	border: none;
	background-color: transparent;
}

.mb20px {
	margin-bottom: 20px !important;
}
.form-row video {
	width: 100%;
}
.form-row.images {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap : 2%;
}
.form-row.images > div {
	max-width: 32%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	position: relative;
	margin-bottom: 2%;
}
.form-row.images .remove {
	position: absolute;
	top : 0px;
	left: 0px;
	font-size: 20px;
	border : none;
	background-color: transparent;
}
.form-row.video {
	position: relative;
}
.form-row.video .button-set {
	top : 20px;
	left: 10px;
	position: absolute;
}
.form-row.video button, .form-row.video label {
	border :solid 2px black;
	border-radius: 10px;
	background-color: white;
	padding: 1px 6px;
}
.form-row.plans {
	padding-left: 50px;
}
.form-row.plans label, .form-row.plans a {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 5px 10px 5px 30px;
	font-size: 16px;
	border :solid 2px #ddd;
	border-radius: 18px;
	margin-bottom: 10px;
	position: relative;
}
.form-row.plans input {
	display: none;
}
.form-row.plans input:checked+label {
	border-color: var(--main-skyblue);
}
.form-row.plans input:checked+label::before {
	content : "\f00c";
	position: absolute;
	top : 0px;
	left: 10px;
	line-height: 32px;
	font-family: "Font Awesome 5 Pro";
	font-weight: 900;
	display: inline-block;
	color : var(--main-skyblue);
}
.form-row.plans a::before {
	content : "\2b";
	position: absolute;
	top : 0px;
	left: 10px;
	line-height: 32px;
	font-family: "Font Awesome 5 Pro";
	font-weight: 900;
	display: inline-block;
	color : #ddd;
}
.modal-box {
	position: fixed;
	top : 0px;
	left: 0;
	background: rgba(1,1,1,0.5);
	width: 100vw;
	height: 100vh;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
}
.modal-box .modal-window {
	background-color: white;
	width: 480px;
	max-width: 100%;
	padding: 20px;
	position: relative;
}
.modal-box .modal-window .close {
	position: absolute;
	top : -50px;
	right: 0;
	background-color: transparent;
	border: none;
	color :white;
	font-size: 32px;
}
button.clear {
	color : #999;
	border : solid 1px #ddd;
	padding: 6px;
	border-radius: 5px;
	background-color: transparent;
}
.form-row.timer button {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 5px 10px 5px 10px;
	font-size: 16px;
	border :solid 2px #ddd;
	border-radius: 18px;
	margin-bottom: 10px;
	position: relative;
	background-color: transparent;
}
.form-row.timer button i {
	width: 30px;
}
.mt30px {
	margin-top: 30px;
}

.planSet {
	padding-left: 0;
	list-style: none;
}
.planSet li {
	padding: 10px;
	border :solid 1px #ddd;
	margin-bottom: 20px;
	border-radius: 5px;
}
.planSet .price {
	font-size: 16px;
}
.planSet .title {
	font-weight: bold;
	font-size: 14px;
}
.planSet .text {
	padding: 5px 15px;
	background-color: #f6f6f6;
	margin: 5px;
	margin-left: -10px;
	margin-right: -10px;
}

.crop1 {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.crop2 {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.crop4 {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
}
.button.outline {
	background-color: white;
	display: inline-block;
	width: auto;
	color : var(--gray-color);
	border :solid 2px var(--gray-color);
	font-weight: bold;
	padding: 6px 40px;
	border-radius: 17px;
}
.button.white {
	background-color: white;
	color: var(--main-skyblue);
	box-sizing: border-box;
}
.loader {
	align-items: center;
	background: rgba(255,255,255, 0.7);
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 999;
	text-align: center;
	font-weight: bold;
}
.loader::before, .progress {
	animation: loader 0.5s linear infinite;
	border: 3px solid #ffa500;
	border-radius: 50%;
	border-right: 3px solid rgba(255,165,0, 0.2);
	border-top: 3px solid rgba(255,165,0, 0.2);
	content: "";
	margin-bottom: 20px;
	display: block;
	height: 70px;
	width: 70px;
}
.loader-item::before {
	content: none;
}

@keyframes loader {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(360deg);
	}
}
form:invalid .valid {
	display: none;
}
form:invalid .invalid {
	display: block;
}

form:valid .valid {
	display: block;
}
form:valid .invalid {
	display: none;
}
.profile .header {
	background-color: #ddd;
	width: 100%;
	border : none;
	position: relative;
}
.profile .cover {
	overflow: hidden;
	width: 100%;
	aspect-ratio: 16 / 9;
}
.profile .back img {
	width: 100%;
}
.profile .header .icon {
	display: block;
	margin:auto;
	width: 100px;
	height: 100px;
	margin-left: -50px;
	border : 2px #E5E5E5 solid;
	position: absolute;
	bottom : -50px;
	left : 50%;
	z-index: 50;
}
.mt70px {
	margin-top: 70px;
}
.profile .tabs {
	list-style: none;
	display: flex;
	justify-content: space-between;
}
.profile .tabs li {
	width: 22%;
	text-align: center;
}
.profile .tabs li strong {
	display: block;
	font-size: 22px;
}
.profile .tabs li.current {
	border-bottom: solid 2px #333;
}
.profile .name {
	font-weight: bold;
	font-size: 16px;
	margin-top: 5px;
}
.profile .id {
	color : #999;
}
.profile .header label {
	display: block;
}
.material .form-control[readonly] {
	background-color: transparent;
}
.profile .cover img {
	width: 100%;
}
.profile .header.edit label {
	position: relative;
}

.profile .header.edit .icon {
	z-index: 90;
}
.profile .header.edit label.userIcon::before {
	z-index: 100;
}


.profile .header.edit label::after {
	content : "\f03e";
	line-height: 32px;
	font-family: "Font Awesome 5 Pro";
	font-weight: 900;
	display: inline-block;
	color : white;
	position: absolute;
	top : 50%;
	left: 50%;
	z-index: 200;
	font-size: 32px;
	opacity: 0.8;
	margin-top: -16px;
	margin-left: -16px;
}

.mt50px {
	margin-top: 50px;
}

.productSet {
	list-style: none;
}
.main-img img {
	width: 100%;
}
.main-img {
	position: relative;
	overflow: hidden;
}
.productSet .main-img .play {
	position: absolute;
	top : 10px;
	left: 10px;
}
.main-img .controls {
	position: absolute;
	top : 10px;
	left: 10px;
}
.main-img.mini .controls {
	top : 5px;
	left: 5px;
}
.main-img .controls .control {
	background-color: white;
	border-radius: 5px;
	padding: 5px 10px;
	display: inline-block;
}
.main-img.mini .controls .control {
	padding: 3px 5px;
}
.main-img.mini a {
	background-color: #ddd;
	display: block;
	width: 100%;
	height: 100%;
}
.main-img .v-length {
	position: absolute;
	bottom : 10px;
	left: 10px;
	color: white;
	background-color:rgba(0,0,0,0.5);
	border-radius: 5px;
	padding: 3px 10px;
	display: inline-block;
}
.main-img.mini .v-length {
	position: absolute;
	bottom : 4px;
	left: 2px;
	color: white;
	background-color:rgba(0,0,0,0.5);
	border-radius: 5px;
	padding: 2px 5px;
}
.productSet li {
	border: 2px solid #eee;
	border-radius: 5px;
	margin-bottom: 40px;
	padding: 0.5rem;
}
.productSet .outline {
	padding: 6px 15px;
	margin-right: 10px;
}
.productSet .left {
	margin-right: 10px;
}
.swiper-button-next:after, .swiper-button-prev:after {
	color : white;
	font-size: 24px;
}

.setting {
	border-top: 1px solid #ddd;
	list-style: none;
}
.setting li {
	border-bottom: 1px solid #ddd;
}
.setting li a {
	display: block;
	padding: 15px;
	position: relative;
}
.setting li a::after {
	content : "\f054";
	line-height: 32px;
	font-family: "Font Awesome 5 Pro";
	font-weight: 900;
	display: inline-block;
	color : gray;
	position: absolute;
	top : 10px;
	right: 10px;
}
.manage-item {
	list-style: none;
}
.manage-item li {
	display: flex;
	gap : 0 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
	margin-bottom: 20px;
}
.manage-item .left {
	width: 100px;
}
.manage-item .right {
	flex: 1;
}
.margin-auto {
	margin: auto;
}
.tag {
	background-color: white;
	display: inline-block;
	width: auto;
	color: #333;
	border: solid 2px #333;
	padding: 1px 10px;
	border-radius: 17px;
}
.tag-public {
	color: var(--text-green);
	border: solid 2px var(--text-green);
}
.tag-private {
	color: var(--text-red);
	border: solid 2px var(--text-red);
}
.tag-selltype {
	font-size: 0.8rem;
}
.f14 {
	font-size: 14px;
}
.f12 {
	font-size: 12px !important;
}
.no-border li {
	border: none;
}
video {
	max-width: 100%;
}
button.outline.liked {
	border-color: #ff3b66;
	background-color: #ff3b66;
	color : white;
}
button.outline.bookmarked {
	border-color: var(--yellow-color);
	background-color: var(--yellow-color);
	color : white;
}
.blur {
	-ms-filter: blur(3px);
	filter: blur(3px);
	overflow: hidden;
}
.main-img .limited {

	background-color: rgba(255,255,255,0.65);
	padding: 5px 16px;
	position: absolute;
	text-align: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	border-radius: 6px;
	min-width: 260px;
}
.main-img .limited div {
	font-size: 16px;
}
.main-img .limited div {
	font-size: 16px;
}
.plan-table th {
	background-color: #fee;
}

article.sign{
	position: fixed;
	bottom : 0;
	border-top : solid 1px #ddd;
	width: 480px;
	max-width: 100%;
	padding: 10px 0;
	background-color: white;
}
article.sign .flex {
	gap : 20px;
	justify-content: center;
}
.light-gray {
	color : lightgray;
}
.law ul {
	list-style: none;
	padding-left: 20px;
}
.law ul li {
	border-bottom: 1px dotted #ddd;
	margin-bottom: 5px;
	padding: 5px;
}
.law dd {
	border-bottom: 1px dotted #ddd;
	margin-bottom: 10px;
	padding: 5px;
	margin-left: 20px;
}
.input-group-button {
	border-bottom: 1px solid #ddd;
	padding: 0 10px;
	display: inline-block;
	line-height: 30px;
}
.item-count {
	background-color: transparent;
	border: solid 2px #666;
	color: #666;
	padding: 0px 10px;
	border-radius: 15px;
	height: 30px;
	font-size: 70%;
	line-height: 26px;
	white-space: nowrap;
}
.item-count strong {
	font-size: 14px;
	color : black;
}

.member-button {
	background-color: transparent;
	border: solid 2px var(--main-skyblue);
	color: black;
	text-align: center;
	padding: 0px 10px;
	border-radius: 20px;
	height: 36px;
	font-size: 14px;
	line-height: 32px;
	display: inline-block;
	min-width: 220px;
	margin: auto;
}

.member-button.on {
	background-color: var(--main-skyblue);
	color : white;
}

.warning-button {

	background-color: transparent;
	border: solid 2px #e60033;
	color : black;
	padding: 6px 0px;
	text-align: center;
	border-radius: 30px;
	height: 35px;
	font-size: 100%;
	width: 80px;
	display: block;
}

.warning-button :hover {

	background-color: transparent;
	color : black;
	padding: 6px 0px;
	text-align: center;
	border-radius: 30px;
	height: 35px;
	font-size: 100%;
	width: 200px;
}

.edit-button {
	background-color: transparent;
	border: solid 2px var(--main-skyblue);
	color : black;
	padding: 6px 0px;
	text-align: center;
	border-radius: 30px;
	height: 35px;
	font-size: 100%;
	width: 80px;
}




canvas {
	max-width: 100%;
}
.main-img {
	background-color: #ddd;
}
.profile .tabs.flex-start {
	justify-content : flex-start;
}
.dropdown .dropdown-toggle::after{
	display: none;
}
.dropdown .dropdown-toggle {
	border: solid 2px #aaa;
	color: black;
	line-height: 26px;
	height: 30px;
	background-color: white;
	border-radius: 15px;
}
.productSet .dropdown .dropdown-toggle {
	line-height: 32px;
	height: 36px;
	width: 36px;
	border-radius: 18px;
}
.productSet .dropdown li {
	border: none;
	border-radius: 0;
	margin-bottom: 0;
}


ul.warning {
	list-style: none;
	margin-top: 20px;
}
ul.warning li label {
	display: block;
	line-height: 30px;
}

.main-img.long {
	min-height: 220px;
}
.profile-buttons .button {
	padding: 0px 10px;
	height: 30px;
	line-height: 26px;
	font-size: 90%;
}
.swiper-main .swiper-slide {
	text-align: center;
}
body.development::before {
	position: fixed;
	display: block;
	background: rgba(255, 0, 0, 0.4);
	width: 100%;
	height: 16px;
	content: "development mode";
	color : white;
	z-index: 9999999;
	text-align: center;
	font-size: 12px;
}
.line-btn {
	background-color : #06c755;
}
.s40 {
	width: 40px;
	height: 40px;
}
.s20 {
	width: 20px;
	height: 20px;
}
.container.law h2::before, .container.law h1::before {
	content : "-";
	margin-right: 10px;
}
.container.law h1 {
	margin-top: 30px;
}

.dm-list {
	list-style: none;
	height:80vh;
}

.dm-list li {
	display: flex;
	border-bottom : solid 1px #eee;
	padding: 0.8rem 1.2rem;
	gap : 10px;
}
.dm-list li:active {
	background-color: var(--background-gray);
}
.dm-list li .account {
	font-size: 10px;
}
.dm-list li .center {
	flex :1;
}
.dm-list li p.text {
	margin-bottom: 0px;
	color: var(--text-black);
}
/* .dm-list li:last-child {
	border-bottom: 1px solid #ddd;
} */
.dm-list li .badge {
	background-color: red;
	border-radius: 50%;
	padding: 0.5em 0.75em;
	margin-top: 5px;
}
.dm-tabs {
	overflow-x: scroll;
}
.dm-tabs .tabs {
	white-space: nowrap;
}
.dm-tabs .tabs li {
	padding: 0 20px 5px 20px;
	width: auto;
}
.dm-tabs .tabs li span {
	padding-bottom: 10px;
}
.multi-start {
	position: fixed;
	bottom : 80px;
	left: 0px;
	width: 100%;
}
.dropdown.menu .dropdown-toggle {
	border: none;
}
header .fa-ellipsis-vertical {
	font-size: 20px;
	line-height: 60px;
	color: var(--main-skyblue);
}
.profile .tabs.wide {
	width: 100%;
}
.profile .tabs.wide > * {
	flex: 1;
}

.form-row.line {
	border-bottom: 1px solid #ddd;
}
header a {
	position: relative;
}
header .badge {
	background-color: red;
	border-radius: 50%;
	padding: 0.5em 0.75em;
	margin-top: 3px;
	position: absolute;
	top : 0px;
	right: 5px;
}
.flex-1 {
	flex: 1;
}
.vue-tags-input .ti-tag {
	background-color : var(--main-skyblue) !important;
}
.vue-tags-input .ti-input {
	border-top : none !important;
	border-left: none !important;
	border-right: none !important;
	border-bottom-color: var(--main-skyblue) !important;
}
.mr10 {
	margin-right: 10px;
}


.comment li {
	display: flex;
	gap : 10px;
	margin-bottom: 20px;
}
.comment li:first-child {
	margin-top: 20px;
}
.comment li p {
	position: relative;
	display: block;
	padding: 10px 4%;

	text-align: left;
	background-color: var(--background-gray);
	color: #000;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	font-size: 13px;
	margin: 0;
	margin-bottom: 5px;
}

.comment li button {
	border: none;
	background-color: transparent;
}
.comment .controls {
	justify-content: space-between;
}
.comment .close {
	width: 100%;
	padding: 5px 10px 5px 10px;
	font-size: 16px;
	border: solid 2px #ddd;
	border-radius: 18px;
	position: relative;
	background-color: transparent;
}
.comment .reply {
	padding-left: 50px;
}


.ranking ul {
	margin-top: 30px;
}
.ranking li {
	display: flex;
	gap : 20px;
	padding-bottom: 10px;
	margin-bottom: 15px;
	border-bottom: 1px solid #ddd;
}
.ranking li .account {
	color : gray;
	float: right;
}
.ranking p.name {
	font-weight: bold;
	font-size: 16px;
	margin-top: 5px;
	margin-bottom: 0px;
}
.ranking a:hover {
	color : #333;
}
.ranking li .rank,.ranking .ad {
	border-radius: 20px;
	font-weight: bold;
	margin-bottom: 5px;
	display: inline-block;
	padding: 3px 10px;
	background-color : var(--main-skyblue);
	color : white;
}
.ranking li:nth-child(1) .rank {
	background-color : darkgoldenrod;
	color : white;
}
.ranking li:nth-child(2) .rank {
	background-color : silver;
	color : white;
}
.ranking li:nth-child(3) .rank {
	background-color : saddlebrown;
	color : white;
}
.tab-3 li {
	width: 33% !important;
	padding: 10px;
}
.tab-3 li a {
	display: block;
}

.promo .input-group-button {
	background-color: #ff3b66;
	color : white;
	border-left: none;
	border-top: none;
	border-right: none;
}
.profile-buttons .button.paters {
	border-color : darkgoldenrod;
}
.profile-buttons .button.paters:hover {
	color : #333;
}

.profile-buttons .button.warning {
	border-color : red;
}

.profile-buttons .button.warning:hover {
	color : #333;
}

.ad-slides {
	padding: 10px;
	background-color: #eee;
}
.ad-slides .swiper-slide {
	width: 180px;
	border : solid 1px #eee;
	background-color: white;
}
.ad-slides .profile .header {
	margin-bottom: 35px;
}
.ad-slides .profile .header .icon {
	width: 70px;
	height: 70px;
	margin-left: -35px;
	bottom : -35px;
}
.ad-slides .profile .flex-right {
	justify-content: center;
}
.bank-label {
	background-color: #ddf;
	padding: 5px;
}
.bank-label strong {
	color : darkred;
	font-weight: bold;
	font-size: larger;
}
#itemList {
	overflow: hidden;
}

.bg-main-skyblue {
	background-color: var(--main-skyblue);
}

.br-main-skyblue {
	border-color: var(--main-skyblue);
}