/* ===========================================
  Gloabl Customization
=========================================== */
:root {
  --color-primary: #4A7B11;
  --color-emphasis: #CC0000;
  --color-text-default: #363232;
  --color-styling-background: #F8F7F6;
  --font-en: "EB Garamond";
  --font-ja: "Noto Serif JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo;
  --font-base: var(--font-en), var(--font-ja), sans-serif;

  /* --content-width-max: min(95%, 136.6rem);
  --content-padding-inline: min(3.6603221083svw, 5rem);

  --social-icon-size: min(2.9282576867svw, 4rem); */
}
html,
body {
  scroll-behavior: smooth;
  scroll-padding: 10svh;
}
body {
  font-family: var(--font-base);
  color: var(--color-text-default);
}

@media (hover: hover) and (pointer: fine) {
  :where(a) {
    transition: opacity var(--transition-default);
  }
  :where(a):hover {
    opacity: 0.6;
  }
}

/* ===========================================
  Custom Components
=========================================== */


/* ===========================================
  Header Customization
=========================================== */
.cs-header {
  position: sticky;
  z-index: 10;
  top: 0;
  left: 0;
}
.cs-header-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  background-color: var(--color-white);
}

@media screen and (max-width: 767px) {
  .cs-header-wrap {
    min-height: 7.75rem;
  }
}
@media screen and (min-width: 768px) {
  .cs-header-wrap {
    /* column-gap: min(2.9850746269svw, 4rem); */
    column-gap: 4rem;
  }
}

.cs-header__ticker {
  color: var(--color-white);
  background-color: var(--color-primary);
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cs-header__ticker-item-inner {
  display: block;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-ja);
  font-weight: bold;
  font-size: 1.3rem;
  line-height: 1.45;
  letter-spacing: 0.07em;
}

