:root,
:root ::before,
:root ::after {
	--default-bg-color: white;
	--default-txt-color: #444444;
	--accent-bg-color: black;
	--accent-txt-color: white;
	--default-border-color: #E1E1E1;
	--default-spacing: 15px;
	--link-color: #268bd2;
	--border-input-color: #7D7D7D;
	--border-title-admin: #8B8B8B;
	--red: #ff0000;
	--input-bg-error: #ffe8e8;
	--blue-root: #64A1DE;
	--white: #FFFFFF;
	--breadcrums-bg-default: #E2EBFF;
	--border-admin-section: #707070;
	--secondary: #AFAFAF;
	--table-head: #E2EBFF;
	--paginate-bg: #F2F2F2;
	--paginate-bg-active: #D2D2D2;
	--default-border-color: #D2D2D2;
	--default-table-bg: #F2F2F2;
	--danger: #E29090;
	--waiting: #6AA77C;
	--success: #64A1DE;
	--yellow: #FFBC47;
	--border-btn-create: #727272;
	--tag-maker-color: #d62828;
	--tag-lineup-color: #f77f00;
	--tag-series-color: #fcbf49;
	--fee-on-color: green;
	--fee-off-color: red;
	--fee-waiting-color: orange;
	--disabled-bg-color: #AAA;
	--disabled-txt-color: white;
}

body.main-store,
body.login-store {
	--left-accent-color: #2e3650;
	--left-bg-color: #262B40;
	--left-txt-color: #d1d5db;
	--color-primary: #f3b773;
	--default-spacing: 25px 50px;
}

body.main-management,
body.login-management,
body.main-store {
	--default-spacing: 25px 50px;
	--left-accent-color: #68495a;
	--left-bg-color: #40263b;
	--left-txt-color: #d1d5db;
	--color-primary: #a15528;
	--text-color-button-common: #64A1DE;
	--border-color-button-common: #64A1DE;
}


body .steps-breadcumb,
body .steps-breadcumb ::before {
	--default-spacing: 25px 50px;
	--active-bg-color: #64a1de;
	--active-txt-color: #ffffff;
	--inactive-bg-color: #e2ebff;
	--inactive-txt-color: #74aae2;
}

@font-face {
	font-family: Kozuka B;
	src: url('../fonts/KozukaGothicPro/KozGoPro-Bold.otf') format('opentype');
}

@font-face {
	font-family: Kozuka R;
	src: url('../fonts/KozukaGothicPro/KozGoPro-Regular.otf') format('opentype');
}

@font-face {
	font-family: Meiryo;
	src: url('../fonts/meiryo/meiryo.ttc') format('ttc');
}

/* reset styles */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 10px 0;
	padding: 0;
}

/* basic styles */
body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background-color: #FAFAFA;
	color: var(--default-txt-color);
}

a,
a:visited {
	color: var(--link-color);
}

a.btn:visited {
	color: white;
}

a.btn-default:visited {
	color: inherit;
}

a.btn,
button.btn {
	transition: opacity 0.2s ease;
}

a.btn:hover,
button.btn:hover {
	opacity: 0.6;
}

hr {
	height: 0;
	margin: 1em 10px;
	border-top: 2px solid var(--default-border-color);
}

hr.clear {
	visibility: hidden;
}

#imageInput {
	display: none;
}

footer .app-version {
	padding: 0 5px;
	margin: auto 5px;

	background-color: var(--default-border-color);
	font-style: normal;
	border-radius: 5px;
}

/* float fix */
.clear {
	clear: both;
}

.text-shadow {
	text-shadow: -1px -1px grey;
}

.nowrap {
	white-space: nowrap;
}

dl {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}
dl dt {
	flex: 0 1 200px;
}
dl dd {
	display: block;
	flex: 1 1 calc(100% - 220px);
	margin: 0;
}

/* specific styles */
.errors {
	border-radius: 5px;
	margin: 5px 15px 0 15px;
	padding: 10px;
	background: #dc322f;
	font-style: normal;
	color: white;
	line-height: 1.7em;
}

.alert-toast {
	padding: 5px 10px;
	display: flex;
}

.alert-toast .mytoast-close {
	margin-left: auto;
	color: inherit;
}

.padding-sides {
	padding-left: 15px;
	padding-right: 15px;
}

.form-group {
	margin-bottom: 10px;
}

