@charset "UTF-8";

/*-------------------------------------------------------------------*/
/* color */
/*-------------------------------------------------------------------*/
/*
#000102
#133b3d
#267479

#3fbac2 *
#7bcfd5
#b6e5e8
*/


/*-------------------------------------------------------------------*/
/* general */
/*-------------------------------------------------------------------*/
/* common */
* {
	font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: 100;
	outline: none !important;
	line-height: 1.4;
	color: #333;
}

* > i {
	color: inherit !important;
}

a {
	color: #101099;
	font-family: inherit;
	text-decoration: none !important;
}
a:hover {
	color: #101099;
}

hr {
	border-top: 1px solid #3fbac2;
	margin: 3rem 0;
}

p {
	margin: 0;
}
p + p {
	margin-top: 0.8rem;
}

ul {
	padding: 0;
}
dl > dt {
	font-weight: 100;
}

svg {
	stroke: currentColor;
}
svg * {
	fill: none;
	stroke: currentColor;
	stroke-width: 1px;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* image */
div[class^="col"] > img.img-fluid {
	width: 100%;
}

/* shorten or rename */
.hidden {
	display: none;
}
.di {
	display: inline;
}
.dib {
	display: inline-block;
}
.db {
	display: block;
}

/* header typo */
h1,
h2,
h3,
h4,
h5 {
	font-weight: 100;
}
h1 {
	font-size: 2.5rem;
	margin: 0.5rem 0 1.5rem 0;
}
h2 {
	font-size: 2rem;
	margin: 0.5rem 0 1.5rem 0;
}
h3 {
	font-size: 1.5rem;
	margin: 0.5rem 0 1.5rem 0;
}
h4 {
	font-size: 1.25rem;
	margin: 0.5rem 0 1.5rem 0;
}
h5 {
	font-size: 1.1rem;
	margin: 0.5rem 0 1.5rem 0;
}

/* width */
.w1r {
	width: 1rem !important;
}
.w2r {
	width: 2rem !important;
}
.w3r {
	width: 3rem !important;
}
.w4r {
	width: 4rem !important;
}
.w5r {
	width: 5rem !important;
}
.w10p {
	width: 10px !important;
}
.w20p {
	width: 20px !important;
}
.w30p {
	width: 30px !important;
}
.w40p {
	width: 40px !important;
}
.w50p {
	width: 50px !important;
}

/* position */
.fr {
	float: right;
}
.fl {
	float: left;
}
.cf::after {
	content: "";
	clear: both;
	display: block;
}

img,
[class^=col-] > img {
	width: 100%;
	height: auto;
}

/* text */
.t-xs {
	font-size: 0.65rem;
}
.t-sm {
	font-size: 0.85rem;
}
.t-md {
	font-size: 1.15rem
}
.t-lg {
	font-size: 1.3rem;
}
.t-nw {
	white-space: nowrap;
}
.t-tranc {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.t-upper {
	text-transform: uppercase !important;
}
.t-lower {
	text-transform: lowercase !important;
}
.t-cap {
	text-transform: capitalize !important;
}

b,
.fw-b {
	font-weight: 500;
}
.fw-bb {
	font-weight: 900;
}

/* background */
.bg-0 {
	background-color: transparent !important;
}
.bg-1 {
	background-color: #FFF !important;
}
.bg-2 {
	background-color: #EEE !important;
}
.bg-3 {
	background-color: #CCC !important;
}
.bg-4 {
	background-color: #999 !important;
}
.bg-5 {
	background-color: #666 !important;
}
.bg-6 {
	background-color: #333 !important;
}
.bg-7 {
	background-color: #000 !important;
}

.bg-t1 {
	background-color: rgba(0, 0, 0, 0) !important;
}
.bg-t2 {
	background-color: rgba(0, 0, 0, 0.065) !important;
}
.bg-t3 {
	background-color: rgba(0, 0, 0, 0.2) !important;
}
.bg-t4 {
	background-color: rgba(0, 0, 0, 0.4) !important;
}
.bg-t5 {
	background-color: rgba(0, 0, 0, 0.6) !important;
}
.bg-t6 {
	background-color: rgba(0, 0, 0, 0.8) !important;
}
.bg-t7 {
	background-color: rgba(0, 0, 0, 1) !important;
}

.bg-b4 {
	background-color: #101099 !important;
}
.bg-b5 {
	background-color: #0a0a66 !important;
}
.bg-b6 {
	background-color: #050533 !important;
}
.bg-b7 {
	background-color: #000 !important;
}

.bg-g4 {
	background-color: #109999 !important;
}
.bg-g5 {
	background-color: #0a6666 !important;
}
.bg-g6 {
	background-color: #053333 !important;
}
.bg-g7 {
	background-color: #000 !important;
}

/*-------------------------------------------------------------------*/
/* buttons */
.btn {
	display: inline-block;
	width: auto;
	font-weight: 100;
	transition-duration: 0.5s;
	border-radius: 0;
}
.btn-block {
	display: block !important;
	width: 100% !important;
}
.btn-xs {
	font-size: 0.675rem;
	padding: 0.15rem 0.5rem;
}
.btn-sm {
	padding: 0.25rem 0.75rem;
}
.btn-md {
	padding: 0.5rem 1rem;
}


.btn > svg {
	width: 1.8rem;
}
.btn > svg.float-right {
		margin-left: 0.75rem;
}
.btn-sm > svg {
	width: 1.375rem;
}
.btn-sm > svg.float-right {
	margin-left: 0.5rem;
}
.btn-xs > svg {
	width: 1.25rem;
}
.btn-xs > svg.float-right {
	margin-left: 0.25rem;
}

.btn-primary {
	background-color: #0a0a66;
	border: 1px solid #0a0a66;
	color: #FFF;
}
.btn-primary > svg > * {
	stroke: #FFF;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:visited {
	background-color: #1515cc !important;
	border: 1px solid #1515cc;
	color: #FFF;
	box-shadow: none;
}

.btn-outline-primary {
	background-color: #FFF;
	border: 1px solid #999;
	color: #0a0a66;
}
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:focus,
.btn-outline-primary:visited {
	background-color: #E7E7E7 !important;
	border: 1px solid #0a0a66;
	color: #0a0a66;
	box-shadow: none;
}


.btn-secondary {
	background-color: #0a6666;
	border: 1px solid #0a6666;
	color: #FFF;
}
.btn-secondary > svg > * {
	stroke: #FFF;
}
.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary:visited {
	background-color: #053333 !important;
	border: 1px solid #053333;
	color: #FFF;
	box-shadow: none;
}

.btn-outline-secondary {
	background-color: #FFF;
	border: 1px solid #999;
	color: #0a6666;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-secondary:focus,
.btn-outline-secondary:visited {
	background-color: #E7E7E7 !important;
	border: 1px solid #0a6666;
	color: #0a6666;
	box-shadow: none;
}


/* .btn-line */
.btn-line {
	position: relative;
	display: inline-block;
	background-color: transparent;
	border: 1px solid transparent;
}
.btn-line > .btn {
	border: none;
	z-index: 2000;
	box-shadow: none;
	color: #666;
	background-color: #FFF;
	padding-right: 1rem;
	padding-left: 1rem;
}
.btn-line > .btn:hover {
	background-color: #EEE;
	color: #333;
}
.btn-line::before,
.btn-line::after,
.btn-line > .btn::before,
.btn-line > .btn::after {
	content: "";
	position: absolute;
	display: block;
	transition-duration: 0.5s;
	z-index: 2200;
}
.btn-line::before {
	top: -1px;
	right: -1px;
	width: 10px;
	height: 1px;
	background-color: #666;
}
.btn-line::after {
	bottom: -1px;
	left: -1px;
	width: 10px;
	height: 1px;
	background-color: #666;
}
.btn-line > .btn::before {
	top: -1px;
	right: -1px;
	width: 1px;
	height: 10px;
	background-color: #666;
}
.btn-line > .btn::after {
	bottom: -1px;
	left: -1px;
	width: 1px;
	height: 10px;
	background-color: #666;
}

.btn-line:hover::before {
	width: calc(100% + 2px);
}
.btn-line:hover::after {
	width: calc(100% + 2px);
}
.btn-line > .btn:hover::before {
	height: calc(100% + 2px);
}
.btn-line > .btn:hover::after {
	height: calc(100% + 2px);
}



/* text */
a.text-primary:hover,
a.text-primary:focus {
	color: #1d74c0 !important;
}
.text-secondary {
	color: #e5e5e5 !important;
}
a.text-secondary:hover,
a.text-secondary:focus {
	color: #cccccc !important;
}
.text-success {
	color: #00ce68 !important;
}
a.text-success:hover,
a.text-success:focus {
	color: #009b4e !important;
}
.text-info {
	color: #8862e0 !important;
}
a.text-info:hover,
a.text-info:focus {
	color: #6837d8 !important;
}
.text-warning {
	color: #ffaf00 !important;
}
a.text-warning:hover,
a.text-warning:focus {
	color: #cc8c00 !important;
}
.text-danger {
	color: #e65251 !important;
}
a.text-danger:hover,
a.text-danger:focus {
	color: #e02624 !important;
}
.text-light {
	color: #f3f5f6 !important;
}
a.text-light:hover,
a.text-light:focus {
	color: #d6dde0 !important;
}
.text-dark {
	color: #424964 !important;
}
a.text-dark:hover,
a.text-dark:focus {
	color: #2e3345 !important;
}
.text-muted {
	color: #c2c2c2 !important;
}

/* background */
.bg-success {
	background-color: #00ce68 !important;
}
.bg-success-light {
	background-color: #d4edda !important;
}

a.bg-success:hover,
a.bg-success:focus,
button.bg-success:hover,
button.bg-success:focus {
	background-color: #009b4e !important;
}

.bg-info {
	background-color: #8862e0 !important;
}

a.bg-info:hover,
a.bg-info:focus,
button.bg-info:hover,
button.bg-info:focus {
	background-color: #6837d8 !important;
}

.bg-warning {
	background-color: #ffaf00 !important;
}

a.bg-warning:hover,
a.bg-warning:focus,
button.bg-warning:hover,
button.bg-warning:focus {
	background-color: #cc8c00 !important;
}

.bg-danger {
	background-color: #e65251 !important;
}

a.bg-danger:hover,
a.bg-danger:focus,
button.bg-danger:hover,
button.bg-danger:focus {
	background-color: #e02624 !important;
}

.bg-light {
	background-color: #f3f5f6 !important;
}

a.bg-light:hover,
a.bg-light:focus,
button.bg-light:hover,
button.bg-light:focus {
	background-color: #d6dde0 !important;
}

.bg-dark {
	background-color: #424964 !important;
}

a.bg-dark:hover,
a.bg-dark:focus,
button.bg-dark:hover,
button.bg-dark:focus {
	background-color: #2e3345 !important;
}

.bg-white {
	background-color: #ffffff !important;
}

.bg-transparent {
	background-color: transparent !important;
}


/*-------------------------------------------------------------------*/
/* animations */
@keyframes dropdownAnimation {
	from {
		opacity: 0;
		transform: translate3d(0, -30px, 0);
	}
	to {
		opacity: 1;
		transform: none;
		transform: translate3d(0, 0px, 0);
	}
}
.dropdownAnimation,
.nav .nav-item.dropdown .navbar-dropdown,
.navbar-nav .nav-item.dropdown .navbar-dropdown {
	animation-name: dropdownAnimation;
	-webkit-animation-duration: 0.25s;
	-moz-animation-duration: 0.25s;
	-ms-animation-duration: 0.25s;
	-o-animation-duration: 0.25s;
	animation-duration: 0.25s;
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
}
@keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
.fadeOut {
	animation-name: fadeOut;
}
.infinite-spin {
	animation-name: spin;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, 100%, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.fadeInUp {
	animation-name: fadeInUp;
}


/* .table */
.table > thead > tr > th {
	border-top: 2px solid #3fbac2;
	border-bottom: none;
	font-weight: 100;
}
.table > thead > tr > th > svg,
.table > thead > tr > th > a > svg {
	width: 1.25rem;
	margin-left: 0.5rem;
}

.table > tbody > tr > th,
.table > tbody > tr > td {
	border-top: none;
	padding: 0.5rem 0.75rem;
}
.table > tbody > tr:last-child > th,
.table > tbody > tr:last-child > td {
	border-bottom: 2px solid #3fbac2;
	padding-bottom: 0.7rem;
}
.table-responsive {
	margin-bottom: 1rem;
}
.table-responsive > .table {
	margin-bottom: 0;
}
.table-responsive thead > tr > th,
.table-responsive tbody > tr > th,
.table-responsive tbody > tr > td {
	white-space: nowrap;
}
@media screen and (max-width: 767px) {
	.table th,
	.table td {
		font-size: 0.85rem;
	}
}

/* .list-group */
.list-group,
.list-group > li,
.list-group > .list-group-item {
	border-radius: 0 !important;
}


/* .spec-list */
.spec-list > dt {
	font-weight: 300;
	white-space: nowrap;
	padding: 0.5rem 0.5rem 0 0.5rem;
}
.spec-list > dd {
	white-space: nowrap;
	margin: 0 0 0.5rem 0;
	padding: 0 0.5rem 0.5rem 1.5rem;
}
.spec-list > dt:nth-child(4n + 1) {
	background-color: rgba(0, 0, 0, 0.05);
}
.spec-list > dd:nth-child(4n + 2) {
	background-color: rgba(0, 0, 0, 0.05);
}

/* .date-list */
.date-list > li,
.date-list > li > a,
.date-list > a {
	background-color: #FFF;
	transition-duration: 0.5s;
	color: #333;
	padding-left: 7rem;
}
.date-list > li:hover,
.date-list > li:hover > a,
.date-list > li > a:hover,
.date-list > a:hover {
	background-color: #F7F7F7;
}

.date-list .date {
	margin-left: -6rem;
	margin-right: 1rem;
}
.date-list .badge {
	margin-right: 1rem;
}



/* .media-list */
.media-list {
	padding-left: 0;
	list-style: none;
}

/* .media */
.media > img {
	display: flex !important;
}
.media > img,
.media > img.d-flex {
	margin-right: 1rem;
}
.media > .media-body > h1,
.media > .media-body > h2,
.media > .media-body > h3,
.media > .media-body > h4,
.media > .media-body > h5,
.media > .media-body > h6 {
	margin-top: 0;
}

/* .gap-text */
.gap-text {
	display: inline-block;
	width: 30px;
	transform: translateX(-100%);
	text-align: center;
}


/* .nav-tabs */
.nav-tabs > .nav-link {
	border-radius: 0;
	margin-right: 0.3rem;
	margin-bottom: -1px;
}

/* .tabs */
.tabs {
	margin-bottom: 2rem;
	padding: 0;
}
.tabs > li {
	background-color: #F7F7F7;
	border-top: 3px solid #DDD;
	display: inline-block;
}
.tabs > li + li {
	margin-left: 0.25rem;
}
.tabs > li.active {
	background-color: #FFF;
	border-top-color: #050533;
}
.tabs > li > a {
	display: block;
	text-align: center;
	padding: 0.5rem 1rem;
}

/* .pagination */
.pagination {
	margin: 2rem 0;
}
.pagination::after {
	content: "";
	display: block;
	clear: both;
}
.pagination > .page-item {
	float: left;
	display: inline-block;
}
.pagination > .page-item > .page-link {
	display: block;
	width: 3rem;
	height: 3rem;
	line-height: 3rem;
	background-color: #fff;
	border: 1px solid #050533;
	border-radius: 0 !important;
	color: #050533;
	text-align: center;
	transition-duration: 0.5s;
	margin-left: -1px;
	padding: 0;
}
.pagination > .page-item > .page-link:hover,
.pagination > .page-item.active > .page-link {
	background-color: #050533;
	border-color: #050533;
	color: #fff;
}
.pagination > .page-item > .page-link > svg {
	float: none;
	width: 1.2rem;
	margin: -0.25rem 0 0 0;
}
.pagination > .page-item > .page-link:hover > svg > *,
.pagination > .page-item.active > .page-link > svg > * {
	stroke: #FFF;
}


/* .badge */
.badge {
	font-weight: 100;
	border-radius: 0;
}

.badge-primary {
	background-color: #0a0a66;
	color: #FFF;
}
.badge-secondary {
	background-color: #0a6666;
	color: #FFF;
}





/* form */
.form-control,
.custom-select,
.custom-file-control,
.custom-file-control::before {
	border-radius: 0;
	-webkit-appearance: none;
}

form.form-striped {
	padding-right: 15px;
	padding-left: 15px;
}
.form-group {
	margin-bottom: 0;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}
.form-striped > .form-group:nth-child(odd) {
	background-color: #fff;
}
.form-striped > .form-group:nth-child(even) {
	background-color: #f8f9fa;
}
.form > .form-group.row > .col-form-label:not(.text-left),
.form-striped > .form-group.row > .col-form-label:not(.text-left),
form > .form-group.row > .col-form-label:not(.text-left) {
	text-align: right;
	padding-right: 3rem;
}
form > .form-group.row > .col-form-label > .badge.badge-danger {
	border-radius: 0;
	margin: 0.25rem 0.75rem 0 0;
}
form > .form-group.row > .col-form-label:not(.text-left) > .badge.badge-danger {
	float: right;
	margin: 0.25rem -3rem 0 0.5rem;
}
@media screen and (max-width: 575px) {
	form > .form-group.row > .col-form-label {
		text-align: left !important;
	}
	form > .form-group.row > .col-form-label > .badge.badge-danger {
		float: none !important;
		margin: 0.25rem 0.75rem 0 0 !important;
	}
}
.form-check {
	margin: 0.25rem 0;
}

/* .input-group */
.input-group > .form-control,
.input-group > .form-control-plaintext {
	position: relative;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	width: 1%;
	margin-bottom: 0;
}

.input-group > .input-group-prepend,
.input-group > .input-group-append {
	border-radius: 0;
}
.input-group > .input-group-prepend.unstyled > .input-group-text,
.input-group > .input-group-append.unstyled > .input-group-text {
	background-color: transparent;
	border-color: transparent;
}
.input-group .input-group-text {
	font-weight: 100;
}


.custom-radio,
.custom-checkbox {
	margin-top: calc(.375rem + 1px);
	margin-bottom: 0;
}
.custom-file-control::before {
	content: "Browse";
}
.custom-file-control:empty::after {
	content: "Choose file...";
}

.dropify-wrapper {
	border: 1px solid #ced4da !important;
}


/* owl-carousel */
ul.owl-carousel {
	list-style: none;
	position: relative;
}
.owl-carousel .owl-nav > .owl-prev,
.owl-carousel .owl-nav > .owl-next {
	position: absolute !important;
	top: 27% !important;
	display: block !important;
	width: 3rem !important;
	height: 3rem !important;
	line-height: 3rem !important;
	text-align: center !important;
	background-color: #333 !important;
	border-radius: 1.5rem !important;
	transition-duration: 0.5s;
	padding: 0 !important;
}
.owl-carousel .owl-nav > .owl-prev {
	left: -2rem;
}
.owl-carousel .owl-nav > .owl-next {
	right: -2rem;
}
.owl-carousel .owl-nav > .owl-prev:hover {
	left: -3rem;
}
.owl-carousel .owl-nav > .owl-next:hover {
	right: -3rem;
}


.owl-carousel .owl-nav > button > span {
	color: #FFF;
	font-size: 2rem;
}


.owl-carousel .owl-dots {
	position: absolute;
	bottom: 0;
	width: 100%;
	margin: 0;
}


/* validation */
.custom-radio .custom-control-input:indeterminate ~ .custom-control-indicator,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-indicator {
	background-color: #ddd;
	background-image: none;
}
.was-validated .custom-radio .custom-control-input:valid ~ .custom-control-indicator,
.was-validated .custom-checkbox .custom-control-input:valid ~ .custom-control-indicator {
	background-color: #ddd;
}
.was-validated .custom-radio .custom-control-input:invalid ~ .custom-control-indicator,
.was-validated .custom-checkbox .custom-control-input:invalid ~ .custom-control-indicator {
	background-color: rgba(220, 53, 69, 0.25);
}

.was-validated .custom-radio .custom-control-input:checked ~ .custom-control-indicator {
	background-color: #007bff !important;
}
.was-validated .custom-checkbox .custom-control-input:checked ~ .custom-control-indicator {
	background-color: #007bff !important;
}
.was-validated .custom-control-input:valid ~ .custom-control-description {
	color: inherit;
}

/* placeholder */
.form-control ::-webkit-input-placeholder,
::-webkit-input-placeholder {
	color:#CCC!important
}
.form-control ::-moz-placeholder,
::-moz-placeholder {
	color:#CCC!important
}
.form-control :-moz-placeholder,
:-moz-placeholder {
	color:#CCC!important
}
.form-control :-ms-input-placeholder,
:-ms-input-placeholder {
	color:#CCC!important
}
.form-group.has-error .form-control[data-required=true].has-error::-webkit-input-placeholder {
	color:#91272F!important
}
.form-group.has-error .form-control[data-required=true].has-error::-moz-placeholder {
	color:#91272F!important
}
.form-group.has-error .form-control[data-required=true].has-error:-moz-placeholder {
	color:#91272F!important
}
.form-group.has-error .form-control[data-required=true].has-error:-ms-input-placeholder {
	color:#91272F!important
}

/* .modal */
.modal {
	text-align: center;
}
@media screen and (min-width: 768px) {
	.modal:before {
		display: inline-block;
		vertical-align: middle;
		content: " ";
		height: 100%;
	}
}
.modal-dialog {
	display: inline-block;
	min-width: 500px;
	text-align: left;
	vertical-align: middle;
}

/* end of fixed-bootstrap */
/*-------------------------------------------------------------------*/
/*-------------------------------------------------------------------*/


/*-------------------------------------------------------------------*/
/*-------------------------------------------------------------------*/
/* Star Admin */
/*-------------------------------------------------------------------*/
.header-contents {
	position: relative;
}
.header-contents > video {
	width: 100vw;
	height: auto;
}
.header-contents > .box-wrapper {
	position: absolute;
	top: 63px;
	left: 3rem;
	width: calc(100vw - 6rem);
	height: calc(100% - 3rem - 63px);
	background-color: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.header-contents > .box-wrapper h2 {
	position: absolute;
	top: 50%;
	left: 50%;
	white-space: nowrap;
	font-family: 'Lexend Peta', sans-serif;
	color: #fff;
	font-size: 9rem !important;
	transform: translate(-50%, -50%);
	margin: 0 !important;
}

.header-contents > .box-wrapper h2:nth-child(1) {
	color: transparent;
	-webkit-text-stroke: 2px #FFF;
}
.header-contents > .box-wrapper h2:nth-child(2) {
	color: #FFF;
	animation: animate 4s ease-in-out infinite;
}

@keyframes animate {
	0%,
	100% {
		clip-path: polygon(
			0% 45%,
			16% 44%,
			33% 50%,
			54% 60%,
			70% 61%,
			84% 59%,
			100% 52%,
			100% 100%,
			0% 100%
		);
	}

	50% {
		clip-path: polygon(
			0% 60%,
			15% 65%,
			34% 66%,
			51% 62%,
			67% 50%,
			84% 45%,
			100% 46%,
			100% 100%,
			0% 100%
		);
	}
}



/* navbar */
.navbar {
	position: fixed;
	top: 0;
	right: 0;
	background-color: #050533;
	z-index: 1030;
	flex-direction: row !important;
	display: flex !important;
	width: 100vw;
	/*
	background: linear-gradient(120deg, #3fbac2, #267479);
	transition: background 0.25s ease;
	-webkit-transition: background 0.25s ease;
	-moz-transition: background 0.25s ease;
	-ms-transition: background 0.25s ease;
	*/
	padding: 0;
}
.header-contents + .navbar {
	background-color: transparent;
}

.navbar .navbar-brand-wrapper {
	justify-content: center !important;
	display: flex !important;
	width: 255px;
	height: 63px;
	transition: width 0.25s ease, background 0.25s ease;
	-webkit-transition: width 0.25s ease, background 0.25s ease;
	-moz-transition: width 0.25s ease, background 0.25s ease;
	-ms-transition: width 0.25s ease, background 0.25s ease;
	text-align: center;
}
.navbar .navbar-brand-wrapper .navbar-brand {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
.navbar .navbar-brand-wrapper .navbar-brand > a {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 63px;
	font-family: 'Lexend Peta', sans-serif;
	color: #FFF;
	font-size: 1.4rem;
	font-weight: 700;
	text-decoration: none;
}

.navbar .navbar-brand-wrapper .navbar-brand > a svg {
	width: 2rem;
	transform: rotate(90deg);
	transform-origin: center;
}
.navbar .navbar-brand-wrapper .navbar-brand > a svg * {
	stroke: #FFF;
}

.navbar .navbar-brand-wrapper .navbar-brand:active,
.navbar .navbar-brand-wrapper .navbar-brand:focus,
.navbar .navbar-brand-wrapper .navbar-brand:hover,
.navbar .header-menu-wrapper button {
	color: #FFF;
}
.navbar .navbar-brand-wrapper .brand-logo-mini {
	display: none;
}
.navbar .header-menu-wrapper {
	transition: width 0.25s ease;
	-webkit-transition: width 0.25s ease;
	-moz-transition: width 0.25s ease;
	-ms-transition: width 0.25s ease;
	align-items: center !important;
	display: flex !important;
	width: calc(100% - 255px);
	height: 63px;
	color: #FFF;
	padding: 0 1.7rem;

	justify-content: flex-end !important;
}
.navbar .header-menu-wrapper .navbar-nav {
	flex-direction: row;
	align-items: center;
}
.navbar .header-menu-wrapper .navbar-nav .nav-item + .nav-item {
	margin-left: 2rem;
}
.navbar .header-menu-wrapper .navbar-nav .nav-item .nav-link {
	color: #FFF;
	font-size: 0.85rem;
	vertical-align: middle;
	padding: 0 0.5rem;
}
.navbar .header-menu-wrapper .navbar-nav .nav-item .nav-link > svg {
	width: 2rem;
	height: 2rem;
}
.navbar .header-menu-wrapper .navbar-nav .nav-item .nav-link > svg * {
	stroke: #FFF;
}

.navbar .header-menu-wrapper .navbar-nav .nav-item .dropdown-menu svg {
	width: 1.5rem;
	height: 1.5rem;
	margin-right: 0.75rem;
}

.navbar #header-menu {
	padding: 0;
}
.navbar #header-menu .profile-image {
	float: left;
	display: inline-block;
	width: 2.5rem;
	height: 2.5rem;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	border: 0.25rem solid #FFF;
	border-radius: 50%;
	margin-right: 0.5rem;
}
.navbar #header-menu .profile-name {
	float: left;
	display: inline-block;
	height: 2.5rem;
	line-height: 2.5rem;
	color: #FFF;
}
.navbar #header-menu .profile-name[data-suffix]::after {
	content: attr(data-suffix);
	font-size: 0.75rem;
	margin-left: 0.5rem;
}
#header-menu::after {
	content: "▼";
	border: none;
	font-size: 0.75rem;
	margin-top: 0.75rem;
	margin-left: 1rem;
}


@media screen and (max-width: 575px) {
	.navbar .navbar-brand-wrapper {
		width: 75px;
	}
	.navbar .header-menu-wrapper {
		width: auto;
		width: calc(100% - 75px);
	}
	.navbar .navbar-brand-wrapper .brand-logo {
		display: none;
	}
	.navbar .navbar-brand-wrapper .brand-logo-mini {
		display: inline-block;
	}
}
@media screen and (max-width: 767px) {
	.navbar .header-menu-wrapper .navbar-nav .nav-item .nav-link {
		margin-left: 0.5rem;
		margin-right: 0.5rem;
	}
	.navbar .header-menu-wrapper .navbar-nav .nav-item .nav-link .profile-text {
		display: none;
	}
}

/*-------------------------------------------------------------------*/
/* dropdowns */
.dropdown-menu {
	font-size: 0.85rem;
}
.dropdown-menu .dropdown-item {
	font-weight: 100;
}
.dropdown-menu .dropdown-item:active {
	background-color: initial;
}
.nav .nav-item,
.navbar-nav .nav-item {
	line-height: 1;
}
@media screen and (max-width: 767px) {
	.navbar .header-menu-wrapper {
		padding: 0 0.5rem 0 1rem;
	}
}
@media screen and (max-width: 991px) {
	.nav .nav-item.dropdown .dropdown-toggle,
	.navbar-nav .nav-item.dropdown .dropdown-toggle {
		padding-right: 0;
	}
	.nav .nav-item.dropdown .dropdown-toggle:after,
	.navbar-nav .nav-item.dropdown .dropdown-toggle:after {
		display: none;
	}
}

.nav .nav-item.dropdown .count-indicator,
.navbar-nav .nav-item.dropdown .count-indicator {
	position: relative;
	text-align: center;
}
.nav .nav-item.dropdown .count-indicator .count,
.navbar-nav .nav-item.dropdown .count-indicator .count {
	position: absolute;
	top: 0;
	right: 0;
	width: 1rem;
	height: 1rem;
	border-radius: 100%;
	background: #FF0017;
	color: #FFF;
	font-size: 11px;
	line-height: 1rem;
	border: none;
	text-align: center;
}
.nav .nav-item.dropdown .count-indicator:after,
.navbar-nav .nav-item.dropdown .count-indicator:after {
	display: none;
}

.nav .nav-item.dropdown .navbar-dropdown,
.navbar-nav .nav-item.dropdown .navbar-dropdown {
	position: absolute;
	top: calc(63px - 6px);
	right: 0;
	left: auto;
	overflow: hidden;
	border: 1px solid rgba(182, 182, 182, 0.1);
	min-width: 100%;
	border-radius: 6px;
	font-size: 0.9rem;
	-webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.13);
	-moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.13);
	box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.13);
	margin-top: 0;
	padding: 1rem 0;
}
@media screen and (max-width: 991px) {
	.nav .nav-item.dropdown .navbar-dropdown,
	.navbar-nav .nav-item.dropdown .navbar-dropdown {
		display: none;
		right: -45px;
	}
}
.nav .nav-item.dropdown .navbar-dropdown .badge,
.navbar-nav .nav-item.dropdown .navbar-dropdown .badge {
	margin-left: 2.5rem;
}
@media screen and (max-width: 991px) {
	.nav .nav-item.dropdown .navbar-dropdown .badge,
	.navbar-nav .nav-item.dropdown .navbar-dropdown .badge {
		margin-right: 0.5rem;
	}
}
.nav .nav-item.dropdown .navbar-dropdown .dropdown-item,
.navbar-nav .nav-item.dropdown .navbar-dropdown .dropdown-item {
	margin-bottom: 0;
	padding: 0.5rem 1rem;
}

