@import url('https://fonts.googleapis.com/css2?family=Berkshire+Swash&family=Lobster&family=Pacifico&family=Tangerine:wght@400;700&display=swap');

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

html {
	scroll-behavior: smooth;
}

body {
	line-height: 1;
}

a img {
	vertical-align: bottom;
}

img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;

}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}

a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

/* change colours to suit your needs */
ins {
	background-color: #ff9;
	color: #000;
	text-decoration: none;
}

/* change colours to suit your needs */
mark {
	background-color: #ff9;
	color: #000;
	font-style: italic;
	font-weight: bold;
}

del {
	text-decoration: line-through;
}

abbr[title],
dfn[title] {
	border-bottom: 1px dotted;
	cursor: help;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #cccccc;
	margin: 1em 0;
	padding: 0;
}

input,
select {
	vertical-align: middle;
}

/*box-sizingă‚’å…¨ăƒ–ăƒ©ă‚¦ă‚¶ă«å¯¾å¿œ*/
*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

/* ========================================== */
/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox,
#cboxOverlay,
#cboxWrapper {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;
	overflow: visible;
}

#cboxWrapper {
	max-width: none;
}

#cboxOverlay {
	position: fixed;
	width: 100%;
	height: 100%;
}

#cboxMiddleLeft,
#cboxBottomLeft {
	clear: left;
}

#cboxContent {
	position: relative;
}

#cboxLoadedContent {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

#cboxTitle {
	margin: 0;
}

#cboxLoadingOverlay,
#cboxLoadingGraphic {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#cboxPrevious,
#cboxNext,
#cboxClose,
#cboxSlideshow {
	cursor: pointer;
}

.cboxPhoto {
	float: left;
	margin: auto;
	border: 0;
	display: block;
	max-width: none;
	-ms-interpolation-mode: bicubic;
}

.cboxIframe {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
	padding: 0;
	margin: 0;
}

#colorbox,
#cboxContent,
#cboxLoadedContent {
	box-sizing: content-box;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay {
	background: #000;
	opacity: 0.5 !important;
	filter: alpha(opacity=50) !important;
}

#colorbox {
	outline: 0;
}

#cboxContent {
	margin-top: 32px;
	overflow: visible;
	background: #fff;
}

.cboxIframe {
	background: #fff;
}

#cboxError {
	padding: 50px;
	border: 1px solid #ccc;
}

#cboxLoadedContent {
	background: #fff;
	padding: 0px;
}

#cboxLoadingGraphic {
	background: url(../images/loading.gif) no-repeat center center;
}

#cboxLoadingOverlay {
	background: #fff;
}

/*#cboxTitle{position:absolute; top:-22px; left:0; color:#fff;}*/
#cboxTitle {
	display: block;
	width: 100%;
	margin-top: 10px;
	color: #FFFFFF;
	text-align: center;
}

#cboxCurrent {
	position: absolute;
	top: -22px;
	right: 205px;
	text-indent: -9999px;
}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious,
#cboxNext,
#cboxSlideshow {
	border: 0;
	padding: 0;
	margin: 0;
	overflow: visible;
	text-indent: -9999px;
	width: 50px;
	height: 45px;
	position: absolute;
	top: -20px;
}

/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active,
#cboxNext:active,
#cboxSlideshow:active,
#cboxClose:active {
	outline: 0;
}

#cboxPrevious {
	background: url(../images/prev.png) no-repeat;
	top: 50%;
	left: -70px;
}

#cboxNext {
	background: url(../images/next.png) no-repeat;
	top: 50%;
	right: -70px;
}

#cboxClose {
	border: 0;
	padding: 0;
	margin: 0 0 0 -25px;
	overflow: visible;
	text-indent: -9999px;
	width: 50px;
	height: 45px;
	background: url(../images/close.png) no-repeat center center;
	position: absolute;
	bottom: -60px;
	left: 50%;
}

.cboxSlideshow_on #cboxSlideshow {
	background-position: -75px -25px;
	right: 44px;
}

.cboxSlideshow_on #cboxSlideshow:hover {
	background-position: -100px -25px;
}

.cboxSlideshow_off #cboxSlideshow {
	background-position: -100px 0px;
	right: 44px;
}

.cboxSlideshow_off #cboxSlideshow:hover {
	background-position: -75px -25px;
}

@media screen and (max-width: 767px) {

	/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
	#cboxContent {
		margin-top: 0px;
	}

	#cboxPrevious,
	#cboxNext,
	#cboxSlideshow {
		border: 0;
		padding: 0;
		margin: 0;
		overflow: visible;
		text-indent: -9999px;
		width: 25px;
		height: 23px;
		position: absolute;
		top: -20px;
	}

	#cboxPrevious {
		background: url(../images/prev.png) no-repeat;
		background-size: contain;
		top: 50%;
		left: 0px;
	}

	#cboxNext {
		background: url(../images/next.png) no-repeat;
		background-size: contain;
		top: 50%;
		right: 0px;
	}

	#cboxClose {
		background: url(../images/close.png) no-repeat center center;
		background-size: contain;
		bottom: -45px;
		left: 50%;
		margin-left: -3%;
		width: 6%;
	}
}

#cboxContent body {
	background: #fff;
}

/* ============================================= */

/* Outline -------------------------------------------------*/
#wrapper {
	width: 1160px;
	margin: 0 auto;
	letter-spacing: 2px;
	font-size: 1.2rem;
	/*overflow: hidden;*/
}

#container {
	position: relative;
	width: 1160px;
	display: flex;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	-ms-transition: all 0.3s;
	transition: all 0.3s;
}

#main_clm {
	width: 1160px;
	position: relative;
}

#side_clm {
	width: 260px;
	background-color: #f8f8f8;
	font-size: 1.4rem;
	padding: 0px 0px 30px 0px;
	order: 1;
	background-color: #FFFFFF;
}

#main_outer {
	display: flex;
	justify-content: space-between;
}

#main_contents {
	width: 870px;
	order: 2;
}

.main_full {
	width: 1050px !important;
	margin: 0 auto;
}

/* header -------------------------------------------------*/
#global_header {
	height: 118px;
	width: 100%;
	position: relative;
	padding: 20px 0;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

#global_header h1 {
	width: 300px;
}

#global_header ul {
	width: 240px;
	height: 100%;
	top: 0;
	left: 11px;
	font-size: 1.6rem;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.header_ico_default {
	width: 70px;
	padding: 3px 20px;
	border-left: #DFDFDF solid 1px;
	position: relative;
}

.header_ico_default span {
	display: block;
	position: absolute;
	right: 2px;
	top: 2px;
	background-color: #A40002;
	font-size: 0.9rem;
	line-height: 14px;
	text-align: center;
	color: #FFFFFF;
	width: 14px;
	height: 14px;
	border-radius: 7px;
	font-weight: bold;
}

#global_header ul li:nth-child(3) {
	/* width: 60px;
	padding: 3px 10px 3px 20px; */
}

#global_header ul li:nth-child(1) {
	font-weight: bold;
	padding-right: 20px;
	font-size: 1.8rem;
}

.cross {
	display: none;
	width: 42px;
	height: 42px;
}

.cross span {
	position: absolute;
	width: 70%;
	height: 1px;
	background-color: #9b9b9b;
	left: 30%;
}

.cross span:nth-of-type(1) {
	-webkit-transform: translateY(21px) rotate(-45deg);
	transform: translateY(21px) rotate(-45deg);
}

.cross span:nth-of-type(2) {
	-webkit-transform: translateY(21px) rotate(45deg);
	transform: translateY(21px) rotate(45deg);
}

/*sideclm-------------------------------------------------------*/
.side_nav1 {
	line-height: 250%;
	margin: 40px 15px 0 25px;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: right;
}

.side_nav1 a {
	display: block;
	background: url(../images/icon/ico_arrow_default.png) center right no-repeat;
	background-size: 1.3rem;
	padding-right: 12%;
}

#side_clm ul:first-child {
	margin-top: 0px;
}

#side_search_nav {
	width: 246px;
	height: 50px;
	background: #efefef;
	padding: 12px 15px 12px 20px;
	font-size: 1.6rem;
	margin-top: 40px;
}

#side_search_nav input[type="text"] {
	border: none;
	font-size: 1.4rem;
	width: 195px;
	height: 29px;
	background: #efefef;
}

.side_nav2 {
	margin-top: 40px;
	border-top: #d3d6d6 1px solid;
}

.side_nav2 li {
	line-height: 50px;
	border-bottom: #d3d6d6 1px solid;
}

.side_nav2_haschild {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 25px;
	padding-right: 10px;
	width: 100%;
}

.side_nav2_haschild:after {
	content: '';
	width: 24px;
	height: 24px;
	display: block;
	background: url(../images/ico_arrow.gif) center center no-repeat;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	-ms-transition: all 0.3s;
	transition: all 0.3s;
}

.icon_rotate:after {
	transform: rotate(90deg);
}

.side_nav2 li ul {
	display: none;
	padding-bottom: 15px;
}

.side_nav2 ul li {
	border: none;
	margin-left: 55px;
	line-height: 150%;
	margin-bottom: 10px;
}

.side_nav3 {
	line-height: 250%;
	margin: 30px 15px 0 25px;
}

.side_nav3 a {
	display: inline-block;
	background: url(../images/ico_arrow_s.gif) left center no-repeat;
	font-size: 1.2rem;
	padding-left: 15px;
}

.haschild ul {
	margin-left: 30px;
	line-height: 150%;
	display: none;
}

.haschild ul li {
	margin-bottom: 10px;
}

.haschild img {
	transition: transform 0.1s ease-out;
}

.rotate {
	transform: rotate(90deg);
}

/*footer-------------------------------------------------------*/
#global_footer {
	border-top: 1px solid #d3d6d6;
	padding: 55px 15px 20px 15px;
	margin-top: 80px;
	font-size: 1.1rem;
	letter-spacing: 0px;
}

#footer_nav {
	display: flex;
	justify-content: space-between;
}

#foot_nav01 {
	display: flex;
}

#foot_nav01 ul {
	margin-right: 60px;
	line-height: 320%;
}

#foot_nav01 ul li:first-child {
	font-weight: bold;
}

#footer_search_nav {
	width: 273px;
	height: 39px;
	border: 1px solid #d3d6d6;
	padding: 5px 15px;
}

#footer_search_nav input[type="text"] {
	border: none;
	font-size: 1.4rem;
	width: 225px;
	height: 29px;
}