.cs-header-wrap__utility {
  display: flex;
  align-items: center;
  gap: 3rem;
  margin-left: auto;
  margin-right: 0;
}
.cs-header-utilityList {
  display: flex;
  gap: 1.5rem;
}
.s-header-utilityList__item {
  flex-shrink: 0;
}
.cs-header-utilityList__icon {
  width: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.cs-header-utilityList__icon img {
  width: 3rem;
}
.s-header-utilityList__item-label {
  font-size: 1.2rem;
  white-space: nowrap;
}
.s-header-contentsNav__navLink,
.s-header-contentsNav__navLink > a {
  font-family: var(--font-ja);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.4;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.s-header-contentsNav__navLink--toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}
.s-header-contentsNav__navLink--toggle::after {
  content: '';
  display: block;
  width: min(1.4925373134svw, 2rem);
  height: min(1.4925373134svw, 2rem);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg id='グループ_24772' data-name='グループ 24772' transform='translate(-785 -1608)'%3E%3Cpath id='パス_50032' data-name='パス 50032' d='M340.682,957l4,4-4,4' transform='translate(1756.5 1275.958) rotate(90)' fill='none' stroke='%234a7b11' stroke-linecap='square' stroke-width='1.2'/%3E%3Crect id='長方形_5845' data-name='長方形 5845' width='20' height='20' transform='translate(785 1608)' fill='none'/%3E%3C/g%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: contain;
  transition: scale var(--transition-default);
}

@media (hover: hover) and (pointer: fine) {
  .s-header-categoryNav:hover .s-header-contentsNav__navLink--toggle::after {
    scale: 1 -1;
  }
}

.c-freeWordSearchBox {
  border: 1px solid #E3E3E3;
  border-radius: 0;
  padding: 0 0.5rem 0 1.4rem;
  gap: 0;
}
.c-freeWordSearchBox input[type=search]::placeholder {
  font-size: 1.4rem;
  line-height: 1.4;
  letter-spacing: 0.1em;
  color: #939393;
}
.cs-freeWordSearchBox__form {
  padding-block: 1rem;
  padding-inline: 0;
}
.cs-freeWordSearchBox__submit {
  padding: 0;
  margin: 0;
  border: none;
  background-color: transparent;
  width: 2.5rem;
  aspect-ratio: 1;
  flex-shrink: 0;
  cursor: pointer;
}

@media screen and (min-width: 992px) {
  .cs-header-wrap {
    padding-inline: min(2.9850746269svw, 4rem);
    position: relative;
    z-index: 2;
    column-gap: min(2.2388059701svw, 3rem);
    min-height: 8rem;
  }
  .cs-header-utilityList {
    display: flex;
    column-gap: min(1.1194029851svw, 1.5rem);
  }
  .cs-header-wrap__utility {
    column-gap: min(2.2388059701svw, 3rem);
  }
  .s-header-wrap__logo {
    width: min(14.9253731343svw, 20rem);
  }
  .cs-header-utilityList__icon img {
    width: min(2.2388059701svw, 3rem);
  }

  .s-header-categoryNav__body {
    top: calc(100% - 1px);
    border-top: 1px solid #E3E3E3;
  }
  .s-header-contentsNavBlock,
  .s-header-contentsNav__navlist {
    column-gap: min(2.2388059701svw, 3rem);
  }

  .cs-header-freeWordSearch {
    width: min(16.0447761194svw, 21.5rem);
  }
  .cs-freeWordSearchBox__submit {
    width: min(1.8656716418svw, 2.5rem);
  }
  .s-header-categoryNav {
    border-bottom: 2px solid transparent;
  }
  .s-header-categoryNav:hover {
    border-bottom: 2px solid var(--color-primary);
  }
}


/* Custom Footer */
.cs-footer {
  background-color: #F8F7F6;
}
.cs-footer__copy {
  background-color: var(--color-primary);
  text-align: center;
  padding: 0.7rem;
  color: var(--color-white);
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
}

.cs-footer__brand-area {
  display: flex;
  flex-direction: column;
  row-gap: 3rem;
}

.cs-footer__brand-social-list {
  display: flex;
  justify-content: space-between; 

}
.cs-footer__brand-social-item a {
  display: grid;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-text-default);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
}
.cs-footer__nav-area {
  display: flex;
  flex-direction: column;
  row-gap: 3rem;
}
.cs-footer__contact {
  padding: 2rem 3rem;
  background-color: var(--color-white);
}
.cs-footer__contact {
  display: flex;
  flex-direction: column;
  row-gap: 0.2rem;
}
.cs-footer__contact dt {
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.4375;
  letter-spacing: 0.1em;
}
.cs-footer__contact dd span {
  font-family: var(--font-ja);
  font-weight: bold;
  font-size: 3rem;
  line-height: 1.4666;
  letter-spacing: 0.08em;
  color: var(--color-primary);
}
.cs-footer__contact dd small {
  display: inline-flex;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  margin-left: 1.2rem;
}
.cs-footer__navigation {
  display: flex;
  flex-wrap: wrap;
  column-gap: 4rem;
  row-gap: 2rem;
}
.cs-footer__navigation li a {
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  column-gap: 0.6rem;

}
.cs-footer__navigation li a::before {
  content: '';
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background-color: var(--color-primary);
}

@media screen and (min-width: 768px) {
  .cs-footer__inner {
    max-width: 134rem;
    margin-inline: auto;
    padding-block: 6rem;
    padding-inline: min(7.4626865672svw, 10rem);
    display: grid;
    grid-template-columns: min(22.01492537313svw, 29.5rem) 1fr;
    column-gap: min(5.9701492537svw, 8rem);
  }
  .cs-footer__brand-social-item a {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: min(0.5970149254svw, 0.8rem);
    font-size: min(1.0447761194svw, 1.4rem);
  }
}

.c-product-sIcon__item:not(:has(img)),
.c-productUser-sIcon__item:not(:has(img)) {
  display: none;
}
.c-product-sIcon__item,
.c-productUser-sIcon__item {
  height: 1.6rem;
}
.c-product-sIcon__item img,
.c-productUser-sIcon__item img {
  width: auto;
  height: 100%;
}

