*, ::before, ::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
/*	outline: 1px solid blue;*/
}

html {
	font-size: 62.5%;
    scroll-behavior: smooth;
    scroll-padding-top: 180px;
}

body {
	font-size: 18px;
	line-height: 1.7;
    font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
	font-weight: normal;
	color: #000;
	margin: 0 auto;
}

.wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

a {
	text-decoration: none;
    font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
	font-weight: normal;
	font-style: normal;
	color: #000;
}

li {
	list-style-type: none;
    font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
	font-weight: normal;
	font-style: normal;
	color: #000;
}

img {
	vertical-align: bottom;
	max-width: 100%;
	height: auto;
}

span {
	white-space: nowrap;
}

h2 {
	font-weight: normal;
	font-family: "mencken-std";
	font-size: 24px;
	letter-spacing: 2px;
	margin: 8% 0 6%;
}


header {
    width: 100%;
    height: 12vh;
    background-color: rgba(0, 0, 0, 1);
    display: flex;
    align-items: center;
    padding: 1% 3%;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
	transition: 0.5s ease-in-out;
}

header.scroll {
	background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(2px);
}

.header-left {
	display: flex;
	align-items: center;
	width: 38%;
}

.logo {
	width: 40%;
	height: auto;
	margin-right: 10%;
}

.logo img {
	vertical-align: middle;
}

nav {
	width: 30%;
}

.nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30%;
	margin-top: 1.5%;
	white-space: nowrap;
	
}

.nav a {
	color: #fff;
	font-family: "mencken-std";
	font-size: 20px;
	letter-spacing: 2px;
}

/*nav hover underline*/
.nav-top,.nav-news,.nav-item {
	position: relative;
}

.nav-top::after,.nav-news::after,.nav-item::after {
	position: absolute;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background: #37998e;
	bottom: -6px;
	transform: scale(0, 1);
	transform-origin: center;
	transition: transform 0.3s;
}
	
nav a:hover::after {
	transform: scale(1, 1);
}

/*nav dropdown menu*/
.dropdown {
	position: relative;
}

.nav-category {
    color: #fff;
    font-family: "mencken-std";
    font-size: 20px;
    letter-spacing: 2px;
}

.dropdown-menu {
	display: block;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, transform 0.3s ease;
	position: absolute;
    top: 100%;
    left: 0;
    background-color: rgba(55, 153, 142, 0.9);
	backdrop-filter: blur(2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 100;
}

.dropdown:hover .dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);}

.dropdown-menu li a {
	display: block;
	padding: 10px 20px;
	color: #fff;
	text-shadow: 2px 2px 4px #000;
}

.dropdown-menu li a:hover {
	background-color: rgba(255, 255, 255, 0.3);
}

.humburger {
	display: none;
}


.icon {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5em;
	width: 30%;
}

.icon img {
	width: 80%;
}


/* 検索フォーム */
#searchContainer {
	width: 58%;
}

#searchForm {
	width: 95%;
	position: relative;
	border-bottom: 1px solid #fff;
	margin-top: 3px;
}

#searchInput {
	width: 100%;
	padding: 8px 35px 8px 5px;
	border: none;
	background: transparent;
	outline: none;
	box-shadow: none;
	color: white;
	font-size: 16px;
}

#searchInput:-webkit-autofill {
	box-shadow: 0 0 0 1000px transparent inset !important;   /* 白背景で上書き */
	-webkit-text-fill-color: #fff !important;              /* テキスト色も指定 */
	transition: background-color 9999s ease-in-out 0s;       /* 色変化をほぼ無効に */
}

#searchInput:focus {
	outline: none;
	box-shadow: none;
	color: white;
}

#searchToggleBtn {
	display: none;
}

#searchSubmitBtn {
	position: absolute;
	right: 0;
	top: -12%;
	background: none;
	border: none;
	cursor: pointer;
}

#searchSubmitBtn:hover {
	background: #424242;
}



main {
	flex: 1;
	width: 100%;
	margin: 0 auto;
}






/*TOP*/

.mv {
	width: 100%;
	height: auto;
	margin-top: 12vh;
}

.mv img {
	width: 100%;
	height: auto;
}


.top-img {
	width: 90%;
	margin: 10px auto 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr); /* 6等分のグリッド */
	grid-template-rows: 36vh;
	gap: 18px;
}