#footer_sns {
	margin-top: 60px;
	margin-right: 10px;
}

#footer_sns p {
	float: right;
	margin-left: 25px;
}

#footer_copy {
	margin-top: 60px;
	letter-spacing: 2px;
}

.over_img {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

/*ă‚¢ă‚¤ăƒ†ăƒ ăƒªă‚¹ăƒˆ-------------------------------------------------------*/
.item_list {
	display: flex;
	flex-wrap: wrap;
}

.item_list li {
	width: 195px;
	margin-right: 30px;
	margin-bottom: 45px;
}

.large_list_item li {
	width: 240px;
}

.item_list li:nth-child(4n) {
	margin-right: 0;
}

.item_list li a:hover {
	opacity: 1.0;
}

.item_list li a:hover img {
	opacity: 1.0;
}

#top_recommend .item_list li:nth-child(n+5) {
	margin-bottom: 0;
}

.list_pict {
	margin-bottom: 8px;
	position: relative;
	width: 100%;
}

.list_pict:before {
	content: "";
	display: block;
	padding-top: 148%;
}

.list_pict div {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.list_item_price {
	display: block;
}

/*ăƒ©ăƒ³ă‚­ăƒ³ă‚°ă€ă‚¹ăƒŠăƒƒăƒ—ă‚¹ăƒ©ă‚¤ăƒ€ăƒ¼-------------------------*/
#ranking_slider_outer {
	width: 100%;
	overflow: hidden;
}

#ranking_slider .swiper-slide {
	text-align: center;
	font-size: 1.4rem;
}

#snap_slider_outer {
	width: 100%;
	overflow: hidden;
}

/*TopPage-------------------------------------------------*/
#main_visual {
	width: 870px;
	height: 560px;
}

#bn_slider_outer {
	width: 1050px;
	margin: 80px auto 0 auto;
	overflow: hidden;
}

#bn_slider .swiper-slide {
	width: 510px;
}

#top_recommend,
#top_ranking_slider,
#top_snap_slider,
#top_news {
	margin-top: 45px;
}

#news_list {
	font-size: 1.4rem;
}

#news_list li {
	margin-bottom: 22px;
}

#news_list li:last-child {
	margin-bottom: 0px;
}

#news_list li span {
	padding-right: 35px;
}

/*ä¸€è¦§ăƒšăƒ¼ă‚¸-----------------------------------------------*/
#list_items {
	margin-top: 13px;
	position: relative;
}

#sort_trigger {
	font-size: 1.4rem;
	position: relative;
	width: 50px;
	height: 20px;
}

#sort_trigger .cross {
	position: absolute;
	top: -11px;
	right: 10px;
}

#sort_trigger .cross a {
	display: block;
	width: 42px;
	height: 42px;
	line-height: 42px;
}

#sort_area {
	display: none;
	width: 100%;
	padding: 10px 0px 50px 0px;
	letter-spacing: normal;
}

#sort_select {
	display: flex;
	flex-wrap: wrap;
}

.open_sort {
	margin-right: 40px;
	position: relative;
}

.open_sort p {
	height: 15px;
	background: url(../images/ico_arrow_under.gif) no-repeat right center;
	padding-right: 17px;
	line-height: 15px;
	cursor: pointer;
}

.open_sort ul {
	position: absolute;
	width: 110px;
	top: 30px;
	left: 0;
	z-index: 100;
	background-color: #FFFFFF;
	border: 1px solid #d3d6d6;
	display: none;
}

.open_sort ul li {
	border-bottom: 1px solid #d3d6d6;
}

.open_sort ul li:last-child {
	border-bottom: none;
}

.open_sort ul li a {
	display: block;
	padding: 5px 10px;
}

#sort_color {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 30px;
}

#sort_color ul li {
	display: inline-block;
	margin-left: 20px;
	line-height: 13px;
	padding-bottom: 4px;
}

#sort_color ul li.colorselected {
	border-bottom: #CFCFCF 1px solid;
}

/*詳細------------------------------------------------*/
#item_detail {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 13px;
	margin-bottom: 40px;
}

#pict_area {
	width: 500px;
}

#pict_area li {
	margin-bottom: 40px;
}

#detail_area {
	width: 335px;
}

/*#detail_price {
	font-size: 1.8rem;
	margin-top: 30px;
	line-height: 150%;
}
#detail_base_price, #detail_off_per{
	color: #8e8e8e;
}*/
#detail_item_info {
	letter-spacing: normal;
	margin-top: 30px;
	line-height: 200%;
}

/*.detail_cart_item {
	margin-top: 45px;
	letter-spacing: normal;
}
.detail_cart_item_pict{
	border-bottom: 1px solid #d3d6d6;
}
.detail_cart_item_pict ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.detail_item_thumb {
	width: 48px;
	margin-right: 15px;
	font-size: 0;
    height: 48px;
}
.detail_cart_item_outer {
	padding: 13px 0;
	border-bottom: 1px solid #d3d6d6;
}
.detail_cart_item_outer .item_inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.detail_item_size {
	width:50px;
	font-size: 1.6rem;
}
.detail_item_status {
	font-size: 1.1rem;
	width: 105px;
}
.detail_cart_btn {
	width: 140px;
	margin-right: 3px;
}
.detail_cart_item_outer .item_bottom {
	font-size: 1.1rem;
	text-align: right;
	margin-top: 5px;
}*/
#detail_item_spec {
	margin-top: 60px;
	letter-spacing: normal
}

#detail_item_spec p {
	margin-bottom: 30px;
}

.size_table_outer {
	width: 100%;
	height: auto;
	overflow-x: scroll;
}

.size_table_outer::-webkit-scrollbar {
	display: none;
}

.size_table {
	display: flex;
	border-left: 1px #d2d2d2 solid;
	margin-top: 10px;
}

.size_table ul {
	width: 100%;
}

.size_table li {
	font-size: 10px;
	min-height: 39px;
	min-width: 60px;
	padding: 8px;
	box-sizing: border-box;
	border-right: 1px #d2d2d2 solid;
	border-bottom: 1px #d2d2d2 solid;
	background-color: #fff;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.size_table li:first-child {
	background: #f5f5f5;
	text-align: center;
	border-top: 1px #d2d2d2 solid;
}

.size_table li:nth-child(even) {
	background: #fff;
}

#size_first li {
	min-width: 90px;
}

#detail_recommend,
#detail_recent {
	margin-bottom: 20px;
}

#snap_list_detail ul {
	display: flex;
	flex-wrap: wrap;
}

#snap_list_detail ul li {
	width: 175px;
}

#inline_content {
	padding: 40px;
}

#float_login {
	margin-bottom: 25px;
}

#float_login li {
	margin-bottom: 10px;
}

#pop_up_txt p {
	margin-bottom: 15px;
	letter-spacing: normal;
}

#pop_up_txt p:last-child {
	margin-bottom: 0px;
}

#mail_itemblock {
	display: flex;
	flex-wrap: wrap;
	border-top: 1px solid #d1d1d1;
	border-bottom: 1px solid #d1d1d1;
	padding: 30px 0;
	margin: 40px 0;
}

#mail_itemphoto {
	width: 20%;
	margin-right: 4.5%;
}

#mail_itemphoto img {
	vertical-align: bottom;
}

#mail_text {
	width: 75.5%;
	letter-spacing: normal;
}

#inline_content2 {
	font-size: 1.2rem;
	line-height: 200%;
	padding: 75px;
	letter-spacing: 2px;
}

#detail_price {
	display: flex;
	align-items: baseline;
	font-weight: 400;
}

#detail_price li {
	margin-right: 10px;
}

#dynamic_price {
	display: none;
}

.detail_tit {
	margin-bottom: 10px;
}

#cart_color,
#cart_size {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #eeeeee;
}

#cart_size {
	margin-top: 20px;
	border-bottom: 1px solid #eeeeee;
	padding-bottom: 20px;
}

#color_block,
#size_block {
	width: 100%;
}

#color_block ul,
#size_block ul {
	display: flex;
	align-items: top;
	flex-wrap: wrap;
}

#color_block ul li {
	width: 75px;
	margin: 5px 10px 5px 0;
}

#color_block ul li a {
	display: block;
	position: relative;
	font-size: 1rem;
	padding: 3px;
	border: 1px solid #e1e1e1;
	transition: none;
	overflow: hidden;
}

#color_block ul li p {
	margin-top: 5px;
	word-break: break-all;
	font-size: 1rem;
	line-height: 1.2rem;
}

#size_block ul li {
	width: 45px;
	height: 34px;
	margin: 5px 10px 5px 0;
}

#size_block ul li a {
	width: 100%;
	height: 100%;
	display: block;
	padding: 1px;
	border: 1px solid #e1e1e1;
	position: relative;
	transition: none;
	overflow: hidden;
}

#size_block ul li a span {
	display: table-cell;
	width: 41px;
	height: 30px;
	text-align: center;
	font-size: 0.9rem;
	vertical-align: middle;
	padding: 0 3px;
	line-height: 120%;
}

#size_block ul li .sku_selected span {
	width: 37px;
	height: 26px;
}

.slash {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

#color_block .slash {
	background: url(/user_data/packages/default/images/ico_slash_color.png) no-repeat center center;
	background-size: cover;
}

#size_block .slash {
	background: url(/user_data/packages/default/images/ico_slash_size.png) no-repeat center center;
	background-size: cover;
}

.sku_selected {
	border: 3px solid #000 !important;
	padding: 1px !important;
}

#size_block ul li a.sku_selected {
	outline: none !important;
	background-color: #000;
	color: #FFF !important;
}

#cart_comment {
	position: relative;
	letter-spacing: normal;
	color: #999999;
	margin-top: 20px;
}

#cart_comment a {
	position: absolute;
	top: 0;
}

#cart_btn_block {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 15px;
}

#cart_btn_block div {
	position: relative;
	height: 60px;
}

#cart_favorite {
	width: 60px;
}

#cart_add {
	width: calc(100% - 60px);
}

#cart_add .fa-shopping-bag {
	font-size: 2rem;
	margin-right: 15px;
}

#cart_btn_block div p {
	position: absolute;
	display: block;
	height: 100%;
	width: 100%;
	top: 0;
}

#cart_btn_block div p a {
	display: block;
	height: 100%;
	width: 100%;
	text-align: center;
	line-height: 60px;
}

#cart_add a {
	background-color: #000;
	color: #FFFFFF;
}