@media screen and (max-width: 768px) {
  .cs-header-wrap {
    justify-content: flex-end;
    padding-block: 1.5rem;
  }
  .s-header-wrap__logo {
    width: 19rem;
  }
  .s-header-wrap__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -55%;
  }
  .cs-header-utilityList {
    gap: 0;
  }
  .cs-header-utilityList__icon {
    width: 4.5rem; 
  }
  .s-header-wrap__nav {
    width: 4.8rem;
  }
  .s-header-navBlok__openBtn {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 4.8rem;
    height: 4.7rem;
  }
  .s-header-navBlok__openBtn small {
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
  }
  .s-header-navBlok__nav {
    top: calc(var(--header-height) - 1px);
  }
  .s-header-navBlok__openBtn small {
    position: absolute;
    bottom: -1.6rem;
    white-space: nowrap;
  }
  .cs-header-utilityList__item-label {
    font-weight: 500;
    font-size: 1.1rem;
  }
  .s-header-navBlok__openBtn:before,
  .s-header-navBlok__openBtn:after,
  .s-header-navBlok__openBtn > span {
    left: 50%;
    translate: -50% 0;
  }
  .s-header-navBlok__openBtn::before, .s-header-navBlok__openBtn::after, .s-header-navBlok__openBtn > span {
    height: 2px;
  }

  .cs-footer__inner {
    padding-block: 3rem;
  }
  .cs-footer__brand-logo {
    width: 22rem;
    margin-inline: auto;
  }
  .cs-footer__brand-social-list {
    justify-content: center;
    gap: 2rem;
  }
  .cs-footer__brand-social-item a {
    grid-template-columns: 2.4rem 1fr;
    gap: 0.8rem;
    align-items: center;
  }
  .cs-footer__contact {
    width: calc(100% - 3rem);
    margin-top: 3rem;
    margin-inline: auto;
    text-align: center;
  }
  .cs-footer__contact dd small {
    margin-left: 0;
    text-align: center;
  }
  .cs-footer__navigation {
    padding-inline: 1.5rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    row-gap: 1.5rem;
  }
  .cs-footer__navigation li a {
    font-size: 1.2rem;
  }
}

.c-product-head__picture::before {
  padding-top: 100%;
}
.c-product-head__image {
  object-fit: cover;
}