.form-buttons {
	display: flex;
}
.form-buttons._spread {
	justify-content: space-between;
}
.form-buttons._gapped {
	gap: 15px;
	flex-wrap: wrap;
	justify-content: center;
}

label.fw {
	width: auto;
}

.form-buttons p.label {
	display: flex;
	align-items: center;
	color: var(--border-title-admin);
	margin-bottom: 0;
}

.form-buttons.col-6 {
	justify-content: start;
}

.form-buttons.col-6 .wrap-button {
	justify-content: start;
}

.alert.form-check {
	padding: 0;
	color: red;
	margin-bottom: 0;
	font-size: 14px;
}

.form-group .has-error {
	background-color: rgb(255, 231, 231);
}

.has-error {
	border-color: red !important;
}

.list-horizontal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}
.list-horizontal>* {
	margin-right: 1em;
}


/* === 開発の時 >>> */

#debug {
	margin-top: var(--default-spacing);
	font-style: normal;
}

.benchmark {
	text-align: left;
	/*color: hotpink;*/
	font-style: normal;
	word-wrap: break-word;
}

.benchmark b {
	border-radius: 5px;
	color: white;
	background: grey;
	margin-left: -10px;
	padding: 1px 10px;
}

.benchmark-group.debug-info b {
	background-color: #6D9DD1;
}

.benchmark-group.debug-warning b {
	background-color: #F76C27;
}

.benchmark-group.debug-danger b {
	background-color: #E73F3F;
}

.benchmark-group p {
	margin: 0;
	padding-left: 1em;
	font-family: monospace;
	border-left: 2px solid #6D9DD1;
}

.benchmark-group.debug-warning p {
	border-color: #F76C27;
}

.benchmark-group.debug-danger p {
	border-color: #E73F3F;
}

.todo {
	border: 2px solid cyan !important;
}

/* <<< */

/* === メインテンプレートの共有部分 >>> */
#top .top-belt {
	background-color: var(--accent-bg-color);
	color: var(--accent-txt-color);
}

#top .top-belt-container {
	padding: var(--default-spacing) calc(var(--default-spacing)*2);
	display: flex;
}

#top .top-logo img {
	height: 48px;
	border-radius: 100%;
	border: 3px solid white;
}

#top .user-block {
	flex-grow: 1;
	align-self: center;
	text-align: right;
}

#top .user-block .btn-default {
	border-radius: 0;
	background-color: #D2D2D2;
	color: var(--default-txt-color);
}

#top .user-block .fas {
	margin: 0 5px;
}

#top .sitename-block h1 {
	margin: 1em;
	font-size: 28px;
}

/* we have a button to go back to top */
#topBtn {
	display: block;
	position: fixed;
	bottom: var(--default-spacing);
	right: var(--default-spacing);
	width: 2em;
	height: 2em;
	background-color: rgba(150, 150, 150, 0.5);
	border-radius: 50%;
	font-size: 30px;
	text-align: center;
	line-height: 2em;
	color: white;
}

#topBtn:hover {
	color: white;
}

/* <<< */

/* === jquery UI overrides >>> */
.main-showroom .ui-widget-header {
	color: inherit;
}

/* <<< */

#dev-logs span {
	/*float: right;*/
	display: block;
	text-align: right;
}

/* Bootstrap overrides >>> */
.alert-sm {
	padding: 10px;
}

.alert-xs {
	padding: 5px;
	font-size: small;
}

.well {
	background-color: #fffdf8;
}


.alert-danger {
	background-color: #ffe7e2;
}

.table-striped>tbody>tr:nth-child(odd) {
	background-color: #fffdf8;
}

/* <<< */

/* responsive rules >>> */
@media screen and (max-width: 350px) {
	.hidden-xxs {
		display: none;
	}
}

@media screen and (max-width: 767px) {
	.container {
		padding: 0;
	}

	#page {
		border: none;
		border-radius: 0;
	}
}

/* <<< */


/* custom */
.Kozuka {
	font-family: Kozuka R;
}

.admin form {
	padding-left: 0;
}

.admin .admin-breadcrums {
	padding-left: 0;
}
.container-fluid .admin-breadcrums {
	padding-right: 10px;
}

.breadcrums-title {
	font: normal normal normal 20px/30px Kozuka B;
	color: var(--blue-root);
	margin-bottom: 12px;
}