#cart_favorite a {
	background-color: #eee;
	color: #B50003;
	border-left: 1px solid #FFFFFF;
}

#cart_code {
	color: #999999;
	margin-top: 5px;
}

#color_unselected,
#size_unselected {
	display: none;
	font-size: 0.8rem;
	color: #B50003;
}

#item_spec_price {
	margin-top: 20px;
}

#AmazonPayButton1 {
	margin: 0 auto !important;
}

/*ă‚³ăƒ¼ăƒ‡ăƒªă‚¹ăƒˆ-------------------------------------------------------*/
.code_list {
	display: flex;
	flex-wrap: wrap;
}

.code_list li {
	width: 186px;
	margin-right: 30px;
	margin-bottom: 30px;
}

.code_list li:nth-child(5n) {
	margin-right: 0;
}

.code_list .list_pict {
	margin-bottom: 8px;
	position: relative;
	width: 100%;
}

.code_list .list_pict:before {
	content: "";
	display: block;
	padding-top: 133.4%;
}

.code_list .list_pict div {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

/*ă‚³ăƒ¼ăƒ‡ă‚£ăƒăƒ¼ăƒˆ------------------------------------------------*/
#coordinate_txt {
	margin-top: 20px;
	color: #808080;
	position: relative;
}

#coordinate_icon {
	position: absolute;
	right: 0;
	top: 0;
}

#coordinate_date {
	color: #000000;
	margin-bottom: 10px;
}

#coordinate_tit1 {
	font-size: 2.0rem;
	margin-bottom: 20px;
	font-weight: 300;
}

#coordinate_txt {
	margin-bottom: 30px;
}

#coordinate_tit2 {
	font-size: 2.0rem;
	font-weight: 300;
	margin-bottom: 40px;
}

#coordinate_item_list {
	display: flex;
	flex-wrap: wrap;
}

#coordinate_item_list li {
	width: 28%;
	margin-right: 8%;
	margin-bottom: 50px;
}

#coordinate_item_list li:nth-child(3n) {
	margin-right: 0%;
}

/*ăƒ«ăƒƒă‚¯ăƒ–ăƒƒă‚¯ăƒªă‚¹ăƒˆ-------------------------------------------------------*/
.look_list {
	display: flex;
	flex-wrap: wrap;
}

.look_list li {
	width: 240px;
	margin-right: 30px;
	margin-bottom: 30px;
}

.look_list li:nth-child(4n) {
	margin-right: 0;
}

.look_list .list_pict {
	margin-bottom: 8px;
	position: relative;
	width: 100%;
}

.look_list .list_pict:before {
	content: "";
	display: block;
	padding-top: 150%;
}

.look_list .list_pict div {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

#look_txt {
	line-height: 250%;
}

#collection_list ul {
	display: flex;
	font-size: 1.4rem;
	padding: 15px 0;
	border-bottom: 1px solid #d5d5d5;
}

#collection_list ul:first-child {
	border-top: 1px solid #d5d5d5;
}

#collection_list ul li {
	margin-right: 10px;
}

#collection_list ul li a {
	color: #d5d5d5;
}

#stock_list dl {
	padding: 15px 0;
	border-bottom: 1px solid #d5d5d5;
}

#stock_list dl:first-child {
	border-top: 1px solid #d5d5d5;
}

#stock_list dt {
	font-size: 1.4rem;
	cursor: pointer;
	display: block;
	background: url('../images/ico_arrow_down.gif') center right 10px no-repeat;
}

#stock_list dt.list_open {
	background: url('../images/ico_arrow_up.gif') center right 10px no-repeat;
}

#stock_list dd {
	display: none;
	padding-top: 20px;
}

#stock_list dd li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 10px;
}

#stock_list dd li p:first-child {
	width: 25%;
}

#stock_list dd li p:nth-child(2) {
	width: 60%;
}

#stock_list dd li p:nth-child(3) {
	width: 15%;
	text-align: right;
}

#lookbook_tit {
	position: fixed;
	top: 60px;
	left: auto;
	margin-left: 1080px;
}

/*ă‚«ăƒ¼ăƒˆ-----------------------------------------------------------------*/
#undercolumn {
	margin-top: 13px;
}

#cart_point_announce {
	background-color: #f7f7f7;
	padding: 25px;
	line-height: 200%;
	margin-bottom: 30px;
}

#cart_inner_txt {
	line-height: 200%;
	margin-bottom: 30px;
}

#cart_flow {
	width: 100%;
	height: 61px;
	margin-bottom: 50px;
}

.cart_flow1 {
	background: url(../images/cart_flow1.gif) no-repeat;
}

.cart_flow2 {
	background: url(../images/cart_flow2.gif) no-repeat;
}

.cart_flow3 {
	background: url(../images/cart_flow3.gif) no-repeat;
}

#cart_flow ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

#cart_flow ul li {
	width: 33.3%;
	line-height: 61px;
	text-align: center;
}

#cart_flow ul li.op40 {
	opacity: 0.3;
}

#quantity_level {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

#quantity_level li {
	min-width: 11px;
	text-align: center;
}

#quantity_level li:nth-child(2) {
	padding: 0 10px;
}

#quantity_level li a img {
	vertical-align: middle;
}

.cart_item_txt {
	line-height: 250%;
}

#block_login {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#block_login section {
	width: 48%;
}

.block_login_inner {
	padding: 40px;
	border: 1px solid #e4e4e4;
	height: 284px;
}

#block_login_form li {
	margin-bottom: 15px;
}

#block_login_form li:last-child {
	margin-bottom: 0px;
}

.logintext {
	margin-bottom: 35px;
}

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

.cart_btn_area li {
	margin: 0 10px;
}

#cart_form_input .attention p {
	margin-bottom: 10px;
}

.information {
	background-color: #f7f7f7;
	padding: 25px;
	line-height: 200%;
}

.cart_attention {
	font-size: 1rem;
	line-height: 150%;
	margin-top: 10px;
}

.use_regist_card {
	border-bottom: 1px solid #e4e4e4;
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.card_list li {
	border-bottom: 1px dotted #e4e4e4;
	margin-bottom: 20px;
	padding-bottom: 20px;
}

#cart_amazonpay {
	text-align: center;
	width: 100%;
	padding: 35px;
	box-sizing: border-box;
	border: 40px solid #f7f7f7;
	margin-bottom: 60px;
}

.amazonpay-button-parent-container {
	margin: 0 auto;
}

/*ăƒ—ăƒ©ă‚¤ăƒă‚·ăƒ¼ăƒăƒªă‚·ăƒ¼-------------------------------*/
#privacy dt {
	font-weight: 700;
	margin-bottom: 10px;
}

#privacy dd {
	padding-left: 10px;
	margin-bottom: 15px;
}

/*ă‚·ăƒ§ăƒƒăƒ”ăƒ³ă‚°ă‚¬ă‚¤ăƒ‰-----------------------------------*/
#qlist {
	border: 1px solid #e4e4e4;
	font-size: 1.4rem;
	padding: 30px;
	text-align: center;
	width: 100%;
	margin-bottom: 40px;
}

#qlist dt {
	width: 100%;
}

#qlist dd {
	display: none;
	font-size: 1.2rem;
	text-align: left;
	border-top: 1px solid #e4e4e4;
	margin-top: 30px;
	padding-top: 30px;
}

#qlist dd div {
	display: flex;
	flex-wrap: nowrap;
}

#qlist dd ul {
	width: 50%;
	list-style-type: square;
	line-height: 200%;
	list-style-position: inside;
}

.shoppingguide {
	letter-spacing: 1px;
}

/*about-----------------------------------------*/
.whatslifes {
	width: 70%;
	margin: 40px auto 0 auto;
}

.whatslifes h2 {
	margin-bottom: 50px;
}

.whatslifes p {
	margin-bottom: 50px;
	line-height: 300%;
}

/*ă‚·ăƒ§ăƒƒăƒ—----------------------------------------*/
#shop_block {
	display: flex;
	flex-wrap: wrap;
}

#shop-title {
	width: 390px;
}

#shop_left {
	width: 660px;
}

.shop-detail {
	overflow: hidden;
	margin-bottom: 80px;
	padding-bottom: 80px;
	border-bottom: 1px solid #e4e4e4;
}

.shop-detail:last-child {
	margin-bottom: 0px;
	padding-bottom: 0px;
	border-bottom: none;
}

.swiper-pagination-thumbs01,
.swiper-pagination-thumbs02,
.swiper-pagination-thumbs03 {
	display: flex;
	flex-wrap: wrap;
	margin-top: 5px !important;
}

.swiper-pagination-thumbs01 div,
.swiper-pagination-thumbs03 div {
	width: 156px;
	margin-right: 12px;
	cursor: pointer;
}

.swiper-pagination-thumbs02 div {
	width: 122.4px;
	margin-right: 12px;
	cursor: pointer;
}

.swiper-pagination-thumbs01 div:last-child,
.swiper-pagination-thumbs02 div:last-child,
.swiper-pagination-thumbs03 div:last-child {
	margin-right: 0px;
}

.shop-detail .swiper-pagination-thumb-active img {
	opacity: 0.6;
}

.shop_name {
	font-size: 1.6rem;
	font-weight: 300;
	line-height: 210%;
	margin: 30px 0;
}

.shop_name span {
	display: block;
	font-size: 1.3rem;
}

.left-side p {
	line-height: 200%;
}

.left-side p span {
	width: 85px;
	display: inline-block;
}

/*ăƒžă‚¤ăƒšăƒ¼ă‚¸-------------------------------------------*/
#mypage_block {
	margin-top: 13px;
}

#mypagecolumn {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 30px;
	letter-spacing: normal;
}

#mynavi_area {
	width: 100%;
	padding: 30px;
	margin-bottom: 30px;
	background-color: #f8f8f8;
}

#mycontents_area {
	width: 100%;
}

#mynavi_area header {
	border-bottom: 1px solid #d5d5d5;
	margin-bottom: 30px;
	padding-bottom: 30px;
}

.mynavi_list {
	display: flex;
	justify-content: space-between;
}

.mypage_table td,
.mypage_table th {
	padding: 15px;
}

.mypage_header {
	padding: 40px 0 35px 0;
	border-top: 1px solid #d5d5d5;
	border-bottom: 1px solid #d5d5d5;
}

.mypage_header h3 {
	font-weight: 700;
	margin-bottom: 20px;
}

#point_txt {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
}

#point_txt li:first-child span {
	font-size: 3.0rem;
	font-weight: 700;
	padding-right: 10px;
}

