@charset "UTF-8";
/* カラー */
/* テーマカラー（COBA FARM / Figma TOP_PC） */
/* ベージュ（セクション背景） */
/* カード等のクリーム */
/* ボーダーカラー */
/* フォント */
/* スペーサー */
/* コンテンツ・ページ幅 */
/* ブレークポイント */
/*==================================
  共通スタイル
==================================*/
.wrapper {
  flex-grow: 1;
}

/* ページ幅・コンテンツ幅 */
.u-page-width,
.u-content-width {
  margin-inline: auto;
  width: 100%;
}

.u-page-width:not(.u-padding-inner) {
  max-width: 1280px;
}
.u-page-width.u-padding-inner {
  max-width: calc(1280px + 4rem);
}

.u-content-width:not(.u-padding-inner) {
  max-width: 1120px;
}
.u-content-width.u-padding-inner {
  max-width: calc(1120px + 4rem);
}

.u-padding-inner {
  padding: 0rem 2rem;
}
@media (max-width: 768px) {
  .u-padding-inner {
    padding: 0rem 1.5rem;
  }
}
@media (max-width: 576px) {
  .u-padding-inner {
    padding: 0 20px;
  }
}

.u-visually-hidden {
  position: absolute !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

.u-cover-image {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}
.u-cover-image img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 768px) {
  .u-pc-only {
    display: none !important;
  }
}

@media not all and (max-width: 768px) {
  .u-sp-only {
    display: none !important;
  }
}

/* 一時非表示（再表示時はこのクラスを外す） */
.u-temp-hidden {
  display: none !important;
}

/* テキスト系 */
.u-bold {
  font-weight: bold !important;
}

.u-text-center {
  text-align: center !important;
}

.u-text-danger {
  color: #e32929;
}

.u-text-muted {
  color: rgb(178.5, 178.5, 178.5);
}

.u-link {
  color: #1a73e8 !important;
  transition: 0.25s opacity ease-in-out;
}
@media (hover: hover) {
  .u-link:hover {
    opacity: 0.7;
  }
}

/* セクション系 */
.u-section-margin {
  margin-bottom: 120px;
}
@media (max-width: 768px) {
  .u-section-margin {
    margin-bottom: 60px;
  }
}
@media (max-width: 576px) {
  .u-section-margin {
    margin-bottom: 30px;
  }
}

/*==================================
  ヘッダー
==================================*/
.l-header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  background-color: transparent;
}

.l-header__notice {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 40px;
  padding: 8px 30px;
  background-color: #abc10d;
}
@media (max-width: 768px) {
  .l-header__notice {
    padding: 8px 20px;
  }
}

.l-header__notice-text {
  width: auto;
  max-width: 100%;
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}
@media (max-width: 768px) {
  .l-header__notice-text {
    font-size: 12px;
  }
}

.l-header--solid {
  background-color: #fff;
}

.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 30px;
}
@media (max-width: 768px) {
  .l-header__inner {
    gap: 12px;
    padding: 10px 20px;
  }
}

.l-header__logo {
  flex-shrink: 0;
  width: 100px;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
}
@media (max-width: 768px) {
  .l-header__logo {
    width: 125px;
  }
}
.l-header__logo.l-header--top {
  width: 156px;
}
@media (max-width: 768px) {
  .l-header__logo.l-header--top {
    width: 125px;
  }
}
.l-header__logo a {
  display: block;
}

.l-header__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.l-header__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  flex-grow: 1;
  min-width: 0;
}
@media (max-width: 768px) {
  .l-header__nav {
    flex-grow: 0;
    gap: 0;
  }
}

.l-header__menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 1280px) {
  .l-header__menu {
    display: none;
  }
}

.l-header__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #3c3c3c;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.25s ease;
}
@media (hover: hover) {
  .l-header__link:hover {
    opacity: 0.75;
  }
}

.l-header__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  background-color: #fff;
}

.l-header__icon img {
  display: block;
  width: 20px;
  height: 20px;
}

