/* ================================================================= ResetCss =================================================================*/
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%; font-weight: normal; vertical-align:baseline; background:transparent;}
body {line-height:1;}
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; outline: none; text-decoration: none;}
ins {background-color:#ff9; color:#000; text-decoration:none;}
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;}
hr {display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0;}
input, select {vertical-align:middle;}
img {vertical-align: top; font-size: 0; line-height: 0;}
*, *: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;}
img {max-width: 100%; height: auto;}
br {line-height: inherit;}


/* ================================================================= レスポンシブ =================================================================*/
.sp-only {display: none !important;}
.pc-only {display: block !important;}

@media screen and (max-width: 999px) {
	.pc-only {display: none !important;}
	.sp-only {display: block !important;}
}


/* ================================================================= 共通 =================================================================*/
html {width: 100%; height: 100%; font-size: 62.5%;}

@media screen and (max-width: 1920px) {
	html { font-size: 0.7142857vw; }
}

@media screen and (max-width: 999px) {
	html { font-size: 2.6666667vw; }
}

body {font-family: "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif; background: #fff; width: 100%; height: 100%; position: relative; margin: 0; line-height: normal; color: #040000; line-height: 1.75; padding-top: 9rem;}
body.top-page {font-size: 1.6rem; font-weight: 300;}

.en {font-family: "Roboto Condensed", sans-serif; font-weight: 400;}
.serif {font-family: "Noto Serif JP", serif; font-weight: 300;}

a {transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; color: #040000;}
a:hover {opacity: 0.7; transition: .2s all; text-decoration: none;}
a img {transition: .2s all;}
a img:hover {opacity: 0.7; transition: .2s all;}
button {transition: .2s all; cursor: pointer;}
button:hover {opacity: 0.7; transition: .2s all;}
form {margin: 0;}

main {position: relative; z-index: 1;}
.inner {width: 100%; max-width: 120rem; margin: 0 auto; position: relative;}

@media screen and (max-width: 999px) {
	.inner {padding: 0 2rem;}
	body {padding-top: 7.4rem;}
}

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

body.no-scroll {overflow: hidden;}


/* ================================================================= ヘッダー =================================================================*/
header {position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; transition: transform 0.5s ease, box-shadow 0.3s ease;}
header.is-fixed {box-shadow: 0 3px 10px rgba(0,0,0,0.05);}
header.is-unpinned {transform: translateY(-110%);}
header .flex {display: flex; align-items: center;}

.header-top {background: #000000; height: 3rem; display: flex; align-items: center; justify-content: center;}
.header-top p {color: #ffffff; font-size: 1.3rem; font-family: "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif; font-weight: 300; line-height: 1.5;}

.header-main {background: #ffffff; height: 6rem; position: relative;}
.header-main__inner {display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 2rem;}

.header-logo {display: flex; align-items: center;}
.header-logo img {height: 2.5rem; width: auto;}

.header-nav ul {display: flex; align-items: center; gap: 6.3rem;}
.header-nav li {position: relative;}
.header-nav li a {display: flex; align-items: center; gap: 0.8rem; font-size: 1.6rem; font-family: "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif; font-weight: 300; color: #040000; white-space: nowrap; line-height: 2.4rem;}
.header-nav .nav-arrow {display: inline-block; width: 0.7rem; height: 0.7rem; border-right: 0.1rem solid #040000; border-bottom: 0.1rem solid #040000; transform: rotate(45deg); margin-bottom: 0.3rem;}

.header-icons {display: flex; align-items: center; gap: 1.83rem; margin-left: 18rem;}
.header-icons a {display: flex; align-items: center; justify-content: center; width: 2rem; height: 3rem;}
.header-icons a img {width: auto; height: 2rem;}

.header-search {position: relative;}
.header-search__contents {position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; overflow: hidden; z-index: 100; pointer-events: none; transition: width .4s ease;}
.header-search__contents.is-on {width: 22rem; pointer-events: auto;}
.header-search__overlay {position: fixed; inset: 0; z-index: 99; display: none; background: rgba(0,0,0,0.2);}
.header-search__form {display: flex; align-items: center; background: #ffffff; height: 3rem; width: 100%;}
.header-search__contents.is-on .header-search__form {border-bottom: 0.1rem solid rgba(4,0,0,0.15);}
.header-search__input-wrap {flex: 1; min-width: 0;}
.header-search__input {width: 100%; border: none; background: transparent; height: 3rem; padding: 0 1rem; font-size: 1.4rem; font-family: "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif; font-weight: 300; color: #040000; outline: none;}
.header-search__input::placeholder {color: #bdbdbd;}
.header-search__submit {width: 3rem; height: 3rem; background: none; border: none; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; cursor: pointer;}
.header-search__submit img {width: 1.9rem; height: auto;}

#menu_button {display: none; cursor: pointer; width: 1.6rem; height: 3rem; flex-direction: column; justify-content: center; gap: 0.6rem; background: none; border: 0; padding: 0; margin-left: 1.4rem;}
#menu_button span {display: block; width: 100%; height: 0.1rem; background: #040000; transition: .3s all;}
#menu_button.active span:nth-child(1) {transform: translateY(0.375rem) rotate(45deg);}
#menu_button.active span:nth-child(2) {transform: translateY(-0.375rem) rotate(-45deg);}

@media screen and (max-width: 999px) {
	.header-top {height: 3rem;}
	.header-top p {font-size: 1.1rem;}
	.header-logo img {height: 2rem; width: auto;}
	.header-main {height: 6rem;}
	.header-nav {display: none;}
	.header-icons {display: flex; gap: 1rem; margin-left: auto;}
	.header-icons a {width: 3rem;}
	.header-search {display: none;}
	.icon-mypage-btn {display: none !important;}
	#menu_button {display: flex;}
}

/* ================================================================= メガメニュー =================================================================*/
.mega-menu { position: absolute; top: 100%; left: 0; width: 100%; background: #f7f8fa; z-index: 9997; opacity: 0; visibility: hidden; pointer-events: none; transform: none; transition: opacity .25s ease, visibility .25s ease; }
.mega-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.mega-menu__panel { display: none; width: 100%; }
.mega-menu__panel.is-active { display: block; }
.mega-menu__inner { width: 100%; max-width: 120rem; margin: 0 auto; padding: 3.8rem 0 4rem; display: flex; gap: 3rem; }
.mega-menu__inner--grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.6rem 8rem; }
.mega-menu__col { width: 38rem; }
.mega-menu__heading { font-size: 1.6rem; font-family: "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif; font-weight: 300; color: #040000; line-height: 1.5; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 0.1rem solid #C9C9C9; }
.mega-menu__links { display: flex; flex-direction: column; gap: 0.8rem; }
.mega-menu__links a, .mega-menu__item { display: block; font-size: 1.6rem; font-family: "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif; font-weight: 300; color: #040000; line-height: 1.5; letter-spacing: 0.02em; }
.header-nav li.has-child.is-active > a { color: #040000; }
.header-nav li.has-child.is-active > a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1rem; height: 0.1rem; background: #9e7e32; }
.header-nav li.has-child .nav-arrow { transition: transform .25s ease; }
.header-nav li.has-child.is-active .nav-arrow { transform: rotate(-135deg); margin-bottom: -0.2rem; }


/* ================================================================= SPドロワーメニュー =================================================================*/
#head_submenu {position: fixed; inset: 0; z-index: 9998; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease, visibility .35s ease; display: none;}

@media screen and (max-width: 999px) {
	#head_submenu {display: block;}
	#head_submenu.open {opacity: 1; visibility: visible; pointer-events: auto;}
	#head_submenu .head-bg {position: absolute; inset: 0; background: rgba(0,0,0,0.3);}
	#head_submenu .head {position: absolute; top: 0; width: 100%; height: 100%; background: #f7f8fa; overflow-y: auto; padding-top: 7.4rem;}

	/* 検索 */
	.sp-drawer-light {padding: 4rem 2rem 0;}
	.sp-drawer-search-wrap {position: relative; height: 5rem; background: #fff;}
	.sp-drawer-search-input {width: 100%; height: 100%; border: 0; background: transparent; padding: 0 5rem 0 2rem; font-size: 1.4rem; font-family: "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif; font-weight: 300; color: #040000; appearance: none; outline: none; border: 1px solid #E5E5E5;}
	.sp-drawer-search-input::placeholder {color: #bdbdbd;}
	.sp-drawer-search-icon {position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); width: 1.9rem; height: 1.9rem; pointer-events: none; background: none; border: none; padding: 0;}
	.sp-drawer-search-icon img {width: 100%; height: auto;}

	/* ナビリンク */
	.sp-drawer-nav {margin-top: 4rem; display: flex; flex-direction: column;}
	.sp-drawer-accordion {display: flex; flex-direction: column;}
	.sp-drawer-nav-item {display: flex; align-items: center; justify-content: space-between; height: 5.4rem; font-size: 1.6rem; font-family: "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif; font-weight: 300; color: #040000; width: 100%; background: none; padding: 0; text-align: left; cursor: pointer; border: 0px;}
	.sp-drawer-nav-item--arrow::after {content: ''; display: block; width: 0.8rem; height: 0.8rem; border-right: 0.1rem solid #040000; border-top: 0.1rem solid #040000; transform: rotate(135deg); flex-shrink: 0; transition: transform 0.3s ease;}
	.sp-drawer-nav-item--arrow.is-open::after {transform: rotate(-45deg);}
	.sp-drawer-accordion-body {max-height: 0; overflow: hidden; transition: max-height 0.35s ease;}
	.sp-drawer-accordion-body.is-open {max-height: 60rem;}
	.sp-drawer-sub-item {display: flex; align-items: center; height: 4.5rem; padding: 0 0 0 1.5rem; font-size: 1.4rem; font-family: "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif; font-weight: 300; color: #040000; border-bottom: 0.1rem solid rgba(4,0,0,0.1);}
	.sp-drawer-sub-item:last-child {border-bottom: none;}

	/* ダークセクション */
	.sp-drawer-dark {margin-top: 4rem; background: #040000; padding: 4rem 2rem 6rem;}
	.sp-drawer-dark-section + .sp-drawer-dark-section {margin-top: 2.7rem;}
	.sp-drawer-dark-heading {font-size: 1.4rem; font-family: "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif; font-weight: 300; color: #fff; line-height: 4.5rem;}
	.sp-drawer-dark-links {margin-left: 2rem;}
	.sp-drawer-dark-links li a {display: block; font-size: 1.4rem; font-family: "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif; font-weight: 300; color: #fff; height: 4.5rem; line-height: 4.5rem;}

	/* SNSアイコン */
	.sp-drawer-sns {display: flex; align-items: center; justify-content: center; gap: 2rem; margin-top: 3rem;}
	.sp-drawer-sns-link img, .sp-drawer-sns-link svg {width: 4rem; height: 4rem; display: block;}
}



/* ================================================================= フッター =================================================================*/
footer {background: #040000; padding-bottom: 11rem;}
.footer-inner {max-width: 120rem; margin: 0 auto; padding: 11rem 0rem 0rem; display: flex; justify-content: space-between; align-items: flex-start; gap: 4rem;}

.footer-logo a {display: flex; align-items: center;}
.footer-logo img {height: 4rem; width: auto;}

.footer-sns {display: flex; gap: 1.5rem; margin-top: 5rem;}
.footer-sns a {display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem;}
.footer-sns a img {width: 4rem; height: 4rem;}

.footer-nav {display: flex; gap: 10.1rem; align-items: flex-start; margin-right: 17.2rem;}
.footer-nav-col {display: flex; flex-direction: column; gap: 1rem;}
.footer-nav-col span {color: #fff; display: flex; align-items: center;}
.footer-nav-col a {font-size: 1.4rem; font-family: "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif; font-weight: 300; color: #ffffff; line-height: 2.7rem;}

.footer-copy {display: flex; justify-content: flex-start; padding: 0 0rem 3rem; max-width: 120rem; margin: -2rem auto 0;}
.footer-copy p {font-size: 1.2rem; font-family: "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif; font-weight: 300; color: #ffffff; line-height: 2.4rem;}

@media screen and (max-width: 999px) {
	.footer-inner {flex-direction: column; align-items: center; gap: 6rem; padding: 8rem 2rem 3rem;}
	.footer-logo {display: flex; flex-direction: column; align-items: center;}
	.footer-logo img {height: 3.6rem;}
	.footer-sns {justify-content: center; margin-top: 3.4rem;}
	.footer-nav {flex-direction: column; gap: 0; width: 100%; margin-right: 0;}
	.footer-nav-col {width: 100%; text-align: center; gap: 0;}
	.footer-nav-col span {justify-content: center;}
	.footer-nav-col a {display: block; text-align: center; padding: 0; line-height: 4.55rem;}
	.footer-copy {justify-content: center; margin: 2rem auto 0;}
}
/* ================================================================= 共通：セクションタイトル =================================================================*/
.sec-ttl {text-align: center; margin-bottom: 6rem;}
.sec-ttl__en {display: block; font-size: 1.5rem; font-family: "Roboto Condensed", sans-serif; font-weight: 400; color: #9e7e32; line-height: 1.17; letter-spacing: 0.05em;}
.sec-ttl__line {display: block; width: 2rem; height: 0.1rem; background: #9e7e32; margin: 1.5rem auto 2rem;}
.sec-ttl__jp {display: block; font-size: 2.5rem; font-family: "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif; font-weight: 300; color: #040000; line-height: 1.5;}

@media screen and (max-width: 999px) {
	.sec-ttl {margin-bottom: 4rem;}
	.sec-ttl__jp {font-size: 2.5rem;}
}


/* ================================================================= 共通：VIEW MORE ボタン =================================================================*/
.btn-more {display: inline-flex; align-items: center; justify-content: center; width: 22.9rem; height: 6rem; background: #323232; padding: 0 2.5rem; color: #ffffff; font-size: 1.6rem; font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", sans-serif; font-weight: 400; letter-spacing: 0.05em; position: relative; transition: .2s all;}
.btn-more:hover {opacity: 0.7; color: #ffffff;}
.btn-more .arrow {display: block; position: absolute; right: 2.5rem; top: 50%; transform: translateY(-50%); width: .8rem;}

.btn-more--white {background: #ffffff; color: #040000; font-size: 1.6rem; border: 0.1rem solid rgba(4,0,0,0.5);}
.btn-more--white:hover {opacity: 0.7; color: #040000;}
.btn-more--white-dark {background: #ffffff; color: #332f2f; border: 0.1rem solid rgba(4,0,0,0.5);}
.btn-more--white-dark:hover {opacity: 0.7; color: #332f2f;}

.btn-more--white .arrow { filter: brightness(0) invert(1) brightness(0.2);}

@media screen and (max-width: 999px) {
	.btn-more {width: 23rem; height: 5.5rem; padding: 0 2rem; font-size: 1.4rem; margin: auto;}
	.btn-more .arrow {right: 2rem;}
}


/* ================================================================= 共通：商品カードリスト =================================================================*/
.product-list {display: flex; flex-wrap: wrap; gap: 4rem;}
.product-item {position: relative; width: 27rem; flex-shrink: 0;}
.product-item a {display: block;}
.product-img {position: relative; width: 27rem; height: 27rem; overflow: hidden;}
.product-img a {height: 100%;}
.product-img img {width: 100%; height: 100%; object-fit: cover;}
.product-wishlist {position: absolute; bottom: 1.5rem; right: 1.5rem; width: 2.1rem; height: 1.9rem; padding: 0; background: none; border: none; cursor: pointer;}
.product-wishlist svg {width: 100%; height: auto; display: block;}
.product-wishlist svg path {transition: fill 0.2s, stroke 0.2s;}
.product-wishlist.is-added svg path {fill: #040000;}
.product-name {font-size: 1.6rem; font-family: "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif; font-weight: 300; color: #040000; line-height: 2.4rem; margin-top: 2rem;}
.product-price {font-size: 1.2rem; font-family: "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif; font-weight: 300; color: #040000; line-height: 1.8rem; margin-top: 0.8rem;}

@media screen and (max-width: 999px) {
	.product-list {gap: 1.5rem; flex-wrap: wrap; overflow-x: visible; padding-bottom: 0;}
	.product-item {width: calc(50% - 0.75rem); flex-shrink: 0;}
	.product-img {width: 100%; aspect-ratio: 1; height: auto;}
	.product-name {margin-top: 1.5rem;}

	.product-wishlist {right: 1rem; bottom: 0.2rem;}
}



/* ================================================================= お気に入りした商品 =================================================================*/
.fav {margin-top: 12rem; margin-bottom: 12rem; padding: 0/*0 0 12rem*/; font-size: 1.6rem; font-weight: 300;}
.fav .inner {padding: 0;}
.fav .sec-ttl {margin-bottom: 6rem;}

@media screen and (max-width: 999px) {
	.fav {margin-top: 8rem; margin-bottom: 8rem; padding: 0/*0 0 8rem*/;}
	.fav .inner {padding: 0 2rem;}
}


/* ================================================================= 最近チェックした商品 =================================================================*/
.check {margin-top: 12rem; margin-bottom: 12rem; padding: 0/*0 0 12rem*/; font-size: 1.6rem; font-weight: 300;}
.check .inner {padding: 0;}
.check .sec-ttl {margin-bottom: 6rem;}

@media screen and (max-width: 999px) {
	.check {margin-top: 8rem; margin-bottom: 8rem; padding: 0/*0 0 8rem*/;}
	.check .inner {padding: 0 2rem;}
}


/* ================================================================= ショッピングガイド =================================================================*/
.shopping-guide {background: #f7f8fa; padding: 11.6rem 0 12rem; font-size: 1.6rem; font-weight: 300;}
.shopping-guide .inner {padding: 0;}
.guide-cols {display: flex; align-items: flex-start; gap: 0; position: relative;}
.guide-cols::before {content: ''; position: absolute; left: 38.9rem; top: 0; bottom: 0; width: 0.1rem; background: rgba(4,0,0,0.4);}
.guide-cols::after {content: ''; position: absolute; left: 81rem; top: 0; bottom: 0; width: 0.1rem; background: rgba(4,0,0,0.4);}
.guide-col {flex: 1; padding: 0 4.2rem;}
.guide-col:first-child {padding-left: 0;}
.guide-col__title {font-size: 2rem; font-family: "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif; font-weight: 300; color: #040000; line-height: 3rem; margin-bottom: 1.8rem; padding-bottom: 1.5rem;}
.guide-section {margin-bottom: 3rem;}
.guide-section__head {font-size: 1.6rem; font-family: "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif; font-weight: 300; color: #040000; line-height: 2.4rem; margin-bottom: 1.5rem;}
.guide-section__body {font-size: 1.4rem; font-family: "Hiragino Kaku Gothic Pro", "Noto Sans JP", sans-serif; font-weight: 300; color: #040000; line-height: 2.4rem;}
.creditcard-img {margin-top: 0.8rem;}
.creditcard-img img {height: 4.7rem; width: auto;}

@media screen and (max-width: 999px) {
	.shopping-guide {padding: 6rem 2rem 8rem; display: none;}
	.guide-cols {flex-direction: column; gap: 4rem;}
	.guide-cols::before, .guide-cols::after {display: none;}
	.guide-col {padding: 0;}
}