#point_txt li:first-child {
	margin-right: 40px;
}

#reserve_date {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

#reserve_date ul {
	width: 70%;
}

.select_deliv_date {
	display: flex;
	align-items: center;
}

.inline_select {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.my_page_orderlist {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.order_list_img {
	width: 40%;
}

.order_list_txt {
	width: 55%;
}

/*åˆ¥ă‚¦ă‚¤ăƒ³ăƒ‰ă‚¦ăƒăƒƒăƒ—ă‚¢ăƒƒăƒ—----------------------------------*/
#windowcolumn {
	padding: 20px;
}

/*ă‚«ăƒŸăƒ³ă‚°ă‚¹ăƒ¼ăƒ³--------------------------------------------*/
.coming_header {
	margin-bottom: 40px;
}

.coming_txt {
	margin-bottom: 40px;
}

.tit_sub_default {
	font-size: 2.0rem;
	font-weight: 300;
	margin-bottom: 30px;
}

.cs_item_list {
	margin-bottom: 50px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.cs_item_list li {
	width: 30%;
	margin-bottom: 40px;
}

/*ăƒˆăƒƒăƒ—ă‚¹ăƒ©ă‚¤ăƒ€ăƒ¼-----------------------------------------*/
#top_slider_outer {
	width: 100%;
	overflow: hidden;
}

/*ă‚µă‚¤ăƒ‰ă‚«ăƒ†ă‚´ăƒª-----------------------------------------*/
#search_category {
	margin-top: 30px;
}

.search_block {
	border-bottom: 1px solid #CFCFCF;
	margin: 0 15px 0 0;
	padding: 5px 0;
}

.search_block:first-child {
	border-top: 1px solid #CFCFCF;
}

.search_block p {
	line-height: 250%;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: right;
}

.search_block p a {
	display: block;
	padding-right: 12%;
	background: url(../images/icon/ico_plus_default.png) center right no-repeat;
	background-size: 1.3rem;
}

.search_block p a.ico_min {
	background: url(../images/icon/ico_min_default.png) center right no-repeat;
	background-size: 1.3rem;
}

.search_list {
	text-align: right;
	line-height: 200%;
	display: none;
	width: 100%;
	padding-bottom: 20px;
}

.search_list li a {
	background: url(../images/icon/ico_arrow_mini.png) center right no-repeat;
	background-size: 1.2rem;
}

.search_list li a {
	display: block;
	padding-right: 12%;
}

#lp_link_list {
	font-size: 1.2rem;
}

html {
	font-size: 62.5%;
}

body {
	min-height: 150%;
	background: #fff;
	/*font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;*/
	font-family: 'Open Sans Condensed', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	color: #000000;
	line-height: 200%;
}

input::placeholder {
	color: #989898;
	font-family: 'Open Sans Condensed', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	letter-spacing: 2px;
}

input:-ms-input-placeholder {
	color: #989898;
	font-family: 'Open Sans Condensed', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	letter-spacing: 2px;
}

a {
	color: #000000;
	text-decoration: none;
	-webkit-transition: color 0.5s ease;
	-moz-transition: color 0.5s ease;
	-o-transition: color 0.5s ease;
}

a:hover {
	filter: alpha(opacity=60);
	opacity: 0.6;
}

.bghover {
	opacity: 1.0;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	outline: none;
}

.bghover:hover {
	opacity: 0.6 !important;
}

.fade_in {
	opacity: 0;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	-ms-transition: all 0.5s;
	transition: all 0.5s;
}

.fade_in.lazyloaded,
.fade_on {
	opacity: 1;
}

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

.subbox_inner {
	border-right: 1px solid #e4e4e4;
	border-left: 1px solid #e4e4e4;
	border-bottom: 1px solid #e4e4e4;
	padding: 30px;
}

.subbox_tit {
	background-color: #f6f6f6;
	line-height: 60px;
	padding: 0 20px;
	font-size: 1.2rem;
}

#undercolumn_error .message_area {
	display: flex;
	align-items: center;
	border: 1px solid #e4e4e4;
	padding: 30px;
	min-height: 20vh;
	text-align: center;
}

#undercolumn_error .message_area p {
	width: 100%;
	vertical-align: middle;
	text-align: center;
}

/*swiperテーマ上書き----------------------------------*/
.swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
	width: 100%;
	text-align: center;
	margin-top: 22px;
}

.swiper-pagination-bullet {
	width: 6px;
	height: 6px;
	display: inline-block;
	border-radius: 100%;
	border: 1px solid #2B2B2B;
	background: #FFF;
}

.swiper-pagination-bullet-active {
	background: #000;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 0 6px;
}

/*Title--------------------------------------------------*/
.tit_default {
	font-size: 2.0rem;
	font-weight: 300;
}

.tit_default span {
	padding-left: 35px;
}

.tit_mini {
	font-size: 1.2rem;
	margin-bottom: 15px;
}

.tit_mini_center_border {
	font-size: 1.4rem;
	text-align: center;
	border-bottom: 1px solid #d6d6d6;
	padding-bottom: 20px;
}

.tit_bg_gray {
	background-color: #f7f7f7;
	padding: 25px;
}

.tit_bdr {
	padding-bottom: 15px;
	border-bottom: 1px solid #e4e4e4;
}

/*ページング------------------------------------------*/
.relative {
	position: relative;
}

.paging {
	width: 100%;
	border-top: 1px solid #d3d6d6;
	padding-top: 45px;
	padding-bottom: 45px;
	display: flex;
	flex-wrap: wrap;
	font-size: 1.4rem;
}

.prev_btn,
.next_btn {
	width: 20%;
	display: block;
}

.prev_btn {
	text-align: left;
}

.next_btn {
	text-align: right;
}

.page_btn {
	width: 60%;
	text-align: center;
}

.page_btn a,
.page_btn strong {
	display: inline-block;
	padding: 3px 5px;
	margin: 0 10px;
}

.page_btn a {
	border-bottom: 1px solid #d3d6d6;
}

/*ポップアップ*/
#popup_area {
	font-size: 1.2rem;
	line-height: 200%;
	padding: 55px;
	letter-spacing: 2px;
}

/* 目次 -------------------------------------------------

・リンク設定
・共通クラス
・サイト共通
・ヘッダ ・メニュー ・コンテンツ ・フッタ

------------------------------------------------- */
table {
	_line-height: 150%;
	font-size: 100%;
}

.floatL {
	float: left;
}

.floatR {
	float: right;
}

.clear {
	clear: both;
	font-size: 0px;
	line-height: 0%;
	height: 0px;
	text-indent: -9999px;
}

.clearer {
	clear: both;
}

.v_middle {
	vertical-align: middle;
}

/* clearfixハック */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}

.fontS {
	font-size: 1.2rem;
}

.fontM {
	font-size: 1.4rem;
}

.fontL {
	font-size: 1.8rem;
}

.fontLL {
	font-size: 2.0rem;
}

.font_gray {
	color: #999999;
}

.font_bold {
	font-weight: bold;
}

.attention {
	color: #CF0003;
}

.red {
	color: #CF0003;
}

a.btn_gray {
	display: inline-block;
	width: 140px;
	color: #FFF;
	height: 35px;
	background-color: #000000;
	line-height: 35px;
	text-align: center;
}

.btn_gray_S {
	display: inline-block;
	width: 100%;
	color: #FFF;
	height: 30px;
	background-color: #000000;
	line-height: 30px;
	text-align: center;
	cursor: pointer;
}

.btn_gray_norm {
	display: inline-block;
	width: 100%;
	color: #FFF;
	height: 53px;
	background-color: #000000;
	line-height: 53px;
	text-align: center;
	cursor: pointer;
}

.btn_white_norm {
	display: inline-block;
	width: 100%;
	color: #000;
	height: 53px;
	background-color: #FFF;
	border: 1px solid #e4e4e4;
	line-height: 53px;
	text-align: center;
	cursor: pointer;
}

.btn_gray_mini {
	display: inline-block;
	padding: 0 10px;
	color: #FFF;
	height: 25px;
	background-color: #000000;
	line-height: 25px;
	text-align: center;
	letter-spacing: normal;
	font-size: 1rem;
}

.btn_lgray_norm {
	display: inline-block;
	width: 100%;
	color: #FFF;
	height: 53px;
	background-color: #bababa;
	line-height: 53px;
	text-align: center;
	cursor: pointer;
}

.btn_area_center {
	text-align: center;
}

.w270 {
	width: 270px !important;
}

/* End hide from IE-mac */
/*配置設定クラス*/
.alignL {
	text-align: left !important;
}

.alignC {
	text-align: center !important;
}

.alignR {
	text-align: right !important;
}

.mg_5 {
	margin: 5px !important;
}

.mg_lr5 {
	margin: 0px 5px !important;
}

.mg_t5 {
	margin-top: 5px !important;
}

.mg_b5 {
	margin-bottom: 5px !important;
}

.mg_l5 {
	margin-left: 5px !important;
}

.mg_r5 {
	margin-right: 5px !important;
}

.mg_10 {
	margin: 10px !important;
}

.mg_lr10 {
	margin: 0px 10px !important;
}

.mg_t10 {
	margin-top: 10px !important;
}

.mg_b10 {
	margin-bottom: 10px !important;
}

.mg_l10 {
	margin-left: 10px !important;
}

.mg_r10 {
	margin-right: 10px !important;
}

.mg_12 {
	margin: 12px !important;
}

.mg_lr12 {
	margin: 0px 12px !important;
}

.mg_t12 {
	margin-top: 12px !important;
}

.mg_b12 {
	margin-bottom: 12px !important;
}

.mg_l12 {
	margin-left: 12px !important;
}

.mg_r12 {
	margin-right: 12px !important;
}

.mg_15 {
	margin: 15px !important;
}

.mg_lr15 {
	margin: 0px 15px !important;
}

.mg_t15 {
	margin-top: 15px !important;
}

.mg_b15 {
	margin-bottom: 15px !important;
}

.mg_l15 {
	margin-left: 15px !important;
}

.mg_r15 {
	margin-right: 15px !important;
}

.mg_20 {
	margin: 20px !important;
}

.mg_lr20 {
	margin: 0px 20px !important;
}

.mg_t20 {
	margin-top: 20px !important;
}

.mg_b20 {
	margin-bottom: 20px !important;
}

.mg_l20 {
	margin-left: 20px !important;
}

.mg_r20 {
	margin-right: 20px !important;
}