.l-header__utils {
  display: flex;
  align-items: center;
  gap: 12px;
}
@media (max-width: 768px) {
  .l-header__utils {
    gap: 20px;
  }
}

.l-header:has(.l-header__search.is-open) {
  z-index: 130;
  background-color: #fff;
}

.l-header__search {
  position: static;
  z-index: 1;
  display: flex;
  align-items: center;
}

.l-header__search.is-open {
  z-index: 120;
}

.l-header__search-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 110;
  width: 100%;
  padding: 12px 30px 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
@media (max-width: 768px) {
  .l-header__search-panel {
    padding: 10px 20px 12px;
  }
}

.l-header__search.is-open .l-header__search-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.l-header__search-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 2px 4px 2px 16px;
  border: 1px solid #eadfc9;
  border-radius: 22px;
  background-color: #fff;
  max-width: 560px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .l-header__search-bar {
    padding: 2px 4px 2px 14px;
  }
}

.l-header__search-input {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #3c3c3c;
  font-family: inherit;
  font-size: 15px;
  appearance: auto;
  outline: none;
}
@media (max-width: 768px) {
  .l-header__search-input {
    height: 36px;
    font-size: 16px;
  }
}

.l-header__search-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.25s ease;
}
@media (hover: hover) {
  .l-header__search-submit:hover {
    opacity: 0.75;
  }
}
@media (max-width: 768px) {
  .l-header__search-submit {
    width: 32px;
    height: 32px;
  }
}

.l-header__search-submit svg {
  display: block;
  width: 20px;
  height: 20px;
}

.l-header__search .l-header__util {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.l-header__util {
  position: relative;
  display: flex;
  align-items: center;
  color: #3c3c3c;
  text-decoration: none;
  transition: opacity 0.25s ease;
}
@media (hover: hover) {
  .l-header__util:hover {
    opacity: 0.75;
  }
}

.l-header__util img {
  display: block;
  width: 20px;
  height: 20px;
}

.l-header__cart-count {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  margin-left: 6px;
  border-radius: 10px;
  background-color: #abc10d;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.l-header__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
@media (max-width: 1280px) {
  .l-header__hamburger {
    display: flex;
  }
}

.l-header__hamburger img {
  display: block;
  width: 20px;
  height: 20px;
}

.l-header--fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  transform: translate3d(0, -100%, 0);
  transition: transform 0.4s ease;
  will-change: transform;
}

.l-header--fixed.l-header--visible {
  transform: translate3d(0, 0, 0);
}

/* fixed 初回付与時は 0→-100% のスライドを抑止 */
.l-header--no-anim {
  transition: none !important;
}

.l-header--fixed .l-header__inner {
  padding-block: 10px;
}

.l-header--fixed .l-header__logo {
  width: 100px;
}
@media (max-width: 768px) {
  .l-header--fixed .l-header__logo {
    width: 125px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .l-header--fixed {
    transition: none;
  }
}
/*==================================
  SPドロワー
==================================*/
.l-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  overflow-y: auto;
  background-color: #fbf6e1;
}

.l-drawer.is-open {
  display: block;
}

.l-drawer__inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px 20px 40px;
}

.l-drawer__head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 28px;
}

.l-drawer__logo {
  width: 125px;
}

.l-drawer__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.l-drawer__utils {
  display: flex;
  align-items: center;
  gap: 20px;
}

.l-drawer__close {
  position: relative;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.l-drawer__close-icon,
.l-drawer__close-icon::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1px;
  background-color: #232323;
  content: "";
}

.l-drawer__close-icon {
  transform: translate(-50%, -50%) rotate(45deg);
}

.l-drawer__close-icon::before {
  transform: translate(-50%, -50%) rotate(-90deg);
}

.l-drawer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #eadfc9;
}

.l-drawer__link {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 60px;
  padding: 20px 10px;
  border-bottom: 1px solid #eadfc9;
  color: #3c3c3c;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.25s ease;
}
@media (hover: hover) {
  .l-drawer__link:hover {
    opacity: 0.75;
  }
}