/*
  Breadcrumb spacing
  */

.admin-breadcrums {
	clear: left;
	float: left;
	margin-bottom: 25px;
	width: 100%;
}

.admin-breadcrums p {
	/* needed for :before & :after positioning */
	position: relative;
	float: left;
	height: 40px;
	line-height: 40px;
	padding-left: 15px;
	/* pad left & right due to arrows*/
	padding: 0 15px 0 20px;
	/* for v spacing when viewing on smaller screen */
	font: normal normal normal 18px/40px Kozuka B;
	letter-spacing: 0px;
	color: var(--blue-root);
	text-decoration: none;
	background: var(--breadcrums-bg-default);
	border: 1px solid var(--blue-root);
}

.admin-breadcrums p:hover {
	color: var(--blue-root);
}


/*
  Arrow foreground using :after pseudo
  */

.admin-breadcrums p:after {
	content: "";
	position: absolute;
	right: -10px;
	/* arrow construction */
	border-top: 19px solid transparent;
	border-bottom: 19px solid transparent;
	/* arrow bg color - must be same as ".admin-breadcrums  a" bg color */
	border-left: 10px solid var(--breadcrums-bg-default);
	z-index: 2;
}

.admin-breadcrums p.active:after {
	content: "";
	position: absolute;
	right: -10px;
	/* arrow construction */
	border-top: 19px solid transparent;
	border-bottom: 19px solid transparent;
	/* arrow bg color - must be same as ".admin-breadcrums  a" bg color */
	border-left: 10px solid var(--blue-root);
	;
	z-index: 2;
}

.admin-breadcrums p:hover {
	cursor: unset;
}

/*
  Arrow border using :before pseudo
  */

.admin-breadcrums p:before {
	content: "";
	position: absolute;
	right: -12px;
	top: -1px;
	z-index: 1;
	/* arrow construction */
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	/* arrow border - must be same as ".admin-breadcrums  a" border color */
	border-left: 11px solid var(--blue-root);
}


/*
  Hover styles
  */
.admin-breadcrums p.active {
	/* changes main bg but NOT arrow */
	background: var(--blue-root);
	color: var(--default-bg-color);
}

.btn-compact,
a.btn-compact,
table.table-default td a.btn-compact {
	display: inline-block;
	padding: 0.25em 1em;
	border: 3px solid var(--blue-root);
	border-radius: 10px;
	font-size: 14px;
	letter-spacing: 1px;
	color: var(--blue-root);
	background-color: var(--white);
}
.btn-compact:hover,
a.btn-compact:hover,
table.table-default td a.btn-compact:hover {
	background-color: var(--blue-root);
	color: var(--white);
}

.btn-custom {
	width: 149px;
	height: 40px;
	border: 3px solid var(--blue-root);
	border-radius: 10px;
	/* font: normal normal normal 18px/40px Kozuka B; */
	letter-spacing: 0px;
	color: var(--blue-root);
	background: var(--white);
}

.btn-custom:hover {
	color: var(--default-bg-color);
	background: var(--blue-root);
}

a.btn-custom,
.btn-custom {
	text-decoration: none;
	font-weight: normal;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--blue-root);
}

.btn-custom-no-width {
	width: unset;
	padding: 0 25px;
}

.no-width {
	width: unset;
}

.btn-custom.remove {
	color: #E29090;
}

a.btn-custom:hover {
	color: var(--default-bg-color);
}

table.table-default td a.btn-custom {
	color: var(--blue-root);
}

table.table-default td a.btn-custom:hover {
	color: var(--default-bg-color);

}

.mt-100 {
	margin-top: 100px;
}

.mt-50 {
	margin-top: 50px;
}

.mt-30 {
	margin-top: 30px;
}
.mb-30 {
	margin-bottom: 30px;
}

.mr-22 {
	margin-right: 22px;
}

.mr-10 {
	margin-right: 10px;
}
.mr-5 {
	margin-right: 5px;
}

.is-invalid {
	border: var(--red) 1px solid !important;
	background: var(--input-bg-error) !important;
}

form .error-message {
	font-size: 14;
	color: var(--red);
	font-family: Kozuka R;
}

.admin-content {
	color: var(--default-txt-color);
}