.mg_25 {
	margin: 25px !important;
}

.mg_lr25 {
	margin: 0px 25px !important;
}

.mg_t25 {
	margin-top: 25px !important;
}

.mg_b25 {
	margin-bottom: 25px !important;
}

.mg_l25 {
	margin-left: 25px !important;
}

.mg_r25 {
	margin-right: 25px !important;
}

.mg_30 {
	margin: 30px !important;
}

.mg_lr30 {
	margin: 0px 30px !important;
}

.mg_t30 {
	margin-top: 30px !important;
}

.mg_b30 {
	margin-bottom: 30px !important;
}

.mg_l30 {
	margin-left: 30px !important;
}

.mg_r30 {
	margin-right: 30px !important;
}

.mg_40 {
	margin: 40px !important;
}

.mg_lr40 {
	margin: 0px 40px !important;
}

.mg_t40 {
	margin-top: 40px !important;
}

.mg_b40 {
	margin-bottom: 40px !important;
}

.mg_l40 {
	margin-left: 40px !important;
}

.mg_r40 {
	margin-right: 40px !important;
}

.mg_t50 {
	margin-top: 50px !important;
}

.mg_b50 {
	margin-bottom: 50px !important;
}

.mg_l50 {
	margin-left: 50px !important;
}

.mg_r50 {
	margin-right: 50px !important;
}

.mg_t60 {
	margin-top: 60px !important;
}

.mg_b60 {
	margin-bottom: 60px !important;
}

.mg_l60 {
	margin-left: 60px !important;
}

.mg_r60 {
	margin-right: 60px !important;
}

.mg_t70 {
	margin-top: 70px !important;
}

.mg_b70 {
	margin-bottom: 70px !important;
}

.mg_l70 {
	margin-left: 70px !important;
}

.mg_r70 {
	margin-right: 70px !important;
}

.mg_t80 {
	margin-top: 80px !important;
}

.mg_b80 {
	margin-bottom: 80px !important;
}

.mg_l80 {
	margin-left: 80px !important;
}

.mg_r80 {
	margin-right: 80px !important;
}

.pd_5 {
	padding: 5px !important;
}

.pd_lr5 {
	padding: 0px 5px !important;
}

.pd_t5 {
	padding-top: 5px !important;
}

.pd_b5 {
	padding-bottom: 5px !important;
}

.pd_l5 {
	padding-left: 5px !important;
}

.pd_r5 {
	padding-right: 5px !important;
}

.pd_10 {
	padding: 10px !important;
}

.pd_lr10 {
	padding: 0px 10px !important;
}

.pd_t10 {
	padding-top: 10px !important;
}

.pd_b10 {
	padding-bottom: 10px !important;
}

.pd_l10 {
	padding-left: 10px !important;
}

.pd_r10 {
	padding-right: 10px !important;
}

.pd_15 {
	padding: 15px !important;
}

.pd_lr15 {
	padding: 0px 15px !important;
}

.pd_t15 {
	padding-top: 15px !important;
}

.pd_b15 {
	padding-bottom: 15px !important;
}

.pd_l15 {
	padding-left: 15px !important;
}

.pd_r15 {
	padding-right: 15px !important;
}

.pd_20 {
	padding: 20px !important;
}

.pd_lr20 {
	padding: 0px 20px !important;
}

.pd_t20 {
	padding-top: 20px !important;
}

.pd_b20 {
	padding-bottom: 20px !important;
}

.pd_l20 {
	padding-left: 20px !important;
}

.pd_r20 {
	padding-right: 20px !important;
}

.pd_0 {
	padding: 0 !important;
}

.last_item {
	margin-right: 0px !important;
}

.initBgImg {
	text-indent: -9999px;
}

input,
button,
textarea,
select {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	outline: none;
	background: transparent;
}

select.sp_default_select {
	height: 3.5em;
	width: 100%;
	border-radius: 0px;
	border: solid 1px #ccc;
	background: url(../images/common/select_btn.gif) no-repeat right 5px center;
	background-size: contain;
	background-color: #FFF;
	padding-right: 25px;
	padding-left: 10px;
}

input::placeholder {
	color: #cacaca;
}

/* IE */
input:-ms-input-placeholder {
	color: #cacaca;
}

/* Edge */
input::-ms-input-placeholder {
	color: #cacaca;
}

input.disabled_input {
	background-color: #D1D1D1 !important;
	pointer-events: none;
}

input[type="submit"] {
	letter-spacing: 2px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea {
	width: 100%;
	background-color: #ffffff;
	height: 42px;
	padding: 10px;
	font-size: 1.3rem;
	border: 1px solid #e4e4e4;
}

textarea {
	height: auto;
	padding: 20px;
}

input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
}

.gray_input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px #f7f7f7 inset;
}

.gray_input {
	width: 100%;
	background-color: #f7f7f7;
	height: 42px;
	padding: 10px;
	font-size: 1.3rem;
}

input[type="radio"]:checked,
input[type="checkbox"]:checked {
	background-color: #333 !important;
}

input[type="radio"],
input[type="checkbox"],
input[type="check"] {
	padding: 5px;
	line-height: 1.5;
	margin-right: 0.5em;
}

input[type="radio"] {
	border-radius: 8px;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	vertical-align: middle;
	border: solid 2px #ccc;
	margin: 0;
}

input[type="checkbox"] {
	border-radius: 2px;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	vertical-align: middle;
	border: solid 2px #ccc;
	margin: 0;
}

.select_n {
	overflow: hidden;
	width: 100%;
	position: relative;
	border: 1px solid #e4e4e4;
	background: #ffffff;
	height: 42px;
	display: inline-block;
}

.select_n select {
	width: 100%;
	height: 100%;
	padding-right: 1em;
	cursor: pointer;
	text-indent: 0.01px;
	text-overflow: ellipsis;
	border: none;
	outline: none;
	background: transparent;
	background-image: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.select_n select::-ms-expand {
	display: none;
}

.select_n::before {
	position: absolute;
	top: 1.5em;
	right: 0.9em;
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #666666;
	pointer-events: none;
}

.select_n select {
	padding: 8px 38px 8px 8px;
	color: #666666;
}

.select_row {
	display: flex;
	flex-wrap: wrap;
}

.select_row li {
	width: 21%;
	margin-right: 1.5%;
}

.w_full {
	width: 310px !important;
}

.w_half {
	width: 180px !important;
}

.w_short {
	width: 130px !important;
}

table {
	margin-bottom: 60px;
	border-top: 1px solid #e4e4e4;
	border-left: 1px solid #e4e4e4;
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	box-sizing: border-box;
	line-height: 180%;
}

table th {
	padding: 15px;
	border-right: 1px solid #e4e4e4;
	border-bottom: 1px solid #e4e4e4;
	color: #333;
	background-color: #f7f7f7;
	font-weight: normal;
	vertical-align: middle;
}

.th_white th {
	background-color: #ffffff;
}

table td {
	padding: 35px;
	border-right: 1px solid #e4e4e4;
	border-bottom: 1px solid #e4e4e4;
	vertical-align: middle;
}

table td.thin {
	padding: 15px;
}

/* ���ワ申膰削申
----------------------------------------------- */
div#undercolumn_shopping table th[scope=col] {
	text-align: center;
}

div#undercolumn_shopping table.delivname th {
	width: 155px;
}

/* MY膵�紕刻申膵э集 */
div#mycontents_area table th {
	text-align: left;
}

div#mycontents_area table th.alignR {
	text-align: right;
}

div#mycontents_area table th.alignL {
	text-align: left;
}

div#mycontents_area table th.alignC {
	text-align: center;
}

div#mycontents_area table th.resulttd {
	text-align: right;
}

div#mycontents_area table caption {
	padding: 8px;
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	color: #000;
	background-color: #f0f0f0;
	text-align: left;
	font-weight: bold;
}

/* ============================= */
.box-step {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.box-step label,
.box-step a {
	display: block;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid currentColor;
	font-weight: 600;
	text-align: center;
	align-content: center;
	line-height: 1;
	position: relative;
	color: #D1D1D1;
	font-size: 1.4rem;
}

.box-step span {
	flex-grow: 1;
	height: 1px;
	background-color: #D1D1D1;
}

.box-step span.active {
	background-color: #000000;
}

.box-step label.cur-step {
	color: #000000;
	border-color: #000000;
}

.box-step a.f-step {
	color: #000000;
	background-color: #000000;
}

.box-step a.f-step::after {
	content: '';
	display: block;
	width: 14px;
	height: 7px;
	border-left: 1.5px solid #fff;
	border-bottom: 1.5px solid #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -75%) rotate(-45deg);
}

.box-h-s {
	display: flex;
	gap: 24px;
	justify-content: space-between;
}

.box-h-s .des-step {
	flex-shrink: 0;
	flex-basis: 300px
}

.box-h-s .gallery-preview {
	/* flex-grow: 1; */
	/* width: calc(100% - 324px); */
	/* max-width: 300px; */
}

.box-h-s .gallery-preview>label {
	font-weight: 700;
}

.box-h-s .gallery-preview .btn-img-photo {
	background-color: #fff;
	border: 1px solid #D2D2D2;
	padding: 5px;
	transition: border .3s;
}

.box-h-s .gallery-preview .btn-img-photo span {
	text-decoration: underline;
}

.box-h-s .gallery-preview .btn-img-photo:hover {
	border-color: #000;
}

.box-h-s .gallery-preview .btn-img-photo:hover span {
	text-decoration: unset;
}

.box-h-s .gallery-preview .gallerySwiper {
	border: 1px solid #D2D2D2;
}

.gallerySwiper .swiper-slide {
	width: 10%;
}

.txt-upper {
	text-transform: uppercase;
}

.name_menu {
	font-size: 1.4rem;
	font-weight: 400;
}

.name_menu span {
	margin-left: 20px;
}

.large {
	width: 175px;
	height: 175px;
	position: absolute;
	border-radius: 100%;
	box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
		0 0 7px 7px rgba(0, 0, 0, 0.25),
		inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
	display: none;
	/* Ẩn kính lúp mặc định */
	z-index: 3;
	background-repeat: no-repeat;
}

.des-step {
	font-size: 1.2rem;
	text-transform: uppercase;
}

.des-step p:nth-child(n+2) {
	margin-top: 16px;
}

/*To solve overlap bug at the edges during magnification*/
.small {
	/* display: block; */
}

.mt-3 {
	margin-top: 30px;
}

.text-center {
	text-align: center;
}

.pdt-item {
	/* width: fit-content; */
	position: relative;
	flex: calc(25% - 24px / 4* 3) 0 0;
}


.pdt-item .card-top {
	position: relative;
	border: 1px solid #D2D2D2;
	line-height: 0;
	/* aspect-ratio: 1 / 1; */
}

.pdt-item .card-top .sold_out {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	text-align: center;
	align-content: center;
	background-color: #00000040;
	font-size: 1.2rem;
	font-weight: 500;
	color: #fff;
}

.pdt-item.selected .card-top {
	border: 2px solid #000;
}

.pdt-item .card-top .img {
	overflow: hidden;
	display: block;
	aspect-ratio: 1/1;
}

.pdt-item .card-top .img img {
	width: 100%;
	scale: 1;
	-webkit-transition: scale 0.5s ease;
	-moz-transition: scale 0.5s ease;
	-o-transition: scale 0.5s ease;
	transition: scale .5s;
}

.pdt-item .card-top .img:hover img {
	opacity: 1;
	scale: 1.4;
}

.pdt-item .card-top .img:hover {
	opacity: 1;
}

.pdt-item.selected .card-top .img img {
	scale: 1.4;
}

.pdt-item .card-bottom h2 {
	font-weight: 600;
}

.pdt-item .cover-3 {
	position: relative;
	height: auto;
	border: 1px solid #dfdfdf83;
	z-index: 1;
}

.pdt-item .cover-2 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: auto;
	z-index: 3;
}

