/* GENERAL */
* {
	box-sizing: border-box;
}
html {
	background: #222;
	font-family: 'Poppins', sans-serif;
	font-size: 10px;
	color: #333;
	line-height: 1.5;
	letter-spacing: 1px;
}
body {
	background: #fff;
	font-size: 1.6rem;
}
.inner {
	margin: 0 auto;
	max-width: 1200px;
}
hr {
	margin: 2rem 0;
	height: 1px;
	background: #ddd;
	border: 0;
}
a {
	text-decoration: none;
}
strong {
	font-weight: 600;
}
.for-pc {
	display: block !important;
}
.for-sp {
	display: none !important;
}
#loader {
	display: none;
}
#overlay {
	display: none;
	position: fixed;
	top: 136px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 210;
	/* background: rgba(255,255,255,0.75); */
}
#overlay.show {
	display: block;
}
main {
	margin-top: 13.6rem;
}
#popup {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -15rem;
	margin-top: -4.5rem;
	z-index: 220;
	width: 30rem;
	padding: 2rem;
	background: #444;
	border: 1px solid #666;
	text-align: center;
	line-height: 1.25;
}
#popup.text-green {
	background: #0f0;
	border-color: #090;
	color: #222;
}
#popup.text-red {
	background: #f00;
	border-color: #900;
	color: #fff;
}
#popup i {
	margin-right: 1rem;
}
#popup small {
	display: block;
	margin-top: 2rem;
	font-size: 60%;
	font-weight: 600;
	text-align: center;
}
#popup.text-red small {
	color: #fff;
}
#popup.text-green small {
	color: #222;
}
@media screen and (max-width:1200px) {
	main .inner {
		margin: 0 2rem;
	}
}
@media screen and (max-width:768px) {
	.for-pc {
		display: none !important;
	}
	.for-sp {
		display: block !important;
	}
	main {
		margin-top: 12.2rem;
	}
}

/* TOPBAR */
.topbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	background: #fcc60e;
	overflow: hidden;
}
.sns-links {
	float: left;
	overflow: hidden;
}
.sns-links li {
	float: left;
}
.sns-links li a {
	display: block;
	padding: 0.8rem;
	font-size: 2.4rem;
	color: #222;
}
.user-links {
	float: right;
}
.user-links li {
	float: left;
}
.user-links li a {
	display: block;
	padding: 1.2rem 0.8rem;
	font-size: 1.6rem;
	font-weight: 600;
	color: #222;
}
.btn-cart {
	position: relative;
}
.btn-cart .cart-items {
	position: relative;
	z-index: 2;
	display: table;
	float: right;
	margin: 0.25rem 0 0 -0.8rem;
	width: 2.2rem;
	height: 2.2rem;
	background: #222;
	color: #fff;
	border-radius: 100%;
	font-size: 1.2rem;
}
.btn-cart .cart-items span {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	letter-spacing: -1px;
}

/* HEADER */
header {
	position: fixed;
	top: 41px;
	left: 0;
	right: 0;
	z-index: 200;
	background: #fff;
	border-bottom: 1px solid #ccc;
	overflow: hidden;
}
header h1 {
	float: left;
	padding: 1rem;
	line-height: 0;
}
header h1 img {
	height: 6rem;
}

/* NAVIGATION */
nav {
	float: right;
}
nav ul li {
	float: left;
}
nav ul li a {
	position: relative;
	display: block;
	padding: 3.3rem 2rem;
	font-weight: 600;
	font-size: 1.4rem;
	color: #222;
	text-transform: uppercase;
	text-align: center;
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	transition: all 0.25s ease;
}
nav ul li a.disable {
	opacity: 0.5;
}
nav ul li a span {
	font-weight: 400;
	font-size: 80%;
}
.btn-sp-menu {
	display: none;
	float: right;
	padding: 2.5rem;
	font-size: 3rem;
	color: #222;
}
.sp-nav {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 200;
	background: #fff;
}
.sp-nav-wrapper {
	overflow-y: auto;
}
.sp-nav-wrapper ul {
	border-top: 5px solid #eee;
}
.sp-nav-wrapper ul li a {
	display: block;
	padding: 2rem;
	border-bottom: 1px solid #ccc;
	color: #222;
	font-weight: 600;
	text-align: center;
}
.sp-nav-wrapper>ul>li>a {
	background-color: #f7f7f7;
}
.sp-nav-wrapper ul li a.disable {
	opacity: 0.5;
}
.sp-nav-wrapper ul li a span {
	font-size: 80%;
	font-weight: 400;
}
.sp-nav-wrapper ul li ul {
	/* display: none; */
	border-top: 0;
}
.sp-nav-wrapper ul li ul li a {
	font-size: 80%;
}
.btn-close-sp-nav {
	display: block;
	padding: 2rem;
	font-size: 3rem;
	color: #222;
	text-align: center;
}
@media screen and (min-width:769px) {
	nav ul li a:hover,
	nav ul li a.active {
		background: #f7f7f7;
		color: #2452a7;
	}
	nav ul li a.disable:hover {
		background: #fff;
		color: #222;
	}
}
@media screen and (max-width:768px) {
	nav {
		display: none;
	}
	.btn-sp-menu {
		display: block;
	}
}