/* 1行目：各3列ずつ占有（1:1）*/
.set1 {
  grid-column: 1 / 4; /* 1〜3列目 */
  grid-row: 1;
}
.set2 {
  grid-column: 4 / 7; /* 4〜6列目 */
  grid-row: 1;
}

/* 2行目：各2列ずつ占有（1:1:1）*/
.long-t {
  grid-column: 1 / 3; /* 1〜2列目 */
  grid-row: 2;
}
.parker {
  grid-column: 3 / 5; /* 3〜4列目 */
  grid-row: 2;
}
.women {
  grid-column: 5 / 7; /* 5〜6列目 */
  grid-row: 2;
}

.top-img img {
	height: 36vh;
	width: 100%;
	object-fit: cover;
}


.news {
	text-align: center;
	padding: 0 15%;
}

.news-item {
	display: grid;
    grid-template-columns: 1fr 4fr;
	grid-template-rows: 14vh;
    row-gap: 15%;
    column-gap: 5%;
    align-items: center;
	border-bottom: 1px solid #d0d0d0;
	padding: 3% 0;
}

.news-item img {
	height: 14vh;
	width: 100%;
	object-fit: cover;
}

.news-item:first-child {
	border-top: 1px solid #d0d0d0;
}

.news-text {
	text-align: left;
	padding: 1%;
}

.news-text dt {
	font-size: 16px;
	color: #818181;
	margin-bottom: 1%;
}
.news-text dd {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2; /* 表示する行数 */
	overflow: hidden;
	text-overflow: ellipsis; /* ...で省略表示 */
}


/*ALL ITEM 、その他同レイアウトページ*/

.outer {
	margin: 12vh auto 0;
	text-align: center;
	padding: 0 6%;
}

.outer h2 {
    margin: 4% 0 2%;
}

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

.sort {
    position: relative;
	display: flex;
	justify-content: end;
}

.sort-icon {
	transform: rotate(90deg);
	width: 1.2em;
}

.sort-btn {
    background: white;
    border: none;
    font-size: 18px;
    cursor: pointer;
    display: flex; /* スマホでレイアウト崩れるため明示的に追加 */
    align-items: center;
    gap: 0.2em;
}

.sort-text {
    color: #000;
    text-decoration: none;
}

.sort-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #ccc;
    margin: 10px 0 0;
	text-align: left;
	font-size: 16px;
    list-style: none;
    z-index: 99;
}

.sort-menu li {
    padding: 8px;
    cursor: pointer;
}

.sort-menu li:hover {
    background: #eee;
}

.hidden {
    display: none;
}


.all-item {
	margin: 1em auto 0;
	display: grid;
    grid-template-columns: repeat(4, 1fr);
	row-gap: 4em;
    column-gap: 2em;
}

.product {
	text-align: left;
	position: relative;
}

.product figure {
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}

.product figure img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* または cover */
}

.product h3 {
	font-weight: normal;
	font-size: 18px;
	margin-top: 4%;
}

.product .price {
    font-size: 16px;
}

.product .product-fav {
	display: block;
    background: none;
	border: none;
	margin-left: auto;
    cursor: pointer;
    transition: color 0.2s ease;
	position: absolute;
	right: 2%;
    bottom: 5%;
	z-index: 10;
}




/*PRODUCT DETAIL*/

.product-detail {
	margin: 12vh auto 0;
	padding: 0 6%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8em;
    width: 100%;
    height: auto;
}

.detail-box {
	width: 100%;
}

.slick-list {
	display: block;
    margin: 0 auto;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    max-width: 570px;
}

.slick-prev {
    left: 24px;
	z-index: 99;
}

.slick-next {
    right: 24px;
	z-index: 99;
}

.slick-prev:before, .slick-next:before {
    color: #000;
}

.slick-dots {
    position: absolute;
    bottom: -35px;
}


.product-name {
	font-weight: normal;
	font-size: 24px;
	margin: 3.5em 0 1.5em;
}

.product-price {
	font-size: 20px;
	margin-bottom: 3em;
}

.product-description-title {
	margin-bottom: 0.5em;
}

.product-description {
	margin-bottom: 3.5em;
	font-size: 16px;
}

.btn-box {
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
	gap: 4%;
	margin-bottom: 1.5em;
}

.product-cart {
	width: 95%;
    height: auto;
    display: block;
    background-color: #000;
	padding: 1% 10%;
    color: #fff;
    font-size: 18px;
	text-align: center;
    line-height: 3.5;
}