.l-drawer__link--text {
  justify-content: space-between;
}

.l-drawer__arrow {
  display: flex;
  margin-left: auto;
}

.l-drawer__arrow img {
  display: block;
  width: 10px;
  height: auto;
}

.l-drawer__sns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: auto;
  padding-top: 40px;
}

.l-drawer__sns a {
  display: flex;
}

.l-drawer__sns img {
  display: block;
  width: 24px;
  height: auto;
}

html.is-drawer-open,
body.is-drawer-open {
  overflow: hidden;
  overscroll-behavior: none;
}

body.is-drawer-open {
  position: fixed;
  left: 0;
  width: 100%;
}

/*==================================
  フッター
==================================*/
.l-footer {
  position: relative;
  overflow: visible;
  background-color: #fbf6e1;
  padding-top: 100px;
}

.l-footer .c-wave {
  top: 0;
}

.l-footer__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 64px;
  padding-block: 80px;
}
@media (max-width: 768px) {
  .l-footer__inner {
    gap: 40px;
    padding-block: 60px 40px;
  }
}
@media not all and (max-width: 1500px) {
  .l-footer__inner {
    padding-top: 8%;
  }
}

.l-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
@media (max-width: 768px) {
  .l-footer__top {
    flex-direction: column;
    align-items: center;
    gap: 25px;
    width: 100%;
  }
}

.l-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 25%;
}
@media (max-width: 768px) {
  .l-footer__brand {
    align-items: center;
    gap: 20px;
    max-width: 100%;
  }
}

.l-footer__logo {
  width: 156px;
}
@media (max-width: 768px) {
  .l-footer__logo {
    width: 160px;
  }
}

.l-footer__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.l-footer__sns {
  display: flex;
  align-items: center;
  gap: 21px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 768px) {
  .l-footer__sns {
    justify-content: center;
    gap: 16px;
  }
}

.l-footer__sns-link {
  display: block;
  transition: opacity 0.25s ease;
}
@media (hover: hover) {
  .l-footer__sns-link:hover {
    opacity: 0.75;
  }
}

.l-footer__sns-link img {
  display: block;
  width: auto;
  height: 28px;
}
@media (max-width: 768px) {
  .l-footer__sns-link img {
    height: 24px;
  }
}

.l-footer__nav {
  display: flex;
  gap: 48px;
}
@media (max-width: 768px) {
  .l-footer__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    column-gap: 15px;
    row-gap: 32px;
    width: 100%;
    max-width: 335px;
  }
}

.l-footer__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 160px;
}
@media (max-width: 768px) {
  .l-footer__col {
    align-items: flex-start;
    gap: 15px;
    min-width: 0;
    text-align: left;
  }
}
@media (max-width: 768px) {
  .l-footer__col:nth-child(3) {
    display: grid;
    grid-column: 1/-1;
    grid-template-columns: 1fr 1fr;
    column-gap: 15px;
    row-gap: 15px;
  }
}
@media (max-width: 768px) {
  .l-footer__col:nth-child(3) .l-footer__col-title {
    grid-column: 1/-1;
  }
}

.l-footer__col-title {
  margin: 0;
  color: #3c3c3c;
  font-size: 15px;
  font-weight: 700;
}

.l-footer__col-link {
  color: #767676;
  font-family: "Gothic A1", "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  transition: opacity 0.25s ease;
}
@media (hover: hover) {
  .l-footer__col-link:hover {
    opacity: 0.75;
  }
}