.pdt-item .cover-1 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: auto;
	z-index: 4;
}

#menu_on {
	display: none;
}

.container-product,
.list-model {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
	gap: 24px 12px;
}

.detail-wp {
	/* display: flex;
	gap: 24px; */
	display: grid;
	gap: 24px;
	grid-template-columns: minmax(53%, 450px) auto;
}

.detail-wp #view-scroll {
	position: sticky;
	top: 0;
	transition: padding .5s;
}

.detail-wp .gallery-dt {
	max-width: 500px;
}

.view-p {
	position: relative;
	max-width: 500px;
	max-height: 500px;
	border: 1px solid #D2D2D2;
	width: 100%;
	text-align: -webkit-center;
	aspect-ratio: 1/1;
	overflow: hidden;
}

.view-p .img-cover3 {
	position: relative;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 0;
	display: block;
}

.view-p .img-cover2,
.view-p .img-cover1 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
}

.view-p .img-cover2 {
	z-index: 1;
}

.view-p .img-cover1 {
	z-index: 2;
}

.type_msg {
	background-color: #fff;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
}

.type_msg.show {
	z-index: 0;
}

.btn_type_msg {
	text-align: -webkit-center;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	z-index: 2;
}

.btn_type_msg button {
	width: 32%;
	display: inline-block;
	border: 1px solid #666666;
	cursor: pointer;
	padding: 6px 12px;
	background-color: #fff;
	text-wrap: nowrap;
}

.btn_type_msg button:hover {
	background-color: #000;
	color: #fff;
}

.btn_type_msg button.active {
	background-color: #000;
	color: #fff;
}

/* .type_msg .local_stone, */
/* .type_msg .local_model, */
.type_msg .imglocal_type {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #fff;
	z-index: -1;
	opacity: 0;
	transition: opacity .5s;
}

.type_msg .imglocal_type.show {
	z-index: 0;
	opacity: 1;
}

#container-mixi {
	transform: translateY(calc(-100% - 12px));
}

#container-mixi .bl-mixi {
	width: 250px;
	height: 40px;
	margin: 0 auto;
	position: relative;
	color: #f0f0f0;
}

#container-mixi .bl-mixi::before,
#container-mixi .bl-mixi::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	width: 20px;
	border: 1px solid currentColor;
	background-color: currentColor;
	filter: brightness(0.9);
	/* box-shadow: rgb(0, 0, 0) 0px 0px 1px; */
}

#container-mixi .box-mixi {
	position: relative;
	background-color: currentColor;
	fill-opacity: 0.5;
	border: solid currentColor;
	border-width: 1px 0 1px;
	height: 100%;
	width: 100%;
}

#container-mixi .box-mixi .txt-mixi {
	color: #000;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#container-mixi .bl-mixi::before {
	left: 0;
	transform: translateX(-100%);
	border-radius: 100px 0 0 100px;
}

#container-mixi .bl-mixi::after {
	right: 0;
	transform: translateX(100%);
	border-radius: 0 100px 100px 0;
}

.info-dt {
	min-width: 200px;
}

.info-dt .name {
	font-size: 20px;
}

.name-title {
	margin-bottom: 6px;
}

.name-title label {
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
}

#material {
	margin-top: 16px;
}

.container-material,
.container-type {
	position: relative;
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(85px, 1fr))
}

.container-size {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(40px, 1fr))
}

.size button {
	min-width: 39px;
	aspect-ratio: 1 / 1;
	padding: 2px;
	border: 1px solid #cacaca;
	cursor: pointer;
	font-size: 1.2rem;
	color: #000;
}

.type .box-type,
.material .box-material {
	flex: calc(100%/4 - 12px/4*3) 0 0;
}

.material button,
.type button {
	width: 100%;
	aspect-ratio: 1/1;
	height: fit-content;
	line-height: 0;
	cursor: pointer;
	overflow: hidden;
	border: 1px solid #CFCFCF;
	transition: opacity .5s;
}

.box-type label,
.box-material label {
	display: -webkit-box;
	/* -webkit-line-clamp: 1; */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-word;
	font-size: 1rem;
	line-height: 1.5;
	text-align: center;
}

/* button img {
	width: 100%;
} */
.classify {
	overflow: hidden;
}

#type-silver {
	position: relative;
}

/* #preview-engraved {
	position: absolute;
	z-index: 1;
	width: 130px;
	left: 5000px;
	opacity: 0;
	transition: opacity .5s;
} */

#preview-engraved .box-pre-engraved {
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	text-align: center;
	background-color: #fff;
}

.item-preview p {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 20px;
}

#size,
#go_local,
#message_inside {
	scroll-margin-top: 300px;
}

.type button:nth-child(5n),
.border button:nth-child(5n) {
	margin-right: 0;
}

.size button:hover,
.material button:hover,
.type button:hover,
.border button:hover {
	opacity: 70%;
}

/* #type-silver.show .type button,
#type-gold.show .type button,
#silver.show .border button,
#gold.show .border button {
	opacity: 100%;
} */

.size button.active,
.material button.active,
.type button.active,
.border button.active {
	/* box-shadow: rgba(0, 0, 0, 1) 0px 0px 0px 1px; */
	border-color: #000000;
}

.type button:disabled {
	opacity: 30%;
	cursor: not-allowed;
}

.view-p>.imglocal {
	display: none;
	background-color: #fff;
}

.header-option {
	display: flex;
	gap: 4px;
	margin-bottom: 4px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.header-option select {
	padding: 6px 8px;
	border: solid #DADADA;
	border-width: 1px;
	flex: 50% 1;
	cursor: pointer;
}

.header-option .dropdown {
	flex: 50% 1;
}

.dropdown {
	position: relative;
	border: solid 1px #DADADA;
	cursor: pointer;
}

.dropdown .title-dropdown {
	position: relative;
	padding: 6px 8px;
}

.dropdown .title-dropdown i {
	position: absolute;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 8px;
	color: #484C4F;
}

.dropdown .dropdown-list {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 2;
	display: none;
	box-shadow: #DADADA 0 0 1px 1px;
	max-height: 345px;
	overflow-y: auto;
}

/* width */
.dropdown-list::-webkit-scrollbar {
	width: 5px;
}

/* Track */
.dropdown-list::-webkit-scrollbar-track {
	background: #f1f1f1;
}

/* Handle */
.dropdown-list::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 50px;
}

/* Handle on hover */
.dropdown-list::-webkit-scrollbar-thumb:hover {
	background: #555;
}

.dropdown .dropdown-list.show {
	display: block;
}

.dropdown .drop-box {
	/* padding: 5px; */
	background-color: #fff;
}

.dropdown .drop-box.icon {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 3px;
}

.dropdown .drop-box.icon span {
	max-height: 35px;
	padding: 6px 8px;
	text-align: center;
	align-content: center;
	display: none;
}

.dropdown .drop-box.icon span.span-4 {
	grid-column: span 4;
}

.dropdown .drop-box.icon span:hover {
	background-color: #e2e2e2;
}

#local {
	display: flex;
	flex-wrap: wrap;
}

#local p {
	flex: 33.33% 0;
}

.dropdown .drop-box.list p {
	padding: 6px 8px;
	text-wrap: nowrap;
}

.dropdown .drop-box.list p:hover {
	background-color: #e2e2e2;
}

.dropdown .drop-box.list p img {
	vertical-align: bottom;
	margin-right: 2px;
	max-width: 57px;
}

#go_local .box-local {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

.box-local .dropdown,
.box-local button {
	flex: 150px 1 0;
}

#go_local button {
	display: block;
	padding: 6px 8px;
	background-color: #000000;
	color: #fff;
	cursor: pointer;
	width: 100%;
	text-wrap: nowrap;
	transition: opacity .5s;
	display: none;
}

#go_local button:hover {
	opacity: .6;
}


.input-mixi #message_inside {
	resize: none;
	padding: 6px 8px;
	overflow: hidden;
	height: 35px;
	display: block;
	border: solid 1px #DADADA;
	/* overflow-x: ; */
}

.input-mixi #message_inside img {
	vertical-align: middle;
	margin: 0;
	width: fit-content;
}

.box-message {
	display: flex;
}

.box-message #message_inside {
	flex-grow: 1;
	text-wrap: nowrap;
	font-size: 1.8rem;
	text-align: left;
}

.box-message button {
	background-color: #000000;
	color: #fff;
	/* width: 32px; */
	padding: 10px;
	z-index: 1;
	cursor: pointer;
	display: block;
	transition: opacity .5s;
}

.box-message button:hover {
	opacity: .6;
}

.input-mixi .error {
	color: red;
	display: none;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%) translateY(calc(-100% - 8px));
	padding: 6px;
	max-width: 100%;
	width: max-content;
	box-shadow: 0 0 5px 0px #656565a3;
	border-radius: 6px;
	background-color: #fff;
	z-index: 2;
	cursor: pointer;
}