.product-cart:hover {
    background-color: #666666;
}

.btn-box .product-fav {
    width: 12%;
	height: auto;
	aspect-ratio: 1 / 1;
    background: none;
	border: 1px solid #d0d0d0;
    cursor: pointer;
    transition: color 0.2s ease;
}

.product-fav svg {
  fill: none;             		 /* 塗り無し（枠線のみ） */
  stroke: #ff7070;         	/* 枠線の色 */
  transition: fill 0.3s ease;
}

.product-fav.active svg {
  fill: #ff7070;           	/* 塗りあり */
}

.note {
	margin-bottom: 3.5em;
}

.product-accordion {
    width: 90%;
    margin: 0 auto;
}

.accordion-item {
    width: 100%;
    border-bottom: 2px solid #d0d0d0;
}

.accordion-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1.2em 2em 1em;
    color: #000;
    cursor: pointer;
}

.accordion-title::-webkit-details-marker {
    display: none;
}

.accordion-title::before,
.accordion-title::after {
    width: 2px;
    height: .9em;
    border-radius: 5px;
    background-color: #202020;
    content: '';
}

.accordion-title::before {
    position: absolute;
    right: 2em;
    rotate: 90deg;
}

.accordion-title::after {
    transition: rotate .3s;
}

.accordion-item[open] .accordion-title::after {
    rotate: 90deg;
}

.accordion-content {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 2em 1.5em;
    color: #000;
	font-size: 16px;
    transition: transform .5s, opacity .5s;
}

.accordion-item[open] .accordion-content {
    transform: none;
    opacity: 1;
}




/*ログイン*/

.login {
	text-align: center;
	padding: 8% 30% 0;
}

.login h2 {
	margin: 10% 0 1%;
}
.login .mail-address,.login .password {
	width: 100%;
	margin: 0 auto;
	position: relative;
}
.login input {
	width: 100%;
    margin: 2% auto;
	padding: 20px;
	background-color: #fff;
    border: 1px solid #d3d3d3;
	border-radius: 0;
    font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
    font-size: 18px;
}
/* Chromeのオートフィルに対する背景色・文字色リセット */
.login input:-webkit-autofill,
.login input:-webkit-autofill:hover,
.login input:-webkit-autofill:focus,
.login input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px white inset !important; /* 背景色を白に */
    -webkit-text-fill-color: #000 !important;               /* 文字色を黒に */
    transition: background-color 5000s ease-in-out 0s;       /* 背景色の変化を無効化 */
}
.login #togglePassword {
	position: absolute;
    right: 3%;
    top: 40%;
    width: 3%;
    cursor: pointer;
}
.login button {
	margin: 1% auto;
	width: 100%;
    padding: 20px;
    border: none;
    background-color: #000;
	font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
    font-size: 18px;
	color: #fff;
	cursor: pointer;
}
.login button:hover {
    background-color: #666666;
}
.login .forget {
	display: block;
	width: 100%;
	margin: 1% auto;
	text-align: right;
	font-size: 16px;
	color: #37998e;
}
.login .line {
	width: 100%;
	height: 1px;
	margin: 8% auto;
	background-color: #d3d3d3;
}
.login .registration {
	display: block;
    width: 100%;
    margin: 1% auto;
    border: 1px solid #000;
    padding: 20px;
}
.login .registration:hover {
    background-color: #000;
    color: #fff;
}
.success {
    margin: 4% auto 2%;
}
.login-error {
	color: red;
	margin: 4% auto 2%;
}




/*新規会員登録*/

.register {
	text-align: center;
	padding: 8% 30% 0;
}