.cs-header-category__row a {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.cs-header-category__row a img {
  width: 4rem;
}
.cs-header-category__row-head {
  font-size: 1.8rem;
  letter-spacing: 0.1em;
}
.cs-header-category__row-body {
  font-size: 1.6rem;
  letter-spacing: 0.1em;
}

@media screen and (min-width: 768px) {
  .s-header-categoryNav__body {
    background-color: var(--color-white);
    z-index: 3;
  }

  .s-header-categoryNav__body::after {
    content: '';
    display: block;
    position: fixed;
    top: 100%;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: rgba(12, 21, 1, 0.4);
  }

  .cs-header-category {
    display: flex;
    flex-direction: column;
    row-gap: 3rem;
    width: min(95%, 100rem);
    margin-inline: auto;
  }
  .cs-header-category__row {
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
  }
  .cs-header-category__row-body .cs-header-category__row-list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    row-gap: 2rem;
  }
  .cs-header-category__row-head .cs-header-category__row-list{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.s-headerModalBoxHeding__closeBtn {
  color: #363232;
}
.s-headerModalBoxHeding__closeBtn::before {
  font-size: 2rem;
}

.s-headerRefinedSearchBox input[type="text"],
.s-headerRefinedSearchBox input[type="search"],
.s-headerRefinedSearchBox input[type="password"],
.s-headerRefinedSearchBox select,
.s-headerRefinedSearchBox-item__checkList {
  border-radius: unset;
  border-color: #E3E3E3;
}
.s-headerRefinedSearchBox select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg id='グループ_24796' data-name='グループ 24796' transform='translate(20) rotate(90)'%3E%3Cpath id='パス_50032' data-name='パス 50032' d='M0,8.562,4.281,4.281,0,0' transform='translate(8.5 5.938)' fill='none' stroke='%234a7b11' stroke-linecap='square' stroke-width='1.2'/%3E%3Crect id='長方形_5845' data-name='長方形 5845' width='20' height='20' fill='none'/%3E%3C/g%3E%3C/svg%3E%0A");
  background-size: 2rem 2rem;
  background-position: calc(100% - 1rem) center;
}

@media screen and (max-width: 767px) {
  .s-header-navBlok__nav {
    background-color: #F8F7F6;
  }
  .s-header-contentsNavBlock__item {
    width: calc(100% - 2rem);
    margin-inline: auto;
  }
  .s-header-categoryNav {
    background-color: var(--color-white);  
    padding: 2rem 0.5rem 2rem 2rem;
    border: 1px solid #E3E3E3;
  }
  .s-header-categoryNav > dt {
    width: 100%;
    justify-content: space-between;
  }
  .s-header-categoryNav__body {
    margin-top: 2rem;
  }
  .s-header-contentsNav__navLink--toggle::after {
    width: 2rem;
    height: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg id='グループ_14051' data-name='グループ 14051' transform='translate(-1608 805) rotate(-90)'%3E%3Cpath id='パス_50032' data-name='パス 50032' d='M340.682,957l4.281,4.281-4.281,4.281' transform='translate(452.818 656.5)' fill='none' stroke='%234a7b11' stroke-linecap='square' stroke-width='1.2'/%3E%3Crect id='長方形_5845' data-name='長方形 5845' width='20' height='20' transform='translate(785 1608)' fill='none'/%3E%3C/g%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: contain;
    transition: scale var(--transition-default);
    scale: 1 1 !important;
  }
  .is-closed .s-header-contentsNav__navLink--toggle::after {
    scale: 1 -1 !important;
  }
  .s-header-contentsNav__navLink {
    font-size: 2rem;
  }
  .cs-header-category__row a img {
    width: 5rem;
  }
  .cs-header-category {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
  }
  .cs-header-category__row-body .cs-header-category__row-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 1rem;
  }
  .cs-header-category__row {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
  }
  .cs-header-category__row-head .cs-header-category__row-list {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }
  .s-header-contentsNavBlock {
    display: flex;
    flex-direction: column;
    row-gap: 0.7rem;
  }
  .s-header-contentsNav__head {
    display: none;
  }
  .s-header-contentsNav__navlist {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
  }
  .s-header-categoryNav__navLink, .s-header-contentsNav__navLink {
    border: none;
  }
  .s-header-contentsNav__navLink a {
    background-color: var(--color-white);
    border: 1px solid #E3E3E3;
    font-size: 2rem;
    padding: 1.5rem 0.5rem 2rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }
  .s-header-contentsNav__navLink a::after {
    content: '';
    display: block;
    width: 2rem;
    height: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg id='グループ_14043' data-name='グループ 14043' transform='translate(-785 -1608)'%3E%3Cpath id='パス_50032' data-name='パス 50032' d='M340.682,957l4.281,4.281-4.281,4.281' transform='translate(452.818 656.5)' fill='none' stroke='%234a7b11' stroke-linecap='square' stroke-width='1.2'/%3E%3Crect id='長方形_5845' data-name='長方形 5845' width='20' height='20' transform='translate(785 1608)' fill='none'/%3E%3C/g%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: contain;
  }
  .s-header-linkList {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    row-gap: 1.4rem;
    padding-inline: 1rem;
  }
  .s-header-linkList li a {
    font-size: 1.4rem;
    letter-spacing: 0.1em;
  }
  .cs-header-accountNav {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    padding: 0 1rem 1rem;
  }
  .cs-header-accountNav__utility {
    display: grid;
    grid-template-columns: 37.4647887324% 1fr;
    gap: 0.6rem;
  }
  .cs-header-accountNav__utility-button {
    height: 6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.2rem;
    background-color: var(--color-white);
    border: 1px solid #E3E3E3;
    font-weight: 500;
    font-size: 1.4rem;
    letter-spacing: 0.1em;
  }
  .cs-header-accountNav__utility-button img {
    width: 3rem;
  }
  .cs-header-accountNav .c-freeWordSearchBox {
    background-color: var(--color-white);
  }
}
.s-header__cartCnt {
  top: -0.2rem;
  right: 0;
  width: 1.8rem;
  height: 1.8rem;
  font-family: "游明朝体", "Yu Mincho", YuMincho, serif;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.03em;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #CC0000;
}
@media screen and (max-width: 767px) {
  .s-header__cartCnt {
    top: -0.6rem;
    right: 0.3rem;
  }
}
@media screen and (min-width: 768px) {
  .s-header__cartCnt {
    width: min(1.3432835821svw, 1.8rem);
    height: min(1.3432835821svw, 1.8rem);
    font-size: min(0.7462686567svw, 1rem);
  }
}