.admin-content h4 {
	margin-bottom: 45px;
	font: normal normal normal 25px/30px Kozuka B;
	letter-spacing: 0px;
	color: var(--default-txt-color);
	padding: 3px 0 0 10px;
	border-left: var(--border-title-admin) 5px solid;
}

.sub-content {
	padding-left: 0px;
}

.section-title {
	color: var(--border-title-admin);
	font: normal normal normal 18px/30px Kozuka B;
	border-bottom: var(--border-admin-section) 1px solid;
}

.btn-custom-secondary {
	color: var(--secondary) !important;
	border: var(--secondary) 3px solid;
}

.btn-custom-secondary:hover {
	color: var(--default-bg-color) !important;
	background: var(--secondary);
}

.btn-custom-primary {
	color: var(--white) !important;
	border: var(--blue-root) 3px solid;
	background: var(--blue-root);
}

.btn-custom-primary:hover {
	border: var(--blue-root) 3px solid;
	background: var(--white);
	color: var(--blue-root) !important;
}

.btn-disable {
	color: var(--white) !important;
	background: var(--secondary) !important;
}

.btn-custom-danger {
	color: var(--danger) !important;
	border: var(--danger) 3px solid;
}

.btn-custom-danger:hover {
	color: var(--white) !important;
	background: var(--danger);
}

.btn-custom:disabled,
.btn-custom-disable,
.btn-custom:disabled:hover,
.btn-custom-disable:hover {
	background: var(--default-border-color) !important;
}

.btn-custom:disabled:hover,
.btn-custom-disable:hover {
	color: var(--blue-root) !important;
}

.tbl-btns {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 5px;
	flex: 1;
}

.flex-gap-1 {
	gap: 1em;
}

.btn-view-compare {
	position: fixed;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	top: 50%;
	right: 0;
	padding: 10px;
	background-color: white;
	border-top-left-radius: 24px;
	border-bottom-left-radius: 24px;
	box-shadow: -1px 1px 4px #00000029;
	transform: translateY(-50%);
	transition: all 0.2s ease;
	background: black;
}
.btn-view-compare.d-none {
	display: flex !important;
	transform: translateY(-50%) translateX(105%);
}
.btn-view-compare-text {
	margin-top: 0.5em;
	writing-mode: vertical-rl;
	font-weight: bold;
	color: white;
}

.btn-view-compare .compare-badge {
	position: absolute;
	top: -0.5em;
	right: -0.5em;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5px;
	min-width: 1.5em;
	height: 1.5em;
	border-radius: 1.5em;
	background-color: red;
	color: white;
	font-size: 0.8em;
}
.btn-view-compare .compare-badge.update {
	animation: 0.3s ease update;
}

@keyframes update {
	0% {
		transform: scale(1) translateY(0);
	}
	50% {
		transform: scale(1.5) translateY(-1em);
	}
	100% {
		transform: translateY(0);
	}
}

.h-40 {
	height: 40px;
}