.register h2 {
	margin: 10% 0 4%;
}
.register .mail-address,.register .password {
	width: 100%;
	margin: 4% auto;
	position: relative;
}
.register .mail-address p,.register .password p {
	text-align: left
}
.register input {
	width: 100%;
    margin: 2px auto;
	padding: 20px;
	background-color: #fff;
    border: 1px solid #d3d3d3;
	border-radius: 0;
    font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
    font-size: 18px;
}
/* Chromeのオートフィルに対する背景色・文字色リセット */
.register input:-webkit-autofill,
.register input:-webkit-autofill:hover,
.register input:-webkit-autofill:focus,
.register input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px white inset !important; /* 背景色を白に */
    -webkit-text-fill-color: #000 !important;               /* 文字色を黒に */
    transition: background-color 5000s ease-in-out 0s;       /* 背景色の変化を無効化 */
}
.register #togglePassword {
	position: absolute;
    right: 3%;
    top: 55%;
    width: 3%;
    cursor: pointer;
}
.register button {
	margin: 2% auto 4%;
	width: 100%;
    padding: 20px;
    border: none;
    background-color: #000;
	font-family: "Meiryo", "Hiragino Sans", "Yu Gothic", sans-serif;
    font-size: 18px;
	color: #fff;
	cursor: pointer;
}
.register button:hover {
    background-color: #666666;
}
.register .line {
	width: 100%;
	height: 1px;
	margin: 4% auto 8%;
	background-color: #d3d3d3;
}
.register .registration {
	display: block;
    width: 100%;
    margin: 1% auto;
    border: 1px solid #000;
    padding: 20px;
}
.register .registration:hover {
    background-color: #000;
    color: #fff;
}

.register-error {
	color: red;
    font-size: 14px;
    position: absolute;
    bottom: -24px;
    right: 0;
}



/* お気に入り */

.none {
    position: absolute;
    bottom: 60%;
    right: 0;
    left: 0;
    margin: auto;
}



/*マイページ*/

.mypage {
	text-align: center;
	padding: 8% 30%;
}






/*共通*/

.page-top {
    position: fixed;
    bottom: 0;
    right:0;
	width: 90px;
	height: 90px;
	background-color: #37998e;
	border-radius: 50%;
	margin: 0 20px 30px 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	opacity: 0.9;
	z-index: 99;
}

.page-top p {
	font-size: 18px;
}

.page-top p::before {
	content: '';
    width: 24px;
    height: 24px;
    border-top: solid 2px #000;
    border-right: solid 2px #000;
    transform: rotate(-45deg);
	display: block;
	margin: 12px 0 -4px 6px;
}

.page-top:hover {
	opacity: 0.7;
}

.page-top:hover p {
	color: #fff;
}

.page-top:hover p::before {
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
}

footer {
	width: 100%;
	height: auto;
	background-color: #000;
	padding: 4% 8% 0.5%;
	margin-top: 8%;
	color: #fff;
}

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

.footer-menu {
	width: 50%;
    display: flex;
    gap: 15%;
    white-space: nowrap;
}

.menu-box dt {
	font-size: 18px;
	font-weight: 600;
	color: #37998e;
	margin-bottom: 1.2em;
}

.menu-box dd {
	font-size: 16px;
	margin-bottom: 1em;
}

footer a {
	color: #fff;
}

.sns {
	display: flex;
	align-items: end;
	gap: 2em;
	width: 320px;
	height: auto;
}

.fb  {
	width: 90px;
	height: auto;
}

.yt {
	margin-bottom: 5px;
}