.navbar .header-menu-wrapper .navbar-nav .nav-item [aria-labelledby="header-cart"],
.navbar .header-menu-wrapper .navbar-nav .nav-item [aria-labelledby="header-message"] {
	width: 180px;
}
.navbar .header-menu-wrapper .navbar-nav .nav-item [aria-labelledby="header-cart"] > .dropdown-item,
.navbar .header-menu-wrapper .navbar-nav .nav-item [aria-labelledby="header-message"] > .dropdown-item {
	cursor: pointer;
	padding: 0.5rem;
}
.navbar .header-menu-wrapper .navbar-nav .nav-item [aria-labelledby="header-cart"] > .dropdown-item:hover,
.navbar .header-menu-wrapper .navbar-nav .nav-item [aria-labelledby="header-message"] > .dropdown-item:hover {
	background-color: #F7F7F7 !important;
}
.navbar .header-menu-wrapper .navbar-nav .nav-item [aria-labelledby="header-cart"] > .dropdown-item > img {
	width: 100%;
	height: auto;
}
.navbar .header-menu-wrapper .navbar-nav .nav-item [aria-labelledby="header-cart"] > .btn,
.navbar .header-menu-wrapper .navbar-nav .nav-item [aria-labelledby="header-message"] > .btn {
	width: calc(100% - 1rem);
	margin: 0.5rem 0.5rem 0 0.5rem;
}