.flex-right {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.flex-between {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.text-20-30-B {
	font: normal normal normal 20px/30px Kozuka B;
}

.text-12-25-R {
	font: normal normal normal 14px/25px Kozuka R;
}

select {
	outline: none;
	height: 30px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

div textarea {
	resize: none;
	border: 1px solid var(--default-border-color);
}

textarea:focus-visible {
	outline: none;
}

table.table-default {
	width: 100%;
	border-collapse: collapse;
}

table.table-default thead {
	text-align: center;
	background: #E2EBFF;
}

table.table-default thead th {
	padding: 18px 0;
	font: normal normal normal 16px/20px Kozuka B;
	color: var(--border-admin-section);
}

table.table-default th.sp-title {
	padding: 10px 0;
	background: #E2EBFF;
}

table.table-default td {
	padding: 8px;
	font: normal normal normal 17px/26px Kozuka R;
	color: var(--border-admin-section);
}

table.table-default._compact thead th,
table.table-default._compact td {
	padding: 2px 5px;
}

table.table-default th,
table.table-default td {
	border: 1px solid var(--border-admin-section);
}

.custom_pagination .pagination {
	justify-content: center;
}

.custom_pagination .list-pagination .page-item {
	min-width: 40px;
	text-align: center;
}

.custom_pagination .list-pagination .page-item.active .page-link {
	background-color: var(--paginate-bg-active);
	border-color: var(--paginate-bg-active);
}

.custom_pagination .list-pagination .page-item .page-link {
	border-color: var(--paginate-bg);
	background-color: var(--paginate-bg);
	color: var(--default-txt-color) !important;
	font: normal normal normal 15px/25px Kozuka R;
	margin: 0 3.5px;
	padding: 0;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	outline: none;
}

table.table-default thead th a {
	font: normal normal normal 16px/20px Kozuka B;
	color: var(--border-admin-section);
	text-decoration: none;
}

table.table-default td a {
	font: normal normal normal 17px/26px Kozuka R;
	color: var(--border-admin-section);
	text-decoration: none;
}

.w-20-per {
	width: 20%;
}

.select-limit-page {
	width: 70px;
}

.break {
	word-break: break-word;
}

.link {
	text-decoration: none;
	color: var(--link-color) !important;
}

.link-black {
	text-decoration: none;
	color: var(--default-txt-color) !important;
}

.text-bold-blue {
	font: normal normal normal 18px/40px Kozuka B;
	color: var(--link-color) !important;
}

.brand-link {
	border: var(--blue-root) 1px solid;
	padding: 29px 20px;
	margin-top: 60px;
}

.brand-link .text {
	font: normal normal normal 18px/40px Kozuka B;
	letter-spacing: 0px;
	color: var(--default-txt-color);
}

.brand-link .text span {
	font: normal normal normal 18px/40px Kozuka R;
}

.brand-link .link {
	font: normal normal normal 16px/35px Kozuka R;
	letter-spacing: 0px;
}




.ellipsis-1 {
	word-break: break-word;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	line-height: 25px;
	max-height: 25px;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.ellipsis-2 {
	word-break: break-word;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	line-height: 25px;
	max-height: 50px;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.ellipsis-3 {
	word-break: break-word;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	line-height: 25px;
	max-height: 75px;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.ellipsis-4 {
	word-break: break-word;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	line-height: 25px;
	max-height: 100px;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
}

.ellipsis-5 {
	word-break: break-word;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	line-height: 25px;
	max-height: 125px;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
}

/* DEBUG用 >>>
.ellipsis-1,
.ellipsis-2,
.ellipsis-3,
.ellipsis-4,
.ellipsis-5 {
	color: lime !important;
}
*/

.pl-20 {
	padding-left: 20px;
}

.page-404 {
	min-height: 65vh;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
}

.page-404 .message {
	font: normal normal normal 18px/40px Kozuka B;
	letter-spacing: 0px;
	color: var(--default-txt-color);
}

.text-disable {
	color: var(--border-title-admin) !important;
	font: normal normal normal 16px/30px Kozuka R !important;
}

.radio-input {
	display: flex;
	align-items: center;
	width: unset;
}

/* .radio-input input {
	width: 32px;
} */
input[type="checkbox"],
input[type="radio"] {
	width: 20px;
	margin-right: 1em;
	flex-shrink: 0;
	height: 30px;
}

.radio-input label {
	margin: 0;
}

input.radio-input {
	width: 20px;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
input[type=number] {
	-moz-appearance: textfield;
}

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

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

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

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

form .form-group .show {
	margin-left: 0px;
	font: normal normal normal 16px/30px Kozuka R;
}

.file-image-common.confirm-display img {
	width: 310px;
	height: 210px;
	object-fit: contain;
	border: 1px solid #ddd;
}

.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

.-mt-15 {
	margin-top: -15px;
}

.review-list a {
	font: normal normal normal 16px/30px Kozuka R;
	color: var(--default-txt-color);
	border: 1px solid var(--border-admin-section);
}

.review-list .bg-success {
	background: var(--success) !important;
}

.review-list .bg-waiting {
	background: var(--waiting) !important;
}

.review-list .bg-secondary {
	background: var(--secondary) !important;
}

.review-list a .bold,
.bold {
	font-family: Kozuka B !important;
	font-size: 18px;
}

.review-list a:hover {
	color: var(--default-txt-color);
	/* opacity: .5; */
}

.review-list .status {
	width: 100px;
	text-align: center;
}

.border-blue {
	border-bottom: 2px solid var(--blue-root);
}

.review-info {
	border: 1px solid var(--default-border-color);
	padding: 25px 15px;
}

.review-info .info-1 {
	width: 150px;
	margin-bottom: 10px;
}

.review-list .title-name {
	background: var(--default-table-bg);
	height: 35px;
	border-bottom: 1px solid var(--border-admin-section);
	color: var(--border-admin-section);
	padding-left: 20px;
}

.item-confirm .review-list .title-name {
	max-height: 35px;
	line-height: 35px;
}

.review-list .content-name {
	padding: 15px 20px;
}

.btn-see-more,
.item-confirm .see-more {
	background: var(--default-table-bg);
	border: 1px solid var(--border-admin-section);
	text-align: center;
	border-radius: 4px;
	margin-top: 15px;
}

a.btn-see-more {
	display: block;
	padding: 10px;
	text-decoration: none;
	color: black;
}
a.btn-see-more:hover {
	opacity: 0.7;
}

.shop-list.mozaic {
	position: relative;
}

.mozaic .mozaic-message {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 2em;
	background: #9F9F9F55;
	color: black;
	font-weight: bold;
}

.shop-list .item {
	display: flex;
	gap: 10px;
}

.shop-list .item--shop-detail {
	display: flex;
	flex-direction: row;
}

.shop-list .item--shop-detail label {
	white-space: nowrap;
	width: 7em;
}
.shop-list .item--shop-detail p {
	flex: 1;
}

.shop-list label{
	text-align: left;
    font: normal normal normal 18px/30px Kozuka R;
    letter-spacing: 0px;
    color: var(--default-txt-color);
    opacity: 1;
}

.detail-show .see-more {
	cursor: pointer;
}

.see-more a {
	border: none;
	text-decoration: none;
	display: block;
	color: var(--default-txt-color);
	width: 100%;
	font: normal normal normal 16px/30px Kozuka R;
}

.see-more a:hover {
	color: var(--default-txt-color);
}

.border-default {
	border: 1px solid var(--default-border-color) !important;
}

.font14 {
	font-size: 14px;
}

.font18 {
	font-size: 18px;
}

.font20 {
	font-size: 20px;
}

.img-responsive {
	max-width: 100%;
	height: auto;
}

.img-review {
	width: 600px;
	height: 400px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.slide-item {
	width: calc(100vw - 117px);
}

.slide-item a {
	text-decoration: none;
	color: var(--default-txt-color);
}

.slide-item a:hover {
	color: var(--default-txt-color);
}

.next {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #F2F2F2;
	border-radius: 5px;
	font-size: -webkit-xxx-large;
	color: #707070;
	height: 100%;
	cursor: pointer;
}

i.yellow {
	color: var(--yellow);
}

i.secondary {
	color: var(--default-border-color);
}

.wh-32 {
	width: 100%;
	position: relative;
	padding-top: 65.34%;
	overflow: hidden;
}

.wh-32 img {
	position: absolute;
    top: 50%;
    max-height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    left: 50%;
    transform: translate(-50%, -50%);
}

.lable-section {
	font: normal normal normal 18px/40px Kozuka Gothic Pr6N;
	color: var(--default-txt-color);
	font-weight: bold;
	border-bottom: 5px solid var(--blue-root);
	margin-bottom: 25px;
}

.modal .regist-input label {
	width: 100px;
}

.modal .wrap-input {
	padding: 0 40px;
	/* text-align: center; */
}

.modal .regist-input .wrap-input .txt-guide {
	color: var(--red);
	font-size: 14px;
	margin-bottom: 0;
}

.modal .regist-input input {
	width: unset;
}

.regist-input .maker_name {
	margin-right: 20px;
}

.regist-input .value-name {
	margin-left: 15px;
}

.regist-input .d-flex.flex-column {
	width: 225px;
}

.regist-input .alert.form-check {
	text-align: left;
}

/* .regist-input .form-group {
	justify-content: center;
} */

.obj-contain {
	object-fit: contain;
}

.h-55 {
	height: 55px;
}

.h-48 {
	height: 48px;
}

.modal {
	background-color: rgba(0, 0, 0, .4);
}

.modal-content {
	background-color: #fefefe;
	margin: auto;
	padding: 20px;
	padding-top: 0;
	border: 1px solid #888;
}

span.close {
	text-align: right;
	color: #aaaaaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
}

.w-600 {
	width: 600px !important;
}
.max-w-600 {
	max-width: 600px !important;
}

.font-30 {
	font: normal normal normal 30px/66px Kozuka B;
}

.font-16 {
	font: normal normal normal 16px/25px Kozuka R !important;
}

.font-14 {
	font: normal normal normal 14px/20px Kozuka R !important;
}

.font-14-b {
	font: normal normal normal 14px/20px Kozuka B !important;
}

.img-fluid {
	max-height: 100%;
	object-fit: contain;
}

.checkbox-policy input {
	width: unset !important;
}

.user-review-search {
	background: var(--default-table-bg);
	border-bottom: 1px solid var(--border-input-color);
	border-top: 1px solid var(--border-input-color);
}

.user-review-list a:not(.btn-see-more) {
	font: normal normal normal 16px/30px Kozuka R;
	color: var(--default-txt-color);
	border: 1px solid var(--border-admin-section);
	border-radius: 10px;
	padding: 10px;
}

.user-review-list a:hover {
	color: var(--default-txt-color);
}

.img-adaptive {
	display: block;
	margin: auto;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
}

.max-h-128 {
	max-height: 128px;
}

.max-w-350 {
	max-width: 350px;
}

.min-w-150 {
	min-width: 150px;
}
.min-w-95 {
	min-width: 95px;
}

.w-150 {
	width: 150px;
}

.btn-create {
	text-decoration: none;
	background: var(--default-table-bg);
	border: 1px solid var(--border-btn-create);
	display: inline-block;
	border-radius: 6px;
	padding: 4px 12px;
	color: var(--default-txt-color) !important;
	font-family: Kozuka R;
	font-weight: 500;
	font-size: 14px;
}

.btn-create:hover {
	color: var(--default-txt-color);
}

.shadow {
	box-shadow: 0 2px 5px rgba(100, 100, 100, 0.5);
}

.user-display-title {
	font-family: Kozuka B;
	font-weight: bold;
	font-size: 25px;
	line-height: 30px;
	text-align: center;
}

.user-display-title span {
	display: inline-block;
	padding: 0 5px;
	border-bottom: 4px solid var(--blue-root);
	font-size: 16px;
}

.select-limit-page {
	text-indent: 3px;
	background: #FFFFFF 0% 0% no-repeat padding-box;
	border: 1px solid var(--default-border-color);
	opacity: 1;
	text-align: left;
	letter-spacing: 0px;
	color: var(--default-txt-color);
	cursor: pointer;
	font-family: Kokuza R;
	height: unset !important;
}

.select-limit-page option {
	cursor: pointer;
	color: var(--default-txt-color);
	border: 1px solid var(--default-border-color);
}
.bg-custom-secondary {
	background: var(--default-table-bg);
}
.rounded-20{
	border-radius: 20px;
}
.w-225{
	width: 225px !important;
}
.w-300{
	width: 300px !important;
}
.border-bottom-blue-3{
	border-bottom: 3px solid var(--blue-root) !important;
}
.devide{
	border-bottom: 1px solid var(--default-border-color);
}
.devide-2{
	border-bottom: 2px solid var(--default-border-color);
}
.devide-3{
	border-bottom: 3px solid var(--default-border-color);
}

.loupe{
    border:2px solid white;
    background-repeat: no-repeat;
    background-color: white;
    width:200px; height:200px; /* 拡大鏡大きさ */
    position:absolute;
    display:none;
    -moz-box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
    -webkit-box-shadow:0 0 5px #777;
    box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
    -moz-border-radius:100px; /* 拡大鏡大きさ ÷ 2 */
    -webkit-border-radius:100px; /* 拡大鏡大きさ ÷ 2 */
    border-radius:100px; /* 拡大鏡大きさ ÷ 2 */
}

img.img-sub {
	cursor: pointer;
}

.h-150 {
    height: 150px;
}

.h-250 {
    height: 250px;
}

.mobile .img-loupe{
	position: relative;
}

/* 商品詳細 */
.title-section {
	margin: 60px 0 15px 0;
	padding-left: 25px;
	background-color: var(--blue-root);
	color: var(--white);
	font: normal normal normal 22px/48px Kozuka Gothic Pro;
}

.basic-info h3 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
}

.item-basics .item {
	display: flex;
}

.item-basics .item :first-child {
	width: 100px;
}
/* 
.item-basics .item :nth-child(2) {
	display: flex;
} */

.item-basics .item span {
	width: 50px;
	height: 1px;
	background-color: var(--default-txt-color);
	margin: 0 10px;
	margin-top: 12px;
}

/* 商品タグ表示 */
.tag-prod {
	display: inline-block;
	width: 1.5em;
	text-align: center;
	border-radius: 3px;
	margin-right: 0.5em;
	padding: 3px;
	line-height: 1;
	font-size: 11pt;
	background-color: lightgrey;
	color: black;
}

.tag-prod.tag-maker {
	background-color: var(--tag-maker-color);
	color: white;
}
.tag-prod.tag-lineup {
	background-color: var(--tag-lineup-color);
	color: white;
}
.tag-prod.tag-series {
	background-color: var(--tag-series-color);
	color: white;
}

/* === 商品一覧 === */
.products-list .product-name-block {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.products-list  .product-name {
	font-size: 14pt;
}

.products-list .product-buttons-block>* {
	margin-right: 10px;
	margin-bottom: 10px;
}

/* 未使用 >>>
.product-pic {
	position: relative;
}

.product-pic .product-cert-mark {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 24%;
	height: auto;
}
<<< */

@media (max-width: 580px) {
	.products-list .product-name-block {
		flex-direction: column;
		margin-bottom: 1em;
		align-items: flex-start;
	}
}

/* === points リニューアル === */
.table-responsive-2col {
	width: 100%;
	border: 1px solid #e6e6e6;
}

.table-responsive-2col tr:first-child th {
	text-align: center;
}

.table-responsive-2col tr>:first-child {
	width: 30%;
}

.table-responsive-2col tr:nth-child(odd) {
	background: #e6e6e6;
}
.table-responsive-2col th,
.table-responsive-2col td {
	border: 1px solid #aea8a8;
	padding: 5px;
}


@media (max-width: 586px)
{
	.desktop {
		display: none;
	}
}

.stars-list {
	display: inline-block;
	margin-left: 1em;
}

.stars-line .stars-list {
	margin-left: 0;
}

@media (max-width: 580px) {
	.stars-list {
		margin-left: 0;
		display: block;
	}
}

/* === スライド === */

.slides-home .wrap-image {
	display: flex;
	justify-content: center;
	align-items: center;
}

.slick-initialized {
	margin-left: 25px;
	margin-right: 25px;
}

.slides-desktop .slick-slide,
.slides .slick-slide {
	display: flex !important;
	aspect-ratio: 3/2;
	justify-content: center;
	align-items: center;
}
.slides-desktop .slick-slide>*,
.slides .slick-slide>* {
	display: block;
	margin: auto;
}

.slides-zoom {
	aspect-ratio: 3/2;
	max-width: 850px;
	background-color: white;
	border: 1px solid lightgray;
	margin: 0 auto 15px auto;
}
.slides-zoom .slick-slide {
	aspect-ratio: 3/2;
	max-width: 850px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.slides-desktop {
	max-width: 850px;
	margin: auto;
}
.slides-desktop .slick-slide {
	margin: 5px;
	height: 150px;
	background-color: white;
	border: 2px solid lightgray;
}
.slides-desktop .slick-slide.slick-current {
	border-color: #64A1DE;
}

.slick-prev::before {
	content: "\f053";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 25px;
	color: grey;
}

.slick-next::before {
	content: "\f054";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 25px;
	color: grey;
}

/* === ファンシーボックスのボタン === */
.fancybox-button--rotate {
	display: none;
}
/* 透明画像があるため（黒テキスト・本体）見やすいようにオーバーレイを白にする */
.fancybox-bg {
	background: white;
}

.icon-bending {
	display: inline-block;
	font-size: 10pt;
	padding: 0 2px;
	background-color: #eee;
	border-radius: 3px;
	box-shadow: 2px 2px 4px #7d7d7d33;
	white-space: nowrap;
}

.icons-container {
	display: flex;
	flex-direction: column;
	gap: 2px;
	white-space: nowrap;
}

.icon-discontinued {
	display: inline-block;
	padding: 2px 5px;
	font-size: 12pt;
	font-weight: lighter;
	border-radius: 3px;
	background-color: #239870;
	color: white;
}

.icon-off {
	display: inline-block;
	padding: 2px 5px;
	font-size: 12pt;
	border-radius: 3px;
	background-color: var(--disabled-bg-color);
	color: var(--disabled-txt-color);
}

.is-sticky {
	position: fixed;
	top: 0;
	padding: 3px 10px;
	border-radius: 3px;
	background-color: white;
	box-shadow: 2px 2px 2px gray;
}