:root {
	--bs-black: #000;
	--bs-white: #fff;
	--bs-body-bg: #feffa7;
	--bs-primary: #0d6efd;
	--bs-secondary: #6c757d;
	--bs-success: #198754;
	--bs-info: #0dcaf0;
	--bs-warning: #ffc107;
	--bs-danger: #dc3545;
	--bs-light: #f8f9fa;
	--bs-dark: #212529;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
	:root {
		scroll-behavior: smooth;
	}
}

/*FONTS*/
html,
body {
	height: 100%;
}

body {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-size: 16px;
	color: var(--bs-black);
	background: #feffa7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-weight: 400;
}

img {
	max-width: 100%;
}

/* custom scrollbar  */
::-webkit-scrollbar {
	width: 6px;
}

::-webkit-scrollbar:horizontal {
	height: 6px;
}

/* Track */
::-webkit-scrollbar-track {
	height: 6px;
}

/* Handle */
::-webkit-scrollbar-thumb {
	-webkit-border-radius: 6px;
	border-radius: 6px;
	background: var(--bs-success);
	height: 6px;
}

::-webkit-scrollbar-thumb:window-inactive {
	background: var(--bs-success);
	;
	height: 6px;
}

input[type=color],
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
select,
textarea {
	font-size: 16px;
}

/* 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;
}

a,
button {
	transition: all ease 0.5s;
}

span, p {
	word-break: break-word;
}

.navbar {
	background-color: var(--bs-success);
}

.navfooter {
	background-color: var(--bs-success);
	padding-block: 1rem;
	p{
		margin-bottom: 0;
	}
}

.spacer {
	margin-top: 50px;
	display: block;
	overflow: hidden;
	height: 1px;
	width: 100%;
}

.sc-banner img {
	height: 200px;
	width: 100%;
}

.text-white {
	color: var(--bs-white) !important;
}

.text-danger {
	color: var(--bs-danger) !important;
}

.br-0 {
	border: 0;
}

.m-0 {
	margin: 0;
}

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

.mb-1 {
	margin-bottom: 1rem;
}

.mb-2 {
	margin-bottom: 2rem;
}

.mb-3 {
	margin-bottom: 3rem;
}

.mb-4 {
	margin-bottom: 4rem;
}

.mb-4 {
	margin-bottom: 4rem;
}

.mx-3 {
	margin-inline: 3rem;
}

.my-3 {
	margin-block: 3rem;
}

.p-0 {
	padding: 0;
}

.pb-0 {
	padding-bottom: 0;
}

.pb-1 {
	padding-bottom: 1rem;
}

.pb-2 {
	padding-bottom: 2rem;
}

.pl-2 {
	padding-left: 2rem;
}

.pb-3 {
	padding-bottom: 3rem;
}

.pb-4 {
	padding-bottom: 4rem;
}

.pb-5 {
	padding-bottom: 5rem;
}

.pb-8 {
	padding-bottom: 8rem;
}

.px-3 {
	padding-inline: 3rem;
}

.py-3 {
	padding-block: 3rem;
}

.form-control {
	min-height: 40px;
	box-shadow: none;
}

table tr,
table td {
	vertical-align: middle !important;
}

.th-1 {
	width: 200px;
}

.th-2 {}

.th-3 {
	width: 150px;
}

.th-4 {
	width: 100px;
}

.contact-form {
	background: white;
	padding: 2rem 3rem;
	border-radius: 15px;
	margin-bottom: 50px;
}

textarea {
	resize: none;
}

.helpText {
	font-size: 13px;
	color: var(--bs-success);
}

.sc-cart-page {
	padding: 1rem 2rem;
	background: #f8f9a4;
	border-radius: 15px;
}

.call-info {
	padding: 1rem 2rem;
	margin-top: 8.5rem;
	background: #f8f9a4;
	border-radius: 15px;
}

.my-custom-hr {
	border: 1px solid #333;
	margin: 12px 0;
}

.cart-img img {
	width: 200px;
	height: 200px;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center;
	object-position: center;
}

#scrollTopBtn {
	border-radius: 50%;
	/* Makes the button round */
	padding: 10px 15px;
	/* Adjusts button size */
	display: none;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 9999;
	/* Ensures it's on top */
	border-radius: 50%;
	/* Optional styling */
	padding: 10px 15px;
}

.order-modal .form-group {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.d-flex {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
}

.align-items-center {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.justify-content-center {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.order-modal label{
	min-width: 150px;
}

h1.navbar-header {
	margin-block: 0;	
}

.logo{
	max-width: 100px; 
	margin-left: 1rem;
}

.page-content {
	padding-bottom: 5rem;
}

.totalprice {
	max-width: 350px;
	float: right;
}

@media only screen and (max-width: 768px) {
	.sc-banner img {
		height: 80px;
		/* Adjust the height to a smaller size */
		object-fit: cover;
		/* Ensures the image scales nicely */
	}
}

@media screen and (max-width: 680px) {
	.sc-cart-page{
		padding: 1rem;
	}

	.sc-cart-page table th{
		display: none;
	}	

	.sc-cart-page table td{
		display: block;
	}

	.sc-cart-page table td.text-center, .sc-cart-page table td.text-right {
		text-align: left;
	}

	.sc-cart-page table tr:nth-child(even){
		background: #f5f5bf;
	}
	.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
		padding: 10px 16px;
	}

	.order-modal .form-group {
		flex-direction: column;
	}

	.order-modal .form-group label, .order-modal .form-group span {
		display: block;
		min-width: 100%;
	}
}