footer p {
	text-align: center;
	font-size: 14px;
	margin-top: 6%;
}








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

	body {
		font-size: 16px;
	}
	body.fixed {
		position: fixed;
		width: 100%; /* 横スクロールズレ防止 */
		overflow: hidden;
	}

	
	header {
		height: 8vh;
	}
	.logo {
		width: 64%;
	}
	.icon {
		width: 30%;
		margin-right: 10%;
	}
	.icon img {
		width: 100%;
	}

	.humburger {
		display: block;
		width: 5%;
		height: 42%;
		position: absolute;
		top: 30%;
		right: 3%;
		z-index: 100;
	}
	.humburger span {
		width: 100%;
		height: 1.6px;
		background-color: #fff;
		position: absolute;
		left: 0;
		transition: 0.3s;
	}
	.humburger span:nth-child(1) {
		top: 15%;
	}
	.humburger span:nth-child(2) {
		top: 46%;
	}
	.humburger span:nth-child(3) {
		top: 78%;
	}
	.open .humburger span:nth-child(1) {
		top: 48%;
		transform: rotate(315deg);
	}
	.open .humburger span:nth-child(2) {
		width: 0;
		left: 50%;
	}
	.open .humburger span:nth-child(3) {
		top: 48%;
		transform: rotate(-315deg);
	}

	nav {
		background-color: #000;
		width: 40%;
		height: 100vh;
		position: fixed;
		top: 0;
		right: 0;
		transform: translateX(100%);
		transition: ease 0.4s;
		overflow-y: auto;
	}
	.nav {
		display: block;
		margin: 50% 16%;
	}
	.open nav {
		transform: translateX(0);
		z-index: 99;
	}
	.nav li {
		margin-bottom: 6%;
	}
	.nav a {
		font-size: 22px;
		display: block;
		width: 100%;
		padding: 5%;
	}
	nav a:hover::after {
		transform: scale(0);
	}
	nav a:hover {
		background-color: rgba(55, 153, 142, 0.7);
	}

	.nav-category {
		font-size: 22px;
		padding: 5%;
	}
	.nav-category::after {
		content: "▼";
		display: inline-block;
		margin-left: 1em;
		font-size: 0.7em;
		color: #fff;
		transition: transform 0.4s ease;
		transform-origin: center;
	}

	.dropdown-menu {
		max-height: 0;
		transform-origin: top;
		transform: rotateX(-90deg);
		overflow: hidden;
		transition: max-height 0.4s ease,opacity 0.4s ease,transform 0.4s ease;
		position: relative;
		background-color: transparent;
		backdrop-filter: none;
		box-shadow: none;
		margin-top: 6%;
	}
	.dropdown.open .dropdown-menu {
		max-height: 500px;
		opacity: 1;
		transform: rotateX(0deg);
	}
	.dropdown.open .nav-category::after {
		transform: rotateX(180deg);
	}
	.dropdown-menu li {
		margin: 0 0 4% 10%;
	}
	.dropdown-menu li a {
		text-shadow: none;
		font-size: 20px;
		padding: 5%;
	}
	.dropdown-menu li a:hover {
		background-color: rgba(55, 153, 142, 0.7);
	}





	#searchContainer {
		display: inline-block;
		width: 20%;
	}

	#searchToggleBtn {
		display: block;
		background: none;
		border: none;
		cursor: pointer;
	}

	#searchForm {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin: auto;
		width: 100%;
        height: 8vh;
		z-index: 98;
        display: flex;
		justify-content: space-evenly;
        align-items: center;
        background-color: rgba(55, 153, 142, 0.9);
        padding: 1% 10%;
		border: none;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

	#searchForm.show {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
	}

	#searchInput {
		all: unset; /* 全てリセット（強力） */
		box-sizing: border-box;
		border: none;
		background: transparent;
        border-bottom: 1px solid #fff;
        padding: 5px;
        width: 90%;
	}
	#searchInput:-webkit-autofill {
		box-shadow: 0 0 0 1000px transparent inset !important;
		-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
		-webkit-text-fill-color: white !important;
		transition: background-color 9999s ease-in-out 0s !important;
	}

	#searchSubmitBtn {
		position: relative;
		background: none;
		border: none;
		cursor: pointer;
	}

	
	.outer {
        margin: 8vh auto 0;
		padding: 0 4%;
    }
	.mv {
		margin-top: 8vh;
	}
	.top-img {
		grid-template-rows: 30vh;
		gap: 10px;
	}
	.top-img img {
		height: 30vh;
	}

	.news {
		padding: 0 8%;
	}
	.news-item {
		grid-template-columns: 1fr 3fr;
		grid-template-rows: 10vh;
		column-gap: 2%;
	}
	.news-item img {
		height: 10vh;
	}
	.news-text dt {
		font-size: 14px;
	}



	.sort-btn {
		font-size: 16px;
	}
	.all-item {
		row-gap: 2em;
		column-gap: 1em;
	}
	.product h3 {
		font-size: 16px;
	}
	.product .price {
		font-size: 14px;
	}
	.product .product-fav {
		bottom: 8%;
	}


	.product-detail {
		display: block;
		margin: 8vh auto 0;
	}
	.product-name {
    font-size: 22px;
	}
	.product-price {
		font-size: 18px;
	}
	.product-cart {
		line-height: 3.8;
	}

	.page-top {
		width: 70px;
		height: 70px;
		margin: 0 15px 15px 0;
		opacity: 0.8;
	}
	.page-top p {
		font-size: 16px;
	}
	.page-top p::before {
		width: 18px;
		height: 18px;
	}


	.footer-container {
		display: block;
	}
	footer {
		    padding: 8% 8% 0.5%;
	}
	.footer-menu {
		width: 100%;
		justify-content: space-evenly;
		text-align: center;
		gap: 0;
	}
	.menu-box dt {
		font-size: 16px;
	}
	.menu-box dd {
		font-size: 14px;
	}
	.sns {
		width: 280px;
		margin: 8% auto;
	}
	footer p {
		font-size: 12px;
	}


	.login {
		padding: 12% 15% 0;
	}
	.login input {
	    font-size: 16px;
	}
	.login #togglePassword {
		top: 38%;
		width: 3.5%;
	}
	.login button {
	    font-size: 16px;
	}
	.login .forget {
	    font-size: 14px;
		margin: 3% auto;
	}


	.register {
		padding: 12% 15% 0;
	}
	.register input {
		font-size: 16px;
	}
	.register button {
		font-size: 16px;
	}
	.register #togglePassword {
		top: 53%;
		width: 3.5%;
	}




	.mypage {
		padding: 10% 4%;
	}

}




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

	body {
		font-size: 14px;
	}
	.header-left {
		width: 32%;
	}
	.logo {
		width: 88%;
	}
    nav {
        width: 52%;
	}
	.nav a {
		font-size: 18px;
	}
		.nav-category {
		font-size: 18px;
	}
	.dropdown-menu li a {
		text-shadow: none;
		font-size: 16px;
	}

    .humburger {
        width: 6%;
        height: 42%;
        position: absolute;
        top: 30%;
		right: 3%;
    }

    .humburger span {
		height: 1px;
	}

	.icon {
		width: 38%;
		gap: 1em;
	}

    #searchContainer {
        width: 38%;
        margin-top: 4px;
    }

	#searchSubmitBtn {
		width: 10%;
		top: -8%;
	}

    .mv {
        margin-top: 7vh;
    }








	.top-img {
		width: 95%;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	.top-img img {
		height: 15vh;
		width: 100%;
		object-fit: cover;
	}

	h2 {
		font-size: 20px;
	}

    .news {
        padding: 0 4%;
    }
	.news-item:first-child {
		border-top: 1px solid #d0d0d0;
	}
	.news-text dt {
		font-size: 12px;
	}


    .sort-btn {
        font-size: 14px;
    }

	.sort-menu {
		font-size: 14px;
	}

	.all-item {
		grid-template-columns: repeat(2, 1fr);
	}

    .product h3 {
        font-size: 14px;
    }
	.product .price {
        font-size: 12px;
    }

	.product .product-fav {
		bottom: 5%;
	}



	.product-detail {
		margin: 7vh auto 0;
		padding: 0 8%;
	}
	.slick-prev {
		left: -20px;
	}
	.slick-next {
		right: -20px;
	}
    .product-name {
        font-size: 18px;
		margin: 3.5em 0 1em;
    }
	.product-price {
        font-size: 16px;
		margin-bottom: 2em;
    }

	.product-description {
		margin-bottom: 2em;
		font-size: 14px;
	}

	.btn-box {
		gap: 2%;
	}
	.product-cart {
		width: 82%;
		padding: 0;
		font-size: 16px;
	}
	.btn-box .product-fav {
		width: 17%;
	}
	.note {
		margin-bottom: 2em;
	}
	.accordion-content {
		font-size: 14px;
	}




	.login {
		padding: 18% 8% 0;
	}
	.login input {
		padding: 14px;
		font-size: 14px;
	}
	.login #togglePassword {
		width: 5%;
	}
	.login button {
		padding: 14px;
		font-size: 14px;
	}
	.login .forget {
		font-size: 12px;
	}
	.login .registration {
		padding: 14px;
	}




	.register {
		padding: 18% 8% 0;
	}
	.register input {
		padding: 14px;
		font-size: 14px;
	}
	.register #togglePassword {
		top: 54%;
		width: 5%;
	}
	.register button {
		padding: 14px;
		font-size: 14px;
	}
	.register .registration {
		padding: 14px;
	}


	.mypage {
        padding: 14% 4% 0;
    }


    .page-top {
        width: 52px;
        height: 52px;
		margin: 0 6px 8px 0;
    }
	.page-top p {
        font-size: 14px;
    }
	.page-top p::before {
    width: 10px;
    height: 10px;
    border-top: solid 1px #000;
    border-right: solid 1px #000;
    margin: 6px 0 -3px 9px;
	}


	footer {
        padding: 11% 8% 0.5%;
    }
	.footer-menu {
		justify-content: space-between;
	}
	.menu-box dt {
		font-size: 14px;
	}
	.menu-box dd {
		font-size: 12px;
	}
	.sns {
		width: 230px;
		margin: 11% auto;
	}
	footer p {
		font-size: 10px;
	}





}