/* sidebar */
.sidebar {
	min-height: calc(100vh - 63px);
	background-color: #050533;
	width: 255px;
	color: #FFF;
	transition: width 0.5s ease, background 0.5s ease;
	-webkit-transition: width 0.5s ease, background 0.5s ease;
	-moz-transition: width 0.5s ease, background 0.5s ease;
	-ms-transition: width 0.5s ease, background 0.5s ease;
	padding: 0;
	z-index: 11;
}
.sidebar .nav {
	overflow: hidden;
	flex-wrap: nowrap;
	flex-direction: column;
}
.sidebar .nav .nav-item .collapse {
	z-index: 999;
}

.sidebar .nav .nav-item .nav-link {
	white-space: nowrap;
	color: #FFF;
	font-size: 1rem;
	padding: 0.75rem 1rem;
}
.sidebar .nav-link svg {
	width: 1.25rem;
	margin-right: 0.5rem;
}
.sidebar .nav-link svg * {
	stroke: #FFF;
}

.sidebar .nav.sub-menu {
	background-color: #FFF;
	margin: 0;
	padding: 0 0 0 2rem;
}
.sidebar .nav.sub-menu .nav-item .nav-link {
	color: #333;
	font-size: 0.85rem;
	padding: 0.5rem 1rem;
}