/* NAV MORE */
.nav-more {
	display: none;
	position: fixed;
    top: 136px;
    left: 0;
    right: 0;
    z-index: 220;
    background: #fff;
	border-bottom: 1px solid #ddd;
	text-align: center;
}
.nav-more.open {
	display: block;
}
.nav-more h2 {
    margin: 4rem 0 2rem;
	font-size: 3.2rem;
    font-weight: 600;
}
.nav-more ul {
	text-align: center;
}
.nav-more ul li {
	display: inline-block;
}
.nav-more ul li a {
	display: block;
	padding: 3rem;
	font-weight: 600;
	color: #222;
}
.btn-close-nav-more {
	display: inline-block;
	padding: 2rem;
	font-size: 4rem;
	color: #000;
	opacity: 0.1;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
@media screen and (min-width:769px) {
	.nav-more ul li a:hover {
		background: #f7f7f7;
		color: #2452a7;
	}
	.btn-close-nav-more:hover {
		opacity: 1;
	}
}

/* FORM */
.form-group {
	margin: 3rem 0;
}
.form-group .col-2 > div {
	margin-bottom: 0;
}
.form-group .col-2 > *:nth-child(odd) {
	padding-right: 1rem;
}
.form-group .col-2 > *:nth-child(even) {
	padding-left: 1rem;
}
.form-group h3 {
	font-size: 2rem;
	font-weight: 600;
}
.form-row {
	margin-top: 2rem;
}
.form-row label {
	font-weight: bold;
	color: #666;
}
.form-row label input,
.form-row label select {
	display: block;
	margin-top: 0.5rem;
	padding: 0.75rem 1rem;
	width: 100%;
	border: 1px solid #ccc;
	border-radius: 0.5rem;
	font-size: 1.6rem;
}
.form-row label textarea {
	display: block;
	margin-top: 0.5rem;
	padding: 0.75rem 1rem;
	width: 100%;
	border: 1px solid #ccc;
	border-radius: 0.5rem;
	font-size: 1.6rem;
	resize: none;
}
.form-row.with-error label {
	color: #f00;
}
.form-row.with-error input {
	border-color: #f00;
}
form .error-message {
	margin-top: 0.5rem;
	font-size: 1.4rem;
	color: #f00;
	letter-spacing: 0;
}
form .success-message {
	margin-top: 0.5rem;
	font-size: 1.4rem;
	color: #0c0;
	letter-spacing: 0;
}
.form-row .btn-submit {
	display: block;
    margin-top: 2rem;
    padding: 2rem;
    width: 100%;
    cursor: pointer;
    background: #66f;
    border: 0;
    border-radius: 0.5rem;
    font-size: 2rem;
    color: #fff;
    text-align: center;
}

/* QUICK CART */
.quick-cart {
	position: fixed;
	top: 0;
	right: -50rem;
	bottom: 0;
	z-index: 215;
	overflow-y: auto;
	padding: 4rem;
	width: 40rem;
	background: #fff;
	border-left: 1px solid #ccc;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
.quick-cart.open {
	right: 0;
}
.quick-cart h2 {
	margin-bottom: 4rem;
	font-size: 2.4rem;
	font-weight: 600;
	letter-spacing: -1px;
}
.btn-close-quick-cart {
	float: right;
	margin: -0.5rem 0.5rem 0 0;
	font-size: 3rem;
    color: #000;
    opacity: 0.2;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.quick-cart-items .product {
	display: block;
	margin-bottom: 2rem;
}
.quick-cart-items .product a {
	color: #222;
}
.quick-cart-items .product-photo {
	float: left;
	width: 30%;
	line-height: 0;
}
.quick-cart-items .product-details {
	float: left;
	width: 70%;
	padding: 1rem;
}
.quick-cart-items .product-details h3 {
	font-weight: 600;
	letter-spacing: 0;
}
.quick-cart-items .product-details h3 a {
	font-size: 1.6rem;
}
.quick-cart-items .product-details .sku {
	opacity: 0.5;
}
.quick-cart-items .product-quantity-options {
	margin-top: 1rem;
	overflow: hidden;
}
.quick-cart-items .product-quantity-options li {
	float: left;
	padding: 0.1rem;
}
.quick-cart-items .product-quantity-options li a {
	display: block;
	overflow: hidden;
}
.quick-cart-items .product-quantity-options li a i {
	float: left;
	font-size: 2rem;
}
.quick-cart-items .product-quantity-options li input {
	width: 3rem;
	border: 1px solid #ccc;
	border-radius: 0.5rem;
	padding: 0.2rem;
	text-align: center;
}
.product-custom {
	margin-bottom: 2rem;
	padding: 1rem;
	border: 1px solid #ddd;
	border-radius: 0.5rem;
	line-height: 1.25;
}
.product-custom h4 {
	font-weight: 600;
}
.product-custom > div {
	margin-top: 1rem;
}
.product-subtotal {
	margin: 1rem 0 0;
	font-size: 1.8rem;
}
.product-subtotal-breakdown {
	margin: 0 0 1rem;
}
.btn-cart-product-update {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 0.6rem;
	background: #222;
	border-radius: 0.4rem;
	color: #fff !important;
}
.quick-cart-items .btn-remove-from-cart {
	display: inline-block;
	margin-top: 0.5rem;
	margin-left: 0.5rem;
	padding: 0.6rem;
	background: none;
	border: 1px solid #999;
	border-radius: 0.4rem;
	color: #222 !important;
}
.btn-clear-quick-cart,
.btn-return {
	display: block;
	margin-top: 2rem;
	padding: 1rem;
	border: 1px solid #ccc;
	border-radius: 0.5rem;
	color: #333;
	text-align: center;
}
.btn-clear-quick-cart i,
.btn-return {
	margin-right: 0.5rem;
}
.btn-continue-shopping {
	display: block;
	margin-top: 4rem;
	padding: 2rem;
	border: 1px solid #333;
	border-radius: 0.5rem;
	text-align: center;
	color: #222;
}
.btn-checkout {
	display: block;
	margin-top: 4rem;
	padding: 2rem;
	width: 100%;
	cursor: pointer;
	background: #090;
	border: 0;
	border-radius: 0.5rem;
	font-size: 2rem;
	color: #fff;
	text-align: center;
}
.quick-cart .total {
	float: right;
	font-size: 3rem;
}
@media screen and (min-width:769px) {
	.btn-close-quick-cart:hover {
		opacity: 1;
	}
}
@media screen and (max-width:425px) {
	.quick-cart {
		width: 100%;
		padding: 4rem 2rem;
	}
}

/* SECTION */
section {
	padding: 5rem 0;
	overflow: hidden;
}
section .section-title {
	margin: 2rem 0 1rem;
	width: 100%;
	font-size: 3.2rem;
	font-weight: 600;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 1rem;
}
@media screen and (max-width:768px) {
	section {
		padding: 3rem 0;
	}
}

/* PRODUCTS LIST */
.products-list {
	clear: both;
	margin: 0 -1.5rem;
	overflow: hidden;
}
.products-list li {
	float: left;
	padding: 1.5rem;
	width: 25%;
}
.product-photo img {
	width: 100%;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.product {
	display: block;
	background: #f7f7f7;
	border-radius: 0.5rem;
	color: #333;
	overflow: hidden;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.product-info {
	padding: 2rem;
}
.product-name {
	font-weight: 600;
}
.product-name span {
	font-size: 80%;
}
.product-details {
	margin-bottom: 0.5rem;
	font-size: 1.2rem;
}
.product-category {
	margin-bottom: 1rem;
}
.product-price {
	margin-top: 1rem;
	font-size: 2rem;
}
@media screen and (max-width:1200px) {
	.products-list {
		margin: 0;
	}
}
@media screen and (min-width:769px) {
	.product:hover {
		background: #fff;
		color: #000;
	}
	.product:hover .product-photo img {
		opacity: 0.7;
	}
}

/* FOOTER LINKS */
.footer-links {
	background: #eee;
	line-height: 1.5;
}
.footer-links .inner > ul > li:nth-child(1) {
	padding-right: 2rem;
}
.footer-links .inner > ul > li:nth-child(2) {
	padding-right: 1rem;
	padding-left: 1rem;
}
.footer-links .inner > ul > li:nth-child(3) {
	padding-left: 2rem;
}
.footer-links .inner > ul > li:first-child img {
	width: 100%;
}
.footer-links .inner > ul > li:nth-child(2) h2,
.footer-links .inner > ul > li:nth-child(3) h2 {
	font-size: 2.4rem;
	font-weight: 600;
	letter-spacing: 0;
	color: #000;
}
.footer-links .inner > ul > li ul li a {
	color: #666;
}
.footer-links .inner > ul > li ul li::before {
	content: '» ';
}
.footer-links .inner > ul > li:nth-child(3) p {
	margin-top: 1rem;
}
.footer-links .inner > ul > li:nth-child(3) p i {
	margin-right: 1rem;
}
@media screen and (min-width:769px) {
	.footer-links .inner > ul > li ul li a:hover {
		color: #000;
	}
}
@media screen and (max-width:768px) {
	.footer-links .inner {
		padding: 0 2rem;
	}
	.footer-links .inner > ul > li {
		margin-bottom: 2rem;
		text-align: center;
	}
	.footer-links .inner > ul > li:nth-child(1) {
		padding-right: 0;
	}
	.footer-links .inner > ul > li:nth-child(2) {
		padding-right: 0;
		padding-left: 0;
	}
	.footer-links .inner > ul > li:nth-child(3) {
		padding-left: 0;
	}
}

/* FOOTER */
footer {
	padding: 5rem;
	background: #222;
	font-size: 1.2rem;
	color: #999;
	text-align: center;
	line-height: 1.5;
}
footer a {
	color: #fff;
}

/* MODAL */
.modal {
	display: none;
	position: fixed;
	top: 20%;
	left: 20%;
	right: 20%;
	bottom: 20%;
	z-index: 220;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 1rem;
	overflow: hidden;
}
.modal.show {
	display: block;
}
.modal-header {
	padding: 1.5rem 2rem;
	background: #fcc60e;
	border-bottom: 1px solid #ccc;
	font-size: 2.4rem;
	font-weight: 600;
}
.btn-modal-close {
	float: right;
	color: #333;
}
.modal-body {
	position: absolute;
	top: 55px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	overflow-y: auto;
}
@media screen and (max-width:768px) {
	.modal {
		top: 5rem;
		left: 1.5rem;
		right: 1.5rem;
		bottom: 5rem;
	}
}

/* SIZE CHART MODAL */
.size-chart-table-wrapper {
	padding: 2rem;
	width: 60rem;
}
.size-chart-table {
	width: 100%;
	border-collapse: collapse;
}
.size-chart-table th {
	background: rgba(0,0,0,0.05);
	font-weight: 600;
}
.size-chart-table td {
	text-align: center;
}
.size-chart-table th,
.size-chart-table td {
	padding: 1rem;
	border: 1px solid #ccc;
}

/* DOCUMENT */
.document .section-title {
	text-align: left;
}

/* BUTTONS */
.btn-size-chart {
	float: right;
	display: block;
	padding: 1rem;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 0.4rem;
	font-size: 1.2rem;
	color: #333;
}

/* 2 COLUMNS */
.list-col-2 {
	overflow: hidden;
}
.list-col-2 > * {
	display: block;
	float: left;
	width: 50%;
}
@media screen and (max-width:768px) {
	.list-col-2 > * {
		float: none;
		width: 100%;
	}
}

/* 3 COLUMNS */
.list-col-3 {
	overflow: hidden;
}
.list-col-3 > * {
	display: block;
	float: left;
	width: 33.33%;
}
@media screen and (max-width:768px) {
	.list-col-3 > * {
		float: none;
		width: 100%;
	}
}

/* 4 COLUMNS */
.list-col-4 {
	overflow: hidden;
}
.list-col-4 > * {
	display: block;
	float: left;
	width: 25%;
}
@media screen and (max-width:768px) {
	.list-col-4 > * {
		width: 25%;
	}
}
@media screen and (max-width:425px) {
	.list-col-4 > * {
		width: 50%;
	}
}

/* 2 COLUMNS */
.col-2 {
	overflow: hidden;
}
.col-2 > * {
	display: block;
	float: left;
	margin-bottom: 2rem;
	width: 50%;
}
.col-2 > *:nth-child(odd) {
	padding-right: 2rem;
}
.col-2 > *:nth-child(even) {
	padding-left: 2rem;
}
@media screen and (max-width:768px) {
	.col-2 > * {
		float: none;
		width: 100%;
	}
	.col-2 > *:nth-child(odd) {
		padding-right: 0;
	}
	.col-2 > *:nth-child(even) {
		padding-left: 0;
	}
}

/* DOCUMENT */
.document {
	line-height: 1.5;
}
.document p,
.document ul {
	margin-bottom: 2rem;
}
.document ul li {
	list-style: disc inside !important;
}

/* COMPONENT */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }

.mb-0 { margin-bottom: 0 !important; }