@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }}
body { opacity: 0; animation: fadeIn 0.7s ease-in-out forwards; }
/* -------------------------------------------------- body --------------------------------------------------- */
body { font-family: "M PLUS 1", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; }
img { border-radius: 10px; } .fs-c-productMark__image { border-radius: 0;}
a { text-decoration: none; }
/* -------------------------------------------------- header --------------------------------------------------- */
.fs-l-header { display: flex; align-items: center; justify-content: space-between; margin: 20px auto 30px auto; padding: 8px; height: 45px; width: 90%; max-width: 1186px; }
.fs-l-header__contents { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.fs-l-header__leftContainer { flex: 0 0 4em; display: flex; align-items: center; }
.fs-l-header__utility { flex: 0 0 4em; display: flex; align-items: center; justify-content: flex-end; }
.fs-l-header__welcomeMsg, .fs-l-header__welcomeMsg.is-ready, .fs-l-header__utility .fs-l-header__cart, .fs-l-header__utility .fs-l-header__search, .fs-l-header__utility .fs-l-header__login { display: none; }
/* -------------------------------------------------- header logo --------------------------------------------------- */
.fs-l-header__logo { flex: 0 1 auto; display: flex; align-items: center; justify-content: flex-start; max-width: 120px; }
.fs-p-logo { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; }
.fs-p-logo__image { max-height: 48px; height: auto; width: auto; max-width: 100%; border-radius: 0;}
.fs-p-logo__lead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
/* -------------------------------------------------- header search box --------------------------------------------------- */
.fs-p-searchForm { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
.fs-p-searchForm__inputGroup.fs-p-inputGroup { background-color: #F5F5F5; border: none; border-radius: 8px; display: flex; align-items: center; padding: 0.5em; }
.fs-p-searchForm__input { width: clamp(73px, 50.88vw - 117.8px, 680px); border: none; background-color: transparent; outline: none; padding: 0; }
.fs-p-searchForm__button.fs-p-inputGroup__button { overflow: hidden; position: relative; width: 2.2em; height: 100%; background-color: transparent; border: none; border-radius: 8px; display: flex; align-items: center; justify-content: center;}
.fs-p-searchForm__button::before { font-size: 2rem; line-height: 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-indent: 0; display: block; color: black; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
/* ------------------------------------------------ header navigation --------------------------------------------------- */
.fs-l-header__rightContainer { margin: 0 auto; }
.fs-p-headerNavBar { border-bottom: none;}
.fs-p-headerNavigation__list { display: flex; flex-wrap: nowrap; justify-content: space-between; }
.fs-p-headerNavigation__listItem { flex-grow: 0; flex-shrink: 1; display: flex; justify-content: center; align-items: center; width: auto; min-width: 0; background-color: #F0EEEC;}
.fs-p-headerNavigation__link { background: transparent; border-radius: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1rem; padding: 0px; line-height: 1; }
.fs-p-headerNavigation__listItem svg { width: 24px; height: 24px; margin: 8px; display: block; }
/* -------------------------------------------------- header carousel --------------------------------------------------- */
.fs-carousel { margin-top: 20px; }
.fs-pt-carousel__slide { padding: 0 0.15625vw; width: 700px; height: 394px; }
.fs-pt-carousel__slide img, .fs-carousel__image { width: 700px; height: 394px; object-fit: cover; }
/* -------------------------------------------------- header carousel caption--------------------------------------------------- */
.fs-pt-carousel__slide__caption { padding: 8px 20px; font-weight: bold; font-size: 25px; background: linear-gradient(to right, rgba(30, 30, 30, 0.4), rgba(30, 30, 30, 0.1)); color: #fff; position: absolute; right: 0; bottom: 0; left: 0; max-width: 700px; margin: 0 auto; margin-bottom: 20px; display: flex; flex-direction: column; align-items: flex-start; }
.fs-pt-carousel__slide__caption .tag { padding: 5px 10px; border-radius: 5px; font-size: 14px; margin-bottom: 5px; }
.fs-pt-carousel__slide__caption .tag.red { background-color: #e60023; color: #fff; }
.fs-pt-carousel__slide__caption .tag.orange { background-color: #dc762c; color: #fff; }
.fs-pt-carousel__slide__caption .tag.blue { background-color: #007bff; color: #fff; }
.fs-pt-carousel__slide__caption .subtitle { font-size: 18px; margin-bottom: 5px; }
.fs-pt-carousel__slide__caption .headline { font-size: 25px; font-weight: bold; }
/* -------------------------------------------------- header carousel dots--------------------------------------------------- */
.fs-c-slick .slick-dots li { height: 12px; width: 12px; margin: 5px; }
.fs-c-slick .slick-dots li button { height: 12px; width: 12px; }
.fs-c-slick .slick-dots li button:before { width: 12px; height: 12px; font-size: 10px; line-height: 12px; }
/* -------------------------------------------------- sub navigation --------------------------------------------------- */
.sub-navigation { display: flex; justify-content: center; align-items: center; padding: 20px 0; margin-bottom: 60px; }
.sub-navigation ul { list-style: none; display: flex; gap: 40px; padding: 0; margin: 0; width: 100%; }
.sub-navigation li { background-color: #222021; border-radius: 10px; padding: 20px; text-align: center; flex: 1; }
.sub-navigation a { text-decoration: none; color: #FFFFFF; display: flex; flex-direction: column; align-items: center; }
.sub-navigation svg { margin-bottom: 10px; }
.sub-navigation span { font-size: 14px; }
/* -------------------------------------------------- heading --------------------------------------------------- */
.fs-p-heading--lv2 { border-bottom: none; color: #000; font-size: 1.2rem; letter-spacing: 0.1em;  display: flex;  flex-direction: column;  align-items: flex-start;  }
.fs-p-heading--lv2 span { display: inline-block; margin: 0 0 10px 0; font-weight: 400; font-size: 3rem; letter-spacing: 0.1em;  }
.fs-p-heading--lv2:not(:first-child) { margin: 6em 0 3em 0;  }
.fs-p-heading--infomation { position: relative; z-index: 1; padding: 60px 0 20px 0; background-color: transparent;  }
.fs-p-heading--infomation span { margin: 0 0 10px 0; font-size: 3rem;}
.fs-p-heading--infomation::before { content: ""; position: absolute; top: 0; left: 50%; right: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw; background-color: #FFFFFF;  z-index: -1;  height: 100%; }
.fs-p-heading--infomation:not(:first-child) { margin: 0 !important; }

/* -------------------------------------------------- announcement --------------------------------------------------- */
.announcement { text-align: center; padding: 20px; background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 8px; margin: 20px auto; max-width: 1200px; }
.announcement__text { font-size: 1.5rem; line-height: 1.8; color: #333; font-weight: bold; margin: 10px 0; }
/* -------------------------------------------------- infomation --------------------------------------------------- */
.fs-p-messageBoard { padding: 20px 0 60px 0; text-align: center; position: relative; background-color: transparent;  border:none;} 
.fs-p-messageBoard::before { content: ""; position: absolute; top: 0; left: 50%; right: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw; background-color: #FFFFFF; z-index: -1; height: 100%; }
.fs-p-messageBoard__images img { width: 15%; height: auto; display: inline-block; margin:10px; }
/* -------------------------------------------------- brand list --------------------------------------------------- */
.pickup-brand { display: flex; align-items: center; padding: 0px 8px 40px 8px; }
.pickup-brand-image { flex: 0 0 auto; width: 50%; }
.pickup-brand-image img { display: block; width: 100%; }
.pickup-brand-info { margin-left: 80px; flex: 1; }
.pickup-brand-info h2 { font-size: 1.2rem; margin: 0; background-color: yellow; display: inline-block; padding: 5px 10px; border-radius: 5px; }
.pickup-brand-info h1 { font-size: 2.5rem; margin: 10px 0; }
.pickup-brand-info p { font-size: 1.2rem; margin: 5px 0; letter-spacing: 0.08em; }
.fs-pt-column { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; align-items: flex-start; margin: 0 auto; }
.fs-pt-column__item { color: inherit; display: grid; grid-template-columns: 1fr; grid-template-rows: auto; padding: 8px; text-decoration: none; }
.fs-pt-column__item:only-child { padding: 8px 0; }
.fs-pt-column__item > * + * { margin-top: 4px; }
.fs-pt-column__image > img { display: block; max-width: 100%; }
.fs-pt-column__heading { font-size: 1.5rem; font-weight: bold; }
.fs-pt-column__description { font-size: 1.3rem; }
.more { margin: 60px 0 0; text-align: center; }
.more a { display: inline-block; padding: 25px 50px; min-width: 320px; border: 1px solid; text-align: center; text-decoration: none; line-height: 1; }
.more a:hover { color: #9fa0a0; }
.more i { display: inline-block; margin: 0 6px 0 0; height: 15px; }
.more i img { width: auto; height: 100%; vertical-align: middle; }
.list-more { display: flex; padding: 60px 0 0; justify-content: center; }
section + .list-more { padding: 0; }
.list-more > li { padding: 0 10px; }
.list-more a { display: inline-block; padding: 25px; min-width: 260px; border: 1px solid; text-align: center; text-decoration: none; line-height: 1.2; }
.list-more a:hover { color: #9fa0a0; }
.list-more i { display: inline-block; margin: 0 6px 0 0; height: 15px; }
.list-more i img { width: auto; height: 100%; vertical-align: baseline; }
/* -------------------------------------------------- category list --------------------------------------------------- */
.fs-c-subgroupList__item { flex-basis: calc(25% - 1px); margin: 0 1px 1px 0; text-align: center; padding: 16px; border: none; flex-grow: 0; }
.fs-c-subgroupList__label { font-size: 1.0rem; }
.fs-c-subgroupList__comment { color: #666; }
.fs-c-subgroupList__link { grid-template-columns: auto 1fr; background: none; border: none; }
a.fs-c-subgroupList__link::after, .fs-c-listControl, .fs-c-productList__message.fs-c-noResultMessage { display: none; }
.fs-c-subgroupList__link { grid-template-rows: 1fr auto; align-items: center; height: 100%; padding: 4px; text-decoration: none; }
.fs-c-subgroupList__image { grid-column: 1; grid-row: 1/3; align-self: start; margin-right: 8px; width: 60px; }
.fs-c-subgroupList__image > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fs-c-subgroupList__label { grid-column: 2; grid-row: 1; align-self: center; text-align: left; }
.fs-c-subgroupList__comment { font-size: 1.2rem; grid-column: 2; grid-row: 2; align-self: start; text-align: left; }




/* -------------------------------------------------- product List --------------------------------------------------- */
.fs-c-productList .fs-c-productList__list__item.fs-c-productListItem .fs-c-productListItem__viewMoreImageButton.fs-c-buttonContainer { display: none; }
.fs-c-productList .fs-c-productList__list__item.fs-c-productListItem { background-color: #ffffff; padding: 10px; margin: 5px; box-sizing: border-box; border-radius: 10px; }
.fs-c-productListItem__productDescription { font-size: 0.85em; color: #666; }
.fs-c-productPrice--selling .fs-c-productPrice__main__price.fs-c-price { font-size: 1.2em; font-weight: bold; color: #d32f2f; margin-top: 5px; }
.fs-c-productListItem { background-color: #ffffff;  padding: 10px;  border-radius: 5px; }
.fs-c-productListCarousel .fs-c-productMark__item,.fs-c-productListItem.fs-c-button--addToWishList--icon { display: none;}
.fs-c-productListCarousel .fs-c-productMark__item,.fs-c-productListItem.fs-c-productMark__item { display: none ;}
.fs-c-productMark { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; padding: 0; }

/* -------------------------------------------------- filter --------------------------------------------------- */
.filter-container { margin-top: 20px; padding: 15px; background-color: #f8f8f8; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.filter-container h3 { font-size: 1.2rem; margin-bottom: 10px; color: #333; border-bottom: 1px solid #ddd; padding-bottom: 5px; font-weight: bold; }
.filter-container div { margin-bottom: 20px; }
.filter-container input[type="checkbox"] { margin-right: 10px; transform: scale(1.2); }
.filter-container label { font-size: 1rem; color: #666; cursor: pointer; }
.filter-container-area { margin-top: 10px; }
.fs-c-productListItem { opacity: 1; transition: opacity 0.5s ease, transform 0.5s ease; }
.fs-c-productListItem.hidden { opacity: 0; transform: scale(0.95); pointer-events: none; visibility: hidden; }
.filter-mode-selector { margin-bottom: 20px; }
.filter-mode-selector label { display: flex; align-items: center; margin-bottom: 10px; font-size: 1rem; color: #666; cursor: pointer; }
.filter-mode-selector input[type="radio"] { margin-right: 10px; transform: scale(1.2); accent-color: #007bff; }
.filter-mode-selector label:hover { color: #000; }
/* -------------------------------------------------- breadcrumb --------------------------------------------------- */
.fs-c-breadcrumb { display: flex; align-items: center; justify-content: center; font-size: 0.875rem; color: #333; background-color: #f8f8f8; padding: 8px 16px; border-bottom: 1px solid #ddd; }
.fs-c-breadcrumb__list { box-sizing: border-box; list-style: none; display: flex; align-items: center; justify-content: center; margin: 0; padding: 5px; }
.fs-c-breadcrumb__list > li { box-sizing: border-box; display: inline-flex; align-items: center; word-break: break-all; margin-right: 8px; }
.fs-c-breadcrumb__listItem + .fs-c-breadcrumb__listItem::before { content: "›"; margin-left: 4px; margin-right: 10px; color: #333; font-size: 0.875rem; line-height: 2; vertical-align: middle; display: inline-flex; align-items: center; }
.fs-c-breadcrumb__listItem:last-child { color: #666; }
.fs-c-breadcrumb__listItem:last-child a { color: inherit; pointer-events: none; }
/* -------------------------------------------------- discountRate --------------------------------------------------- */
#discountRate { background-color: #FF6F61; color: white; font-size: 0.8em; font-weight: bold; padding: 3px 6px; border-radius: 3px; display: inline-block; margin-top: 5px; text-align: center; }

/* -------------------------------------------------- Hover Action --------------------------------------------------- */
.fs-c-productListItem__imageContainer { position: relative; overflow: hidden; display: inline-block; }
.fs-c-productListItem__imageContainer img { width: 100%; transition: transform 0.3s ease-in-out; }
.fs-c-productListItem__imageContainer:hover img { transform: scale(1.15); }

/* -------------------------------------------------- 商品説明(小) --------------------------------------------------- */
.fs-p-productDescription { display: table; width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 10px; overflow: hidden; background-color: #f8f8f8; }
.fs-p-productDescription--full { background-color: transparent !important; }
.fs-p-productDescription strong { display: table-row; }
.fs-p-productDescription strong::before { content: attr(data-label); display: table-cell; font-weight: bold; background-color: #f0f0f0; padding: 12px 15px; border-bottom: 1px solid #ddd; text-align: left; width: 30%; color: #333; }
.fs-p-productDescription strong::after { content: attr(data-content); display: table-cell; padding: 12px 15px; border-bottom: 1px solid #ddd; text-align: left; color: #555; font-weight: normal; width: 70%; }
.fs-p-productDescription strong:first-child::before { border-top-left-radius: 10px; }
.fs-p-productDescription strong:first-child::after { border-top-right-radius: 10px; }
.fs-p-productDescription strong:last-child::before { border-bottom-left-radius: 10px; }
.fs-p-productDescription strong:last-child::after { border-bottom-right-radius: 10px; }
.fs-p-productDescription strong:nth-child(even)::before,
.fs-p-productDescription strong:nth-child(even)::after { background-color: #ffffff; }