.sidebar .nav-item .nav-link.active {
	background-color: #FFF !important;
}
.sidebar .nav-item .nav-link:hover,
.sidebar .nav-item:hover > .nav-link,
.sidebar .nav-item > .nav-link[aria-expanded="true"] {
	color: #333;
	background-color: #F7F7F7 !important;
}

.sidebar .nav-item .nav-link.active svg *,
.sidebar .nav-item:hover > .nav-link svg *,
.sidebar .nav-item > .nav-link[aria-expanded="true"] svg * {
	stroke: #333;
}

.sidebar .nav .nav-item .nav-link .menu-title {
	color: inherit;
	display: inline-block;
	line-height: 1;
	vertical-align: middle;
}
.sidebar .nav .nav-item .nav-link .menu-title + svg {
	width: 1.5rem;
	margin-right: 0;
	margin-left: 1rem;
}

.sidebar .nav .nav-item .nav-link .badge {
	margin-left: auto;
}

/* EXPAND時 */
.sidebar .nav .nav-item .nav-link[aria-expanded="true"] {
	background-color: #FFF;
}
.sidebar .nav .nav-item .nav-link:hover,
.sidebar .nav .nav-item .nav-link[aria-expanded="true"] .menu-title {
	color: #333 !important;
}
.sidebar .nav .nav-item .nav-link[aria-expanded="true"] .menu-title + svg {
	transform: rotate(90deg);
	transition-duration: 0.2s;
}