.input-mixi .error::before {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	position: absolute;
	bottom: 0;
	transform: translate(-50%, 50%) rotate(45deg);
	left: 50%;
	background: #fff;
	box-shadow: 3px 3px 4px -2px #656565a3;
}

#previewMsg p {
	position: relative;
	padding: 5px;
}

#previewMsg p:hover {
	background-color: #b1b1b131;
}

#previewMsg p:nth-last-child(n+2) {
	margin-bottom: 5px;
}

#previewMsg img {
	vertical-align: middle;
	width: fit-content;
	max-height: 30px;
}

#previewMsg p span:nth-child(1) {
	font-size: 1.8rem;
}



.fa-solid {
	line-height: normal;
}

#previewMsg tr .delMsg {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	cursor: pointer;
}

#previewMsg tr .delMsg:hover {
	background-color: #000;
	color: #fff;
}

#message_inside.placeholder::before {
	content: attr(data-placeholder);
	color: #cacaca;
	position: absolute;
	cursor: text;
	font-size: 1.2rem;
}

#message_inside:empty:before {
	content: attr(data-placeholder);
	/* Hiển thị placeholder từ thuộc tính data-placeholder */
	color: gray;
	pointer-events: none;
	font-size: 1.2rem;
}

.input-mixi {
	position: relative;
}

.input-mixi .dropdown-keyboard {
	position: absolute;
	top: 32px;
	background-color: #fff;
	z-index: 1;
	border: 1px solid #DADADA;
	display: none;
	justify-content: center;
	flex-wrap: wrap;
}

.input-mixi.active .dropdown-keyboard {
	display: flex;
}

.dropdown-keyboard {
	border-top: none;
	padding: 3px;
	text-align: center;
}

.dropdown-keyboard>span {
	border: 1px solid #DADADA;
	cursor: pointer;
	pointer-events: auto;
	display: inline-block;
	margin-top: -1px;
	margin-left: -1px;
	text-align: center;
	padding: 8px 3px;
	text-wrap: nowrap;
}

.dropdown-keyboard>span:hover {
	background-color: #eeeeeeb2;
	opacity: .7;
}

.dropdown-keyboard>span.kb-number {
	width: 24px;
}

.dropdown-keyboard>span.kb-char {
	width: 36px;
}

.dropdown-keyboard>span.kb-close {
	width: 40px;
	background-color: #8b8b8b;
	color: #fff;
}

.dropdown-keyboard.lower>.kb-char {
	text-transform: lowercase;
}

.kb-capslock.active {
	background-color: #000;
	color: #fff;
}

.kb-capslock.active:hover {
	background-color: #575757;
	color: #fff;
}

.text-input-mixi {
	position: relative;
}

.text-input-mixi #alert-error {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #6666667c;
	color: red;
	text-align: center;
	align-content: center;
}

#txt-mixi {
	font-size: 18px;
}

.border-bottom {
	border-bottom: 1px solid #DADADA;
	padding-bottom: 12px;
}

#noMsg {
	display: none;
	width: 100%;
	padding: 6px;
	background-color: #000;
	color: #fff;
	cursor: pointer;
	margin-top: 12px;
	transition: opacity .5s;
}

#noMsg:hover {
	opacity: .6;
}

.modal-popup {
	display: none;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	align-content: center;
	background-color: #0000006c;
	z-index: 100;
}

#btn-show-popup {
	border: 1px solid #DADADA;
	cursor: pointer;
	border-radius: 2px;
	padding: 12px;
}

.modal-popup aside {
	display: block;
	max-width: 480px;
	margin: auto;
}


.camera-container {
	position: relative;
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	background-color: #000000;
	overflow: hidden;
}

.camera-container video {
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 3 / 4;
}

.flip-horizontal {
	transform: scaleX(-1);
}

.camera-container canvas {
	display: none;
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 3 / 4;
}

.camera-container button {
	font-size: 16px;
	z-index: 2;
	cursor: pointer;
}

.camera-container img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: auto;
	height: 100%;
	/* Đảm bảo filter chiếm toàn bộ chiều cao */
	object-fit: cover;
	z-index: 1;
}

.camera-container #filter-3 {
	width: auto;
	height: 100%;
	object-fit: cover;
	clip-path: inset(20% 0 0 0);
}

#canvas {
	top: 0;
	left: 0;
}

#closeCamera {
	position: absolute;
	width: 30px;
	height: 30px;
	background-color: #c9c9c97e;
	border-radius: 50%;
	position: absolute;
	top: 10px;
	right: 10px;
	color: #fff;
}

#closeCamera:hover {
	scale: 1.05;
	transition: .5s;
}

#save,
#capture {
	width: 50px;
	height: 50px;
	background-color: #FFFFFF;
	border-radius: 50%;
	position: absolute;
	left: 50%;
	bottom: 15px;
	transform: translateX(-50%);
}

#capture:hover {
	background-color: #5f5f5f;
}

#capture:focus {
	background-color: #FFF;
}

#switchCamera,
#retake {
	position: absolute;
	width: 40px;
	height: 40px;
	background-color: #ffffff7e;
	border-radius: 50%;
	position: absolute;
	bottom: 20px;
}

#retake {
	right: 15px;
}

#switchCamera {
	left: 15px;
}

.f_btn {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
}

.f_btn button {
	border: 1px solid #000;
	padding: 6px;
	cursor: pointer;
	font-weight: 700;
	transition: .5s;
	color: #000;
}

.f_btn button:hover {
	opacity: 0.5;
	transition: .5s;
}

.f_btn button img {
	vertical-align: middle;
}

.f_btn button span {
	margin-left: 18px;
	font-size: 1rem;
	line-height: 2rem;
}

.f_btn button:focus {
	opacity: 1;
}

.btn-rotate.active {
	background-color: #000;
	color: white;
}

.btn-rotate.active img {
	filter: invert(1)
}

#cover-1 {
	transition: transform .5s;
}

.rotate90 {
	transform: rotate(90deg);
}

.rotate180 {
	transform: rotate(180deg);
}

.rotate270 {
	transform: rotate(270deg);
}

.rotate360 {
	transform: rotate(360deg);
}

.price {
	font-weight: 600;
}

.box-step-btn {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.box-step-btn button {
	font-size: 1rem;
	font-weight: 700;
	padding: 6px 12px;
	cursor: pointer;
	border: 1px solid #000;
	color: #000;
}

.box-step-btn #btnNext {
	background-color: #000;
	color: #fff;
}

.box-step-btn #btnBack i {
	padding-right: 5px;
}

.box-step-btn #btnNext i {
	padding-left: 5px;
}

#error_select {
	flex: 1;
	text-align: center;
	padding: 0 12px;
}

#error_select a {
	display: none;
	color: red;
}

.detail_item {
	padding: 10px;
	border-top: 1px solid #E1E1E1;
	border-bottom: 1px solid #E1E1E1;
}

.detail_item span {
	float: right;
	color: #E1E1E1;
}

.detail_item {
	cursor: pointer;
}

.detail_item:nth-child(n+2) {
	border-top: none;
}

.drop-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.5s ease, padding-top 0.5s;
}

.detail_item.open .drop-content {
	max-height: 1000px;
	padding-top: 10px;
}

.container-recent {
	display: flex;
}

.recent-item {
	position: relative;
	width: 50%;
	aspect-ratio: 1/1;
}

.recent-item img {
	height: fit-content;
	width: 100%;
	object-fit: cover;
	display: block;
	aspect-ratio: 1/1;
	position: relative;
	z-index: 0;
}

.recent-item a {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: transparent;
	text-transform: uppercase;
	font-weight: 500;
	font-size: 1.8rem;
	text-align: center;
	align-content: end;
	color: #000;
	z-index: 1;
}

.recent-item:hover a {
	background-color: #0000006b;
	color: #fff;
}

.recent-item a label {
	display: inline-block;
	margin-bottom: 12px;
}

.b_select {
	position: relative;
}

.b_select select {
	border: 1px solid #CFCFCF;
	padding: 6px 8px;
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
}

.b_select::after {
	content: '';
	position: absolute;
	top: 40%;
	right: 10px;
	width: 7px;
	height: 7px;
	display: block;
	transform: translateY(-50%);
	pointer-events: none;
	font-size: 12px;
	border-bottom: 1.5px solid #484C4F;
	border-left: 1.5px solid #484C4F;
	transform: rotate(-45deg);
}

.btn_save_add {
	display: grid;
	gap: 13px;
}

.btn_save_add button {
	display: block;
	width: 100%;
	padding: 6px;
	font-weight: 700;
	border: 1px solid #000000;
	cursor: pointer;
	transition: opacity .5s;
}

.btn_save_add button i {
	margin-right: 18px;
}

.btn_save_add button#addCart {
	background-color: #000000;
	color: #fff;
}

.btn_save_add button:hover {
	opacity: 0.8;
}

#container_save {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	padding: 10px;
	width: fit-content;
	margin: auto;
	max-width: 100%;
	background-color: #fff;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
	border: 1px solid #D2D2D2;
	transform: translateY(0);
	transition: transform .5s;
}

#container_save.expand_on {
	transform: translateY(100%);
}

#container_save #expand {
	position: absolute;
	top: -1px;
	left: 50%;
	transform: translate(-50%, -100%);
	padding: 4px 16px;
	background-color: #fff;
	border: solid #DFDFDF;
	border-width: 1px 1px 0 1px;
	border-radius: 10px 10px 0 0;
	cursor: pointer;
	transition: background-color .5s;
}

#container_save #expand:hover {
	background-color: #c7c7c7;
}

#container_save .box_save_item {
	overflow-x: auto;
	padding: 1px;
}

#container_save .box-save {
	/* position: absolute; */
	display: inline-flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 24px;
	bottom: 0;
	left: 50%;
	/* transform: translateX(-50%); */
	margin-bottom: 24px;
}

#container_save .box-save .box-item {
	width: 100px;
	height: 100px;
	position: relative;
	border: 1px solid #000;
	background-color: #fff;
}

#container_save .box-save .box-item a {
	display: block;
}

#container_save .box-save .box-item img:nth-child(n+2) {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

#container_save .box-save .box-item button {
	position: absolute;
	z-index: 2;
	cursor: pointer;
	color: #fff;
	background-color: #000;
	right: 0;
	top: 0;
	line-height: 0;
	padding: 5px;
	width: 24px;
	height: 24px;
	opacity: 1;
	transition: opacity .5s;
}

#container_save .box-save .box-item button:hover {
	opacity: 0.8;
}

.container-detail {
	display: flex;
	gap: 16px;
}