.l-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: #767676;
  font-family: "Gothic A1", "Noto Sans JP", sans-serif;
  font-size: 13px;
}
@media (max-width: 768px) {
  .l-footer__bottom {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
}

.l-footer__copy {
  margin: 0;
}
@media (max-width: 768px) {
  .l-footer__copy {
    order: 2;
    width: 100%;
    color: #767676;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
  }
}

.l-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 768px) {
  .l-footer__legal {
    order: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

.l-footer__legal-link {
  color: #767676;
  text-decoration: none;
  transition: opacity 0.25s ease;
}
@media (hover: hover) {
  .l-footer__legal-link:hover {
    opacity: 0.75;
  }
}
@media (max-width: 768px) {
  .l-footer__legal-link {
    font-size: 12px;
    line-height: 1.4;
  }
}

/*==================================
  セクション間ウェーブ（画面幅いっぱいに伸ばす）
==================================*/
.c-wave {
  position: absolute;
  left: 50%;
  z-index: 0;
  width: 100vw;
  min-width: 100%;
  max-width: none;
  transform: translateX(-50%);
  overflow: visible;
  pointer-events: none;
}

.c-wave--top {
  top: -90px;
}
@media (max-width: 768px) {
  .c-wave--top {
    top: -50px;
  }
}

.c-wave--bottom {
  bottom: -90px;
}
@media (max-width: 768px) {
  .c-wave--bottom {
    bottom: -80px;
  }
}

.c-wave--flip {
  transform: scaleY(-1) translateX(-50%);
}

.c-wave picture,
.c-wave img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

/*==================================
  ページトップへ戻る（追従）
==================================*/
.c-pagetop {
  position: fixed;
  right: 14px;
  bottom: 40px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 48px;
  padding: 16px 0 18px;
  border-radius: 8px;
  color: #3c3c3c;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}
@media (max-width: 768px) {
  .c-pagetop {
    right: 16px;
    bottom: 20px;
    width: 40px;
    padding: 12px 0 14px;
    gap: 6px;
  }
}

.c-pagetop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
@media (hover: hover) {
  .c-pagetop.is-visible:hover {
    opacity: 0.75;
  }
}

.c-pagetop__arrow {
  display: block;
  width: 16px;
  height: 72px;
}

.c-pagetop__arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

.c-pagetop__label {
  color: #3c3c3c;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
}

/* 商品・カートなど自動生成ページ専用。reset / form 上書きは持ち込まない */
/* TOPと同じフォントに寄せる（テーマ default.css の明朝・ヒラギノを上書き） */
body,
#wrapper,
input[type=text],
input[type=password],
textarea,
select,
button,
#main-column,
#sub-column,
#contents,
article,
article h1,
article h2,
article h3,
article h4,
#sub-column h2,
section.userreview,
section.userreview h2,
#itempage_contents .main_catch,
#itempage_contents .sub_ttl,
#itemList h2,
#Journal h2,
.newItem h2,
.pickup h2,
.ranking h2,
.news h2,
.recommend h2,
div[aria-describedby=bundle_dialog],
div[aria-describedby=bundle_dialog] * {
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif !important;
}

.l-header,
.l-drawer,
.l-footer,
.c-pagetop {
  box-sizing: border-box;
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
}

.l-header *,
.l-header *::before,
.l-header *::after,
.l-drawer *,
.l-drawer *::before,
.l-drawer *::after,
.l-footer *,
.l-footer *::before,
.l-footer *::after,
.c-pagetop *,
.c-pagetop *::before,
.c-pagetop *::after {
  box-sizing: border-box;
}

.l-header img,
.l-drawer img,
.l-footer img {
  max-width: 100%;
  height: auto;
  display: block;
  vertical-align: bottom;
}

/* 自作TOP以外ではヘッダーを通常フローにして本文と重ねない */
.l-header--flow {
  position: relative;
  background-color: #fff;
}

/* テーマ標準の検索欄スタイルを打ち消す */
.l-header .l-header__search-input,
.l-drawer .l-header__search-input {
  display: block;
  float: none;
  width: 100%;
  max-width: none;
  box-shadow: none;
  border: none;
}

.l-header .l-header__search-submit,
.l-drawer .l-header__search-submit {
  appearance: none;
}

/* テーマ標準のページトップと二重表示しない */
body:has(.c-pagetop) #page-top {
  display: none !important;
}

/*# sourceMappingURL=shopserve-theme.css.map */