/* .sidebar-profile */
.sidebar .sidebar-profile {
	text-align: center;
	margin: 2rem 0 3rem 0;
	padding: 1rem;
}
.sidebar .sidebar-profile .profile-image {
	width: 4.5rem;
	height: 4.5rem;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	border: 5px solid #FFF;
	border-radius: 100%;
	margin: 0 auto 1rem auto;
}
.sidebar .sidebar-profile .profile-name {
	overflow: hidden;
	width: calc(100% - 6rem);
	color: #FFF;
	margin: 0 auto;
}
.sidebar .sidebar-profile .profile-name[data-suffix]::after {
	content: attr(data-suffix);
	font-size: 0.675rem;
	margin-left: 0.25rem;
}




/* style for off-canvas menu */
@media screen and (max-width: 991px) {
	.sidebar .nav .nav-item .nav-link {
		padding: 1rem;
	}

	.sidebar-offcanvas {
		position: fixed;
		max-height: calc(100vh - 63px);
		top: 63px;
		bottom: 0;
		overflow: auto;
		right: -255px;
		-webkit-transition: all 0.5s ease-out;
		-o-transition: all 0.5s ease-out;
		transition: all 0.5s ease-out;
	}
	.sidebar-offcanvas.active {
		right: 0;
		box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
	}
}