.container-detail .img-detail {
	position: relative;
	width: 140px;
	border: 1px solid #D2D2D2
}

.container-detail .img-detail img:nth-child(n+2) {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.box-email-notify .header_email {
	background: var(--color-grey-94, #EFEFEF);

}

.box-email-notify .header_email p {
	padding: 8px 10px;
}

.bottom_email {
	padding: 12px;
	border: 1px solid #CFCFCF;
}

.bottom_email .box_input {
	position: relative;
}

.bottom_email .box_input button {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	padding: 10px;
	background-color: #000;
	color: #fff;
	cursor: pointer;
	display: none;
	height: 100%;
}

#modal-hand {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.25);
	z-index: 11;
}

#modal-hand .container-hand {
	height: 100%;
	align-content: center;
}

#modal-hand .container-hand .box-hand {
	max-width: 600px;
	padding: 10px;
	margin: auto;
	background-color: #fff;
	position: relative;
}

.box-hand #box-img {
	position: absolute;
	z-index: 5;
	top: 32.5%;
	left: 31.6%;
	transform: rotate(-15deg);
	width: 13.2%;
}

.box-hand button {
	position: absolute;
	right: 5px;
	top: 5px;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	border: 1px solid #000;
	background-color: #fff;
	color: #000;
	line-height: 0;
	cursor: pointer;
	z-index: 1;
}

.box-hand button:hover {
	background-color: #000;
	color: #fff;
	transition: .5s;
}

.box-hand button i {
	height: 12px;
}

.box-hand #box-img img:nth-child(2) {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
}

.page-navigation {
	display: block;
	margin: auto;
	width: fit-content;
}

.page-navigation .pagination {
	font-size: 1.4rem;
}

.page-navigation .pagination li {
	display: inline-block;
	padding: 3px 5px;
	margin: 0 10px;
}

.page-navigation .pagination li.active {
	font-weight: 700;
}

#search_form {
	display: inline-flex;
	align-items: center;
}

#search_form input[name="search"] {
	height: fit-content;
}

.txt-detail {
	flex: 1;
}

.txt-detail #preview_msg img {
	vertical-align: middle;
}

.total_price {
	font-size: 2.3rem;
	line-height: 1.5;
}

#total_price_mb {
	display: none;
	margin-top: 12px;
}

#total_price.fixed {
	position: fixed;
	background-color: #fff;
	width: 385px;
	padding-top: 24px;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	z-index: 2;
}

#table-msg td {
	padding: 5px;
}

#btn-zoom {
	padding: 12px;
	border: 1px solid #ddd;
	position: absolute;
	right: 2px;
	bottom: 2px;
	z-index: 2;
	cursor: pointer;
}

#btn-zoom:hover {
	background-color: #cccccc;
	color: #fff;
}

#btn-zoom.active {
	background-color: #000;
	color: #fff;
}

#table-local {
	margin-bottom: 0;
	user-select: none;
}

#table-local tr.select-local {
	cursor: pointer;
}

#table-local tr.selected {
	background-color: #e9e9e9;
}


#table-local td {
	padding: 5px 10px;
}

#table-local td:first-child {
	min-width: 49px;
}

#table-local td:nth-child(2) {
	width: 100%;
}

#table-local td img {
	display: inline-block;
	max-height: 22px;
	vertical-align: middle;
}

#go_local .box-local {
	position: relative;
}

.select-dropdown {
	left: 0px;
	right: 0px;
	display: none;
	position: absolute;
	z-index: 2;
}

.select-dropdown .drop-box {
	border: 1px solid #e4e4e4;
	padding: 3px;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	/* display: flex; */
	/* flex-wrap: wrap; */
	gap: 3px;
	background-color: #fff;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.select-dropdown .drop-box .span-4 {
	grid-column: span 4;
}

.select-dropdown .drop-box .span-6 {
	grid-column: span 6;
}

.select-dropdown .drop-box span {
	width: 100%;
	/* text-align: -webkit-center; */
	align-content: center;
	/* padding: 3px; */
}

.select-dropdown .drop-box>div {
	cursor: pointer;
	padding: 3px;
}

.select-dropdown .drop-box>div:hover {
	background-color: #D2D2D2;
}

.select-dropdown .drop-box .emojibig {
	/* width: 100%; */
	/* aspect-ratio: 1/1; */
	flex: 140px 1 1;
}

.select-dropdown .drop-box .emojismall {
	/* aspect-ratio: 1/1; */
	flex: 40px 1 1;

}

.select-dropdown .drop-box .emojismall label {
	font-size: 1rem;
}

.select-dropdown .drop-box .noemoji b {
	display: block;
	width: 25px;
	height: 25px;
	border: 1px solid;
	border-radius: 50%;
	line-height: 2;
}

.select-dropdown .drop-box .emojismall img {
	display: inline;
	max-height: 30px;
	max-width: 30px;
	width: 100%;
	aspect-ratio: 1 / 1;
	vertical-align: middle;

}

.select-dropdown .dropdown-keyboard {
	background-color: #fff;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	user-select: none;
}

#btn_changefont {
	padding: 5px 10px;
	/* height: 100%; */
}

#btn_changefont+.dropdown-list {
	background-color: #fff;
}

#btn_changefont+.dropdown-list p {
	text-align: left;
	padding: 5px;
	cursor: pointer;
	text-wrap: nowrap;
}

#btn_changefont+.dropdown-list p:hover {
	background-color: #eeeeeeb2;
}

#btn_changefont+.dropdown-list img {
	max-height: 20px;
	display: inline;
	vertical-align: middle;
	margin-right: 3px;
	width: fit-content;
}

.dropdown-keyboard .box-drop {
	position: relative;
}

.dropdown-keyboard .box-drop.box-font {
	flex-grow: 1;
}

.dropdown-keyboard .box-drop.box-nomsg {
	flex-shrink: 0;
	margin-left: 1px;
}

.dropdown-keyboard .box-drop #btn_changefont,
.dropdown-keyboard .box-drop #btn_nomessage {
	border: 1px solid #e4e4e4;
	max-height: 30px;
	height: 100%;
	cursor: pointer;
}

.dropdown-keyboard .box-drop #btn_nomessage {
	border: none;
	padding: 2px;
	align-content: center;
}

.dropdown-keyboard .box-drop #btn_nomessage:hover {
	background-color: #e4e4e4;
}

.dropdown-keyboard .box-drop #btn_changefont img {
	vertical-align: middle;
	display: inline-block;
	width: fit-content;
	margin-right: 3px;
}

.dropdown-keyboard .box-drop #btn_nomessage img {
	display: block;
}

.dropdown-keyboard .box-drop #btn_changefont+.dropdown-list {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1;
	border: 1px solid #e4e4e4;
	display: none;
}

.dropdown-keyboard .box-drop #btn_changefont+.dropdown-list.show {
	display: block;
}

.box-select-one {
	position: relative;
	text-wrap: nowrap;
	margin: -5px -10px;
}

#msgAB {
	cursor: pointer;
}

#select_one {
	padding: 5px 10px;
	/* display: block;
	margin: -5px -10px;
	padding: 5px 10px; */
}

#select_one+.dropdown-list {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 4;
	border: 1px solid #e4e4e4;
	display: none;
	background-color: #fff;
}

#select_one+.dropdown-list p {
	padding: 5px;
	cursor: pointer;
	text-align: center;
}

#select_one+.dropdown-list p:hover {
	background-color: #eeeeeeb2;
}

#select_one+.dropdown-list.show {
	display: block;
}

.cannot {
	background-color: #00000045;
	/* pointer-events: none; */
	cursor: not-allowed;
}

#table-local thead {
	cursor: pointer;
	display: block;
}

#table-local thead tr,
#table-local thead tr td {
	display: block;
}

#table-local tbody {
	display: block;
	overflow: hidden;
	max-height: 0px;
	height: 100%;
	transition: max-height .5s ease-in-out
}

#table-local tbody.expan {
	/* display: block; */
	max-height: 300px;
	/* overflow: visible; */
}

.item-preview {
	position: absolute;
	left: 3px;
	bottom: 3px;
	/* width: 35%; */
	max-width: 130px;
	transition: width .5s, max-width .5s;
	/* aspect-ratio: 1/1; */
	border: 1px solid #D2D2D2;
	background-color: #fff;
	cursor: pointer;
	z-index: 2;
	overflow: hidden;
	min-height: 23px;
}

.item-preview.zoom {
	/* aspect-ratio: 1/1; */
}

.item-preview div>img {
	aspect-ratio: 1/1;
	width: 0%;
	object-fit: contain;
	opacity: 0;
	transition: width .5s, opacity .5s;
}

.item-preview.zoom div>img {
	width: 100%;
	opacity: 1;
}

/* .item-preview::before {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	border-top: 2px solid #000;
	border-right: 2px solid #000;
	position: absolute;
	top: 3px;
	right: 3px;
	transition: transform .5s;
} */

.item-preview::after {
	content: '\e09f';
	font-family: 'FontAwesome';
	width: 20px;
	height: 20px;
	position: absolute;
	top: 3px;
	right: 3px;
	font-size: 16px;
	transform: scale(-1);
	display: none;
}

.item-preview.zoom::after {
	display: block;
}

.item-preview.zoom {
	max-width: 100%;
	width: calc(100% - 6px);
	cursor: zoom-out;
}

.item-preview .box-pre-engraved>img {
	/* position: absolute; */
	top: 0;
	left: 0;
	display: block;
	/* transform: scale(1.3) translateY(-10px); */
}

.item-preview p>img {
	vertical-align: sub;
}

.item-preview .box-pre-stone>img:nth-child(n + 2) {
	position: absolute;
	/* left: 0; */
	/* bottom: 0; */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.item-preview img:first-child {}

.fancybox-thumbs {
	width: 100% !important;
	height: auto !important;
	bottom: 0;
	top: auto;
	left: 0;
	right: 0;
	padding: 10px 0;
	background: rgba(0, 0, 0, 0.5);
	/* Làm nền tối nhẹ */
}

.fancybox-show-thumbs .fancybox-inner {
	right: 0;
	bottom: 95px;
}

.fancybox-thumbs__list {
	display: flex;
	justify-content: center;
}

.fancybox-thumbs__list a {
	margin: 0 5px;
	/* Khoảng cách giữa các thumbnail */
	flex-shrink: 0;
}

.fancybox-thumbs-x .fancybox-thumbs__list {
	overflow: unset;
}