.main-panel {
	transition: width 0.5s ease, margin 0.5s ease;
	width: calc(100% - 255px);
	min-height: calc(100vh - 63px);
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
}
.main-panel.no-sidebar {
	width: 100%;
}
@media screen and (max-width: 991px) {
	.main-panel {
		margin-left: 0;
		width: 100%;
	}
}

/* contents-layout */
.page-body-wrapper {
	min-height: calc(100vh - 63px);
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	padding-left: 0;
	padding-right: 0;
}
.page-body-wrapper:not(.auth-page) {
	padding-top: 63px;
}
.page-body-wrapper.full-page-wrapper {
	width: 100%;
	min-height: 100vh;
}

.content-wrapper {
	background-color: #FFF;
	padding: 2rem 1.5rem 5rem 1.5rem;
	width: 100%;
	-webkit-flex-grow: 1;
	flex-grow: 1;
}
@media screen and (max-width: 767px) {
	.content-wrapper {
		padding: 1.5rem 1rem;
	}
}

/* footer */
.footer {
	background-color: #EEE;
	padding: 3rem 0 0.5rem 0;
}
.footer h2 {
	display: inline-block;
	font-family: 'Lexend Peta', sans-serif;
	text-align: center;
}
.footer ul {
	position: relative;
	list-style: none;
	margin: 0 0 2rem 0;
	padding: 0;
}
.footer ul > li {
	float: left;
	display: inline-block;
	width: 50%;
	text-align: right;
	font-size: 0.875rem;
	padding: 0;
}
.footer ul > li > a {
	display: inline-block;
	padding: 0.15rem 1rem;
	transition-duration: 0.5s;
}
.footer ul > li:hover > a,
.footer ul > li > a:hover {
	padding: 0.15rem 0.5rem 0.15rem 1rem;
}


.footer .copyright {
	text-align: center;
	font-size: 0.75rem;
}

@media screen and (max-width: 991px) {
	.footer {
		margin-left: 0;
		width: 100%;
	}
}

/* end of Star Admin */
/*-------------------------------------------------------------------*/
/*-------------------------------------------------------------------*/



/*-------------------------------------------------------------------*/
/* site contents */
/*-------------------------------------------------------------------*/
/* .border-box */
.border-box {
	position: relative;
	border: 1px solid #DDD;
	margin-bottom: 6rem;
	padding: 5rem 3rem 2rem 3rem;
}
.border-box > h3 {
	position: absolute;
	top: 0;
	left: 50%;
	background-color: #FFF;
	border-top: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	transform: translate(-50%, -70%);
	padding: 1rem 2rem;
}


/* panel */
.panel {
	position: relative;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	background-color: #FFF;
	background-clip: border-box;
	border-radius: 0.25rem;
	margin-bottom: 3rem;
	padding: 1.5rem;
}
.panel > .panel-header {
	margin-top: 0;
}
@media screen and (max-width: 767px) {
	.panel {
		padding: 1.5rem;
	}
}

/* .panel-kpi */
.panel-kpi {
	background-color: #EEE;
	padding: 1rem 2rem;
}
.panel-kpi .kpi-name {
	color: #666;
	font-family: "Roboto", sans-serif;
	font-weight: 500;
}
.panel-kpi .kpi-name > svg {
	width: 2rem;
	margin-right: 1rem;
}
.panel-kpi .kpi-sub {
	color: #999;
	font-family: "Roboto", sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	text-align: right;
}
.panel-kpi .kpi-value {
	font-weight: 700;
	font-size: 1.5rem;
	text-align: right;
}
.panel-kpi .kpi-value[data-suffix]::after {
	content: attr(data-suffix);
	color: #999;
	font-size: 0.75rem;
	font-weight: 300 !important;
	margin: 0 0 0 0.5rem;
}


@media screen and (min-width: 576px) and (max-width: 767px) {
	.panel-kpi .row > div:first-child > .cf {
		padding-right: 30px;
	}
	.panel-kpi .row > div:last-child > .cf {
		padding-left: 30px;
	}
}

/* .img-link */
.img-link {
	display: block;
	margin: 0 0 1rem 0;
}
.img-link > img {
	width: 100%;
	height: auto;
}


/* .img-gallery */
.img-gallery {
	margin: 0.5rem 0 1.5rem 0;
}
.img-gallery > a {
	display: block;
}
.img-gallery > a > p,
.img-gallery > .cf > span {
	font-family: "Roboto", sans-serif;
	font-size: 0.75rem;
}
.img-gallery > a > img {
	width: 100%;
	height: auto;
	margin: 0.25rem 0;
}
.img-gallery > .cf > .btn {
	float: right;
}
.img-gallery > .memo_for_customer {
	overflow: hidden;
	width: 100%;
	height: 2rem;
	line-height: 1rem;
	font-size: 0.75rem;
}


/* .messages */
.messages {
	overflow-x: hidden;
	overflow-y: scroll;
	height: 40rem;
	background-color: #FAFAFA;
}
.messages > .message-left {
	padding: 1.5rem 4rem 1rem 4rem;
}
.messages > .message-right {
	padding: 1.5rem 4rem 1rem 4rem;
}
.message-left > img {
	float: left;
	width: 40px;
	border-radius: 50%;
	margin: -1rem 0 0 -3.5rem;
}
.message-right > img {
	float: right;
	width: 40px;
	border-radius: 50%;
	margin: -1rem -3.5rem 0 0;
}
.message-left > .bubble,
.message-right > .bubble {
	position: relative;
	background-color: #00ce68;
	border-radius: 1rem;
	color: #FFF;
	padding: 0.5rem 1rem;
}
.messages > .message-left > .bubble {
	background-color: #EEE;
	color: #333;
}
.message-left > .bubble {
	border-top-left-radius: 0;
}
.message-right > .bubble {
	border-top-right-radius: 0;
}
.message-left > .bubble::before,
.message-right > .bubble::before {
	position: absolute;
	top: -1rem;
	left: 0.5rem;
	content: attr(data-sent);
	color: #AAA;
	font-size: 0.7rem;
}
.messages > .message-right > .bubble[data-read=""]::after {
	position: absolute;
	top: -1rem;
	left: 5.5rem;
	content: "未読";
	color: #AAA;
	font-size: 0.6rem;
}

.messages + form {
	margin: 2rem 0 0 0;
}
.messages + form > .form-group {
	padding: 0 5rem 0 4rem;
}
.messages + form > .form-group + .btn {
	float: right;
	width: 40px;
	height: 40px;
	line-height: 40px;
	background-color: #00ce68;
	border-radius: 50%;
	color: #FFF;
	font-size: 0.8rem;
	text-align: center;
	margin: -4rem 1rem 0 0;
	padding: 0;
}
@media screen and (max-width: 575px) {
	.messages > .message-left {
		padding: 1.5rem 1rem 1rem 4rem;
	}
	.messages > .message-right {
		padding: 1.5rem 4rem 1rem 1rem;
	}
	.message-left > .bubble,
	.message-right > .bubble {
		font-size: 0.875rem;
	}
	.messages + form > .form-group {
		padding: 0 4rem 0 0;
	}
	.messages + form > .form-group + .btn {
		margin: -4rem 0.5rem 0 0;
	}
}

/* .counter-list */
.counter-list {
	overflow: scroll;
	overflow-x: hidden;
	background-color: #FFF;
	height: 40rem;
}
.counter-list > a {
	position: relative;
	display: block;
	font-size: 0.875rem;
	line-height: 2.5rem;
	padding: 0.5rem;
}
.counter-list > a:hover {
	background-color: #fafbfc;
}
.counter-list > a.active,
.counter-list > a.active:hover {
	background-color: #00ce68;
	border-color: #00ce68;
	color: #FFF;
}
.counter-list > a > img {
	width: 2.5rem;
	border-radius: 50%;
	margin: 0 0.5rem 0 0;
}
.counter-list > a > .unread {
	position: absolute;
	top: 50%;
	right: 0.5rem;
	transform: translateY(-50%);
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	line-height: 1.5rem;
	background-color: #FF0017;
	border: none;
	border-radius: 50%;
	color: #FFF;
	font-size: 0.75rem;
	text-align: center;
}
@media screen and (max-width: 575px) {
	.counter-list {
		height: auto;
		max-height: 40rem;
		margin: 0 0 3rem 0;
	}
	.counter-list > a {
		padding: 0.25rem 0.5rem;
	}
}


/* .drop-area */
.drop-area {
	background-color: #FFF;
	background-size: 4rem 4rem;
	background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.05) 75%, transparent 75%, transparent);
	border: 1px solid #3fbac2;
	color: #CCC;
	font-size: 2rem;
	padding: 80px 40px;
	text-align: center;
	white-space: nowrap;
}
.drop-area > span {
	color: #CCC;
	font-size: 1rem;
	text-align: center;
	white-space: nowrap;
}
.drop-area > i {
	color: #CCC;
	font-size: 6rem;
}
.drop-area:hover,
.drop-area:hover > span,
.drop-area:hover > i {
	color: #3fbac2 !important;
}

/* .blog */
.blog {
	margin-bottom: 5rem;
}
.blog .title {
	background-color: #F7F7F7;
	border-left: 0.5rem solid #3fbac2;
	line-height: 1.4;
	margin: 0;
	padding: 0.25rem 1rem;
}
.blog .title-aside {
	padding: 0.5rem 2rem;
}
.blog .title-aside > .author,
.blog .title-aside > p {
	display: inline-block;
	font-size: 0.875rem;
	margin: 0 1.5rem 0 0;
}
.blog .lead-visual {
	margin: 2rem 0;
}
.blog .btn {
	float: right;
	margin-top: 0.5rem;
}

/* .blog-summary */
.blog-summary {
	position: relative;
	margin-bottom: 3rem;
	padding-left: 12rem;
}
.blog-summary .lead-visual {
	position: absolute;
	top: 0;
	left: 0;
	width: 10rem;
	height: 6rem;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.blog-summary .lead-visual > img {
	display: none;
}
.blog-summary .title {
	background-color: #F7F7F7;
	border-left: 0.5rem solid #3fbac2;
	line-height: 1.2;
	font-size: 1.25rem;
	margin: 0 0 0.25rem 0;
	padding: 0.25rem 1rem;
}
.blog-summary .title-aside {
	display: none;
}
.blog-summary .context {
	height: 3.5rem;
	font-size: 0.875rem;;
	overflow: hidden;
}
.blog-summary .btn {
	position: absolute;
	bottom: -1.5rem;
	right: 0;
	font-size: 0.75rem;
	padding: 0.25rem 1rem;
}


/* .comment-list */
.comment-list {
	list-style: none;
	padding: 0;
}
.comment-list .comment {
	padding-left: 7rem;
}
.comment-list .comment + .comment {
	margin-top: 1rem;
}
.comment-list .comment > .member {
	float: left;
	width: 4rem;
	font-size: 0.75rem;
	text-align: center;
	margin-left: -5.5rem;
}
.comment-list .comment .context {
	background-color: #F7F7F7;
	border-radius: 0 1rem 1rem 1rem;
	font-size: 0.875rem;
	padding: 1.5rem 2rem;
}
.comment-list .comment > .comment-reply {
	float: right;
	opacity: 0.5;
}

.comment-list .comment-list {
	margin-top: 1rem;
}

.comment-list .comment-list .comment .context {
	padding: 1rem 2rem;
}


/* .faq */
.faq-list {

}
.faq-list .q-text {

}
.faq-list .a-text {

}


/* top-page */
#lead-text {
	text-align: center;
	margin-bottom: 5rem;
	padding: 3rem;
}
#lead-text p {
	line-height: 2;
}


/* .item-panel */
.item-panel {
	display: block;
	margin: 1rem 0;
}
.item-panel > .img {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 80%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
.item-panel .footer-info {
	overflow: hidden;
	padding: 1rem 0;
}

.item-panel .footer-info *[data-prefix]::before,
.item-panel .footer-info *[data-suffix]::after {
	font-size: 0.675rem;
}
.item-panel .footer-info *[data-prefix]::before {
	content: attr(data-prefix);
	margin-right: 0.25rem;
}
.item-panel .footer-info *[data-suffix]::after {
	content: attr(data-suffix);
	margin-left: 0.25rem;
}
.item-panel .footer-info .category {
	background-color: #333;
	color: #FFF;
	font-size: 0.75rem;
	padding: 0.25rem 0.5rem;
}

.item-panel .footer-info .tags {
	list-style: none;
	margin: 0.5rem 0;
	padding: 0;
}
.item-panel .footer-info .tags > li {
	display: inline;
	font-size: 0.75rem;
}
.item-panel .footer-info .tags > li::before {
	content: "#";
	margin-right: 0.1rem;
}
.item-panel .footer-info .tags > li + li {
	margin-left: 0.5rem;
}

.item-panel .footer-info .price {
	float: right;
}



/* .salon-panel */
.salon-panel {
	position: relative;
	display: block;
}
.salon-panel > .img {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 80%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
.salon-panel > .owner {
	position: absolute;
	top: 11.5rem;
	right: 1rem;
	display: block;
	width: 5rem;
	height: 5rem;
	border: 0.5rem solid #FFF;
	border-radius: 2.5rem;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.salon-panel .footer-info {
	overflow: hidden;
	padding: 0.75rem 0 1rem 0;
}
.salon-panel .footer-info *[data-prefix]::before,
.salon-panel .footer-info *[data-suffix]::after {
	font-size: 0.675rem;
}
.salon-panel .footer-info *[data-prefix]::before {
	content: attr(data-prefix);
	margin-right: 0.25rem;
}
.salon-panel .footer-info *[data-suffix]::after {
	content: attr(data-suffix);
	margin-left: 0.25rem;
}
.salon-panel .footer-info .category {
	background-color: #333;
	color: #FFF;
	font-size: 0.75rem;
	padding: 0.25rem 0.5rem;
}
.salon-panel .footer-info .title {
	display: block;
	max-height: 1.5rem;
	white-space: nowrap;
	margin: 0.5rem 0 0 0;
}
.salon-panel .footer-info .tags {
	list-style: none;
	margin: 0.5rem 0;
	padding: 0;
}
.salon-panel .footer-info .tags > li {
	display: block;
	font-size: 0.75rem;
	line-height: 1.2;
	white-space: nowrap;
}
.salon-panel .footer-info .tags > li[data-prefix]::before {
	display: inline-block;
	width: 4.5rem;
}
.salon-panel .footer-info .price {
	float: right;
}


/*-------------------------------------------------------------------*/
/*-------------------------------------------------------------------*/