@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;400&family=Noto+Sans+JP:wght@300;400&display=swap');

:root {
  --page-width: 1440;
  --page-padding: 16;
  --page-space: max(var(--page-padding) * 1px, (100% * var(--page-padding) / var(--page-width)));
  --font-primary: "Noto Serif JP", serif;
  --font-secondary: "Noto Serif JP", serif;
  --font-tertiary: "Noto Sans JP", sans-serif;
  --base-font-size: 1.6rem;
  --base-line-height: 1.32;
  --base-letter-spacing: 0.01em;
  --color-secondary: #aa8c50;
  --color-tertiary: #fdf7f2;
  --color-quinary: #7d736e;
  --page-bg: #fdf7f2;
  --body-text: #2f2823;
  --space-s: 50px;
  --space-m: 62.5px;
  --space-l: 80px;
  --gap-m: 60px;
}
@media (min-width: 640px) {
  :root { --page-padding: 33; --space-s: 50px; --space-m: 100px; --space-l: 160px; }
}
@media (min-width: 1280px) {
  :root { --page-padding: 63; }
}

*:where(:not(iframe, canvas, img, svg, video, sup):not(svg *, symbol *)) { all: unset; display: revert; }
*, *::before, *::after { box-sizing: border-box; }

html {
  height: 100%;
  background: #fdf7f2;
  color: #2f2823;
  font-size: 62.5%;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
  font-family: var(--font-primary);
  font-size: var(--base-font-size);
  line-height: var(--base-line-height);
  letter-spacing: var(--base-letter-spacing);
  text-rendering: optimizeSpeed;
  margin: 0;
  padding: 0;
  background: var(--page-bg);
}

:where(h1,h2,h3,h4,h5,h6) { font-weight: 400; line-height: 1; word-break: break-word; }
ol, ul, li { list-style: none; margin: 0; padding: 0; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
a, button, [type="button"], [type="submit"] { display: inline-flex; align-items: center; cursor: pointer; }
b, strong { font-weight: bold; }
small { font-size: 80%; }
::placeholder { color: unset; }
[hidden] { display: none !important; }

.text-upper { text-transform: uppercase; }
.text-center { text-align: center; }
.text-centi { font-size: 1.1rem; }
.text-milli { font-size: 12px; }
.text-epsilon { font-size: 1.8rem; line-height: 1.4; }
.font-secondary { font-family: var(--font-secondary); }
.font-tertiary { font-family: var(--font-tertiary); }
.color-secondary { color: #aa8c50; }
.color-tertiary { color: #fdf7f2; }
.color-quinary { color: #7d736e; }
.tracking-1 { letter-spacing: 0.02em; }
.tracking-3 { letter-spacing: .08em; }
.tracking-4 { letter-spacing: 0.1em; }
.tracking-5 { letter-spacing: .15em; }
.line-height-2 { line-height: 1.6; }
.u-mb-10 { margin-bottom: 10px; }

.o-row {
  width: 100%;
  max-width: calc(var(--row-width, var(--page-width)) * 1px);
  margin-left: auto; margin-right: auto;
  padding-left: var(--page-space); padding-right: var(--page-space);
}
.o-row--flush { padding-left: 0; padding-right: 0; max-width: 100%; }
.o-img { display: block; width: 100%; height: auto; }
.o-img--cover { object-fit: cover; width: 100%; height: 100%; }
.o-img--contain { object-fit: contain; }
.scroll-container { position: relative; }

main { padding-top: 78px; }
@media (min-width: 640px) { main { padding-top: 98px; } }

.c-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--page-space);
  background: var(--page-bg);
  transition: background .3s;
}
.c-header__burger {
  display: flex; background: none; border: none; padding: 8px;
  color: #aa8c50; font-size: 22px;
}
.c-header__burger .bi-x-lg { display: none; }
.c-header__burger.is-active .bi-list { display: none; }
.c-header__burger.is-active .bi-x-lg { display: inline; }
@media (min-width: 961px) { .c-header__burger { display: none; } }
.c-header__logo { display: flex; align-items: center; position: absolute; left: 50%; transform: translateX(-50%); }
.c-header__logo-img { height: 38px; width: auto; }
@media (min-width: 640px) { .c-header__logo-img { height: 46px; } }
.c-header__actions { display: flex; align-items: center; gap: 18px; }

.c-header__nav {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: #fdf7f2; padding: 28px var(--page-space); text-align: center;
}
.c-header__nav.is-open { display: block; }
@media (min-width: 961px) {
  .c-header__nav { display: block; position: absolute; top: 100%; left: 0; right: 0; padding: 0 var(--page-space) 14px; }
}
.c-nav__list { display: flex; justify-content: center; gap: 36px; flex-wrap: wrap; }
@media (max-width: 960px) { .c-nav__list { flex-direction: column; gap: 18px; align-items: center; } }
.c-nav__item { position: relative; }
.c-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  color: #aa8c50; font-size: 11px; letter-spacing: .15em;
  text-decoration: none; transition: opacity .2s;
}
.c-nav__link:hover { opacity: 0.7; }
.c-nav__link .bi { font-size: 16px; line-height: 1; }
.c-cart-badge {
  position: absolute; top: -6px; right: -8px;
  background: #aa8c50; color: #fdf7f2;
  font-size: 9px; min-width: 16px; height: 16px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-tertiary);
}
.js-cart-toggle { position: relative; }

.c-divider { display: flex; align-items: center; justify-content: center; gap: 12px; color: #aa8c50; }
.c-divider--blossom svg { width: 13px; height: auto; flex-shrink: 0; }
.c-divider--blossom > span svg { width: 6px; height: auto; }
.c-divider--tear { display: flex; justify-content: center; gap: 8px; padding: 8px 0; }
.c-divider--tear svg { width: 11px; height: auto; }
.c-divider__text { white-space: nowrap; }

.c-hero { position: relative; margin-block-end: var(--space-l); }
.c-hero__text { position: relative; z-index: 2; padding: 115px var(--page-space) 0; }
@media (min-width: 640px) { .c-hero__text { padding-top: 138px; } }
.c-hero__media { position: relative; aspect-ratio: 660/375; overflow: hidden; margin-top: -40px; }
@media(min-width:820px) { .c-hero__media { aspect-ratio: 1440/750; margin-top: -80px; } }
.c-hero__image { width: 100%; height: 100%; }
.c-hero__image img { width: 100%; height: 100%; object-fit: cover; }
.c-hero__scroll {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 3;
}

.t-heading-alpha { font-size: clamp(3.6rem, 8vw, 9.6rem); line-height: .95; font-weight: 400; }
.t-heading-beta { font-size: clamp(24px, 4vw, 4.8rem); line-height: 1; font-weight: 400; }
.t-heading-gamma { font-size: clamp(2rem, 3vw, 32px); line-height: 1.1; font-weight: 400; }
.t-body-gamma { font-size: clamp(1.6rem, 2vw, 20px); line-height: 1.75; }

.c-ornament { display: flex; justify-content: center; }
.c-ornament__blossom svg { width: 13px; height: auto; color: #aa8c50; }

.c-text-banner { display: flex; flex-direction: column; align-items: center; gap: var(--gap-m); max-width: 780px; margin: 0 auto; }
.c-text-banner__logo { width: 70px; height: auto; }
.c-text-banner .rte p { margin: 0 0 1.1em; }
.c-text-banner .rte p:last-child { margin-bottom: 0; }

.c-button { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; transition: opacity .2s; }
.c-button:hover { opacity: 0.7; }
.c-button--tertiary { font-family: var(--font-tertiary); font-size: 12px; letter-spacing: .15em; text-transform: uppercase; }
.c-button--tertiary svg { width: 26px; height: auto; transition: transform .3s; }
.c-button--tertiary:hover svg { transform: translateX(4px); }
.c-button--secondary { font-family: var(--font-tertiary); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; border: 1px solid currentColor; padding: 8px 20px; }

.c-text-media { display: flex; flex-direction: column; gap: var(--gap-m); }
@media (min-width: 820px) { .c-text-media { flex-direction: row; align-items: center; } }
.c-text-media__block { flex: 1; }
.c-text-media__block[data-type="text"] { display: flex; flex-direction: column; gap: 28px; }
.c-text-media__content { display: flex; flex-direction: column; gap: 22px; }
.c-text-media__heading { margin-bottom: 10px; }
.c-text-media__image { overflow: hidden; }
.c-text-media__image img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
.rte p { margin: 0 0 1em; }
.rte p:last-child { margin-bottom: 0; }

#sect-history { margin-block-end: var(--space-l); }
#sect-history-media { margin-block-end: var(--space-m); }
#sect-divider-1 { margin-block-end: 42px; }
#sect-products { margin-block-end: 110px; }
#sect-products .c-divider--blossom { max-height: 0.75em; margin-bottom: 50px; }
#sect-reviews { margin-block-end: 130px; }
#sect-reviews .c-divider--blossom { max-height: 0.75em; margin-bottom: 55px; }
#sect-why { margin-block-end: 95px; }
#sect-divider-2 { margin-block-end: var(--space-m); }
#sect-tips { margin-block-end: 115px; }
#sect-tips .c-divider--blossom { max-height: 0.75em; margin-bottom: 48px; }
#sect-offer { margin-block-end: 105px; }
#sect-offer .c-divider--blossom { max-height: 0.75em; margin-bottom: 50px; }
#sect-contact { margin-block-end: var(--space-l); }
#sect-contact .sect-heading { margin-bottom: 48px; }
#sect-divider-3 { margin-block-end: 45px; }
#sect-faq { margin-block-end: 140px; }
#sect-faq .c-divider--blossom { max-height: 0.75em; margin-bottom: 50px; }

.c-product-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 640px) { .c-product-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.c-product { display: flex; flex-direction: column; }
.c-product__image { overflow: hidden; aspect-ratio: 4/5; margin-bottom: 18px; }
.c-product__image img { transition: transform .5s ease; }
.c-product:hover .c-product__image img { transform: scale(1.04); }
.c-product__info { display: flex; flex-direction: column; gap: 10px; }
.c-product__name { font-size: clamp(1.5rem, 2vw, 1.8rem); line-height: 1.3; color: #2f2823; }
.c-product__desc { font-size: 13px; line-height: 1.65; color: #7d736e; margin: 0; }
.c-product__bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; flex-wrap: wrap; gap: 10px; }
.c-product__price { font-size: 18px; }
.c-product__price small { font-size: 11px; margin-left: 2px; color: #7d736e; }
.c-product__add { gap: 6px; }
.c-product__add .bi { font-size: 15px; }

.c-reviews { display: flex; flex-direction: column; gap: 52px; }
.c-review { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 820px) { .c-review { flex-direction: row; gap: 38px; align-items: flex-start; } }
@media (min-width: 820px) { .c-review:nth-child(even) { flex-direction: row-reverse; } }
.c-review__image { flex: 0 0 280px; aspect-ratio: 4/3; overflow: hidden; }
@media (max-width: 819px) { .c-review__image { flex: none; width: 100%; } }
.c-review__image img { width: 100%; height: 100%; object-fit: cover; }
.c-review__body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.c-review__stars { display: flex; gap: 2px; font-size: 14px; }
.c-review__text { font-size: 14px; line-height: 1.75; color: #2f2823; margin: 0; }
.c-review__author { font-size: 12px; letter-spacing: .08em; margin-top: 4px; }

.c-tips { display: flex; flex-direction: column; gap: 42px; }
@media (min-width: 820px) { .c-tips { flex-direction: row; gap: 50px; } }
.c-tips__visual { flex: 0 0 340px; overflow: hidden; aspect-ratio: 3/4; }
@media (max-width: 819px) { .c-tips__visual { flex: none; width: 100%; aspect-ratio: 16/9; } }
.c-tips__visual img { width: 100%; height: 100%; object-fit: cover; }
.c-tips__list { flex: 1; display: flex; flex-direction: column; gap: 32px; }
.c-tip { display: flex; gap: 18px; align-items: flex-start; }
.c-tip__num { font-size: 28px; line-height: 1; flex-shrink: 0; min-width: 38px; }
.c-tip__body { display: flex; flex-direction: column; gap: 6px; }
.c-tip__title { font-size: clamp(1.5rem, 2vw, 1.8rem); line-height: 1.35; color: #2f2823; }
.c-tip__body p { font-size: 13px; line-height: 1.7; color: #7d736e; margin: 0; }

.c-offer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px; }
@media (min-width: 820px) { .c-offer-grid { grid-template-columns: repeat(3, 1fr); gap: 44px; } }
.c-offer-item { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.c-offer-item .bi { font-size: 30px; }
.c-offer-item h3 { font-size: 1.6rem; line-height: 1.3; color: #2f2823; }
.c-offer-item p { font-size: 13px; line-height: 1.6; margin: 0; }

.c-sign-up { max-width: 780px; margin: 0 auto; }
.c-sign-up__form { display: flex; flex-direction: column; gap: 22px; }
.c-sign-up__field { display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 640px) { .c-sign-up__field { flex-direction: row; gap: 28px; } .c-sign-up__field .c-input { flex: 1; } }
.c-sign-up__accept { display: flex; flex-direction: column; gap: 14px; font-size: 13px; color: #7d736e; }
.c-sign-up__accept a { color: #aa8c50; text-decoration: underline; text-underline-offset: 2px; }
.c-sign-up__field .c-input--half { flex: 0.5; }

.c-input { position: relative; display: block; }
.c-input[data-field="input"] { border-bottom: 1px solid #7d736e; padding-bottom: 8px; }
.c-input--textarea { border-bottom: 1px solid #7d736e; padding-bottom: 8px; }
.c-input__field {
  width: 100%; font-family: var(--font-tertiary); font-size: 14px;
  color: #2f2823; background: transparent; border: none; outline: none; padding: 20px 0 4px;
}
.c-input__field--textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.c-input__text {
  position: absolute; top: 20px; left: 0;
  font-family: var(--font-tertiary); font-size: 1.2rem; letter-spacing: .1em;
  text-transform: uppercase; color: #7d736e;
  pointer-events: none; transition: all .2s;
}
.c-input.is-focused .c-input__text,
.c-input.has-value .c-input__text { top: 4px; font-size: 10px; }
.c-input[data-field="checkbox"] { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.c-input[data-field="checkbox"] .c-input__field { width: auto; padding: 0; position: absolute; opacity: 0; }
.c-input__check {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 1px solid #7d736e;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.c-input__check svg { width: 12px; height: 12px; opacity: 0; transition: opacity .2s; }
.c-input[data-field="checkbox"] .c-input__field:checked ~ .c-input__check svg { opacity: 1; }
.c-input[data-field="checkbox"] .c-input__text { position: static; font-size: 13px; text-transform: none; letter-spacing: 0; }
.c-input[data-field="checkbox"] .c-input__text p { margin: 0; }

.c-faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; }
.c-faq__item { border-bottom: 1px solid rgba(125,115,110,.2); }
.c-faq__q {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 22px 0; font-size: clamp(1.5rem, 2vw, 1.8rem); color: #2f2823;
  cursor: pointer; transition: color .2s;
}
.c-faq__q:hover { color: #aa8c50; }
.c-faq__q .bi { font-size: 18px; color: #aa8c50; transition: transform .3s; }
.js-faq.is-open .c-faq__q .bi { transform: rotate(45deg); }
.c-faq__a {
  max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .35s ease;
  padding: 0; font-size: 14px; line-height: 1.75; color: #7d736e;
}
.js-faq.is-open .c-faq__a { max-height: 300px; padding: 0 0 22px; }
.c-faq__a p { margin: 0; }

.c-footer { padding-top: 38px; padding-bottom: 30px; }
.c-footer__main { display: flex; flex-direction: column; gap: 40px; padding: 42px 0; }
@media (min-width: 961px) { .c-footer__main { flex-direction: row; justify-content: space-between; } }
.c-footer__block { display: flex; flex-direction: column; gap: 28px; }
@media (min-width: 961px) { .c-footer__block { flex-direction: row; gap: 75px; } }
.c-footer__block--right { text-align: center; }
@media (min-width: 961px) { .c-footer__block--right { text-align: right; } }
.c-footer__item { display: flex; flex-direction: column; gap: 14px; }
.c-footer__list--menu { display: flex; flex-direction: column; gap: 8px; }
.c-footer-bottom p { margin: 0 0 10px; line-height: 1.8; }
.c-footer__bottom {
  display: flex; flex-direction: column; align-items: center; gap: 15px;
  padding-top: 28px; border-top: 1px solid rgba(125,115,110,.2);
}
@media (min-width: 640px) { .c-footer__bottom { flex-direction: row; justify-content: space-between; } }
.c-footer__logo img { width: 70px; height: auto; }
.c-footer__copyright { margin: 0; }
@media (max-width: 960px) {
  .js-accordion .c-footer__list { display: none; }
  .js-accordion.is-open .c-footer__list { display: flex; }
  .js-accordion-trigger { cursor: pointer; }
}

.c-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(47,40,35,.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.c-cart {
  background: #fdf7f2; width: 100%; max-width: 680px;
  max-height: 85vh; display: flex; flex-direction: column;
  border: 1px solid rgba(170,140,80,.2);
}
.c-cart__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 28px; border-bottom: 1px solid rgba(125,115,110,.15);
}
.c-cart__title { font-size: clamp(2rem,3vw,2.6rem); }
.c-cart__close { background: none; border: none; font-size: 20px; color: #7d736e; cursor: pointer; padding: 4px; }
.c-cart__close:hover { color: #2f2823; }
.c-cart__body { flex: 1; overflow-y: auto; padding: 20px 28px; }
.c-cart__empty { text-align: center; padding: 40px 0; margin: 0; }
.c-cart__foot { border-top: 1px solid rgba(125,115,110,.15); padding: 20px 28px; }
.c-cart__total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.c-cart__total-val { font-size: 22px; }
.c-cart__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.c-cart-item {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid rgba(125,115,110,.1);
}
.c-cart-item:last-child { border-bottom: none; }
.c-cart-item__img { width: 64px; height: 64px; object-fit: cover; flex-shrink: 0; }
.c-cart-item__info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.c-cart-item__name { font-size: 14px; line-height: 1.3; color: #2f2823; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-cart-item__price { font-size: 13px; }
.c-cart-item__qty { display: flex; align-items: center; flex-shrink: 0; }
.c-cart-item__btn {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(125,115,110,.25); background: none; color: #2f2823; font-size: 14px; cursor: pointer;
}
.c-cart-item__btn:hover { background: rgba(170,140,80,.08); }
.c-cart-item__count { width: 34px; text-align: center; font-size: 14px; border-top: 1px solid rgba(125,115,110,.25); border-bottom: 1px solid rgba(125,115,110,.25); height: 30px; display: flex; align-items: center; justify-content: center; }
.c-cart-item__rm { background: none; border: none; color: #7d736e; font-size: 15px; cursor: pointer; padding: 6px; margin-left: 4px; }
.c-cart-item__rm:hover { color: #c44; }
.c-order-modal {
  background: #fdf7f2; width: 100%; max-width: 480px;
  border: 1px solid rgba(170,140,80,.2);
}
.c-order-form { padding: 22px 28px 28px; display: flex; flex-direction: column; gap: 18px; }
.c-order-form .c-button--tertiary { margin-top: 12px; }

.c-toast {
  position: fixed; top: 24px; left: 50%; transform: translateX(-50%);
  z-index: 500; display: flex; justify-content: center;
}
.c-toast__inner {
  background: #fdf7f2; border: 1px solid rgba(170,140,80,.3);
  padding: 14px 28px; display: flex; align-items: center; gap: 10px;
  box-shadow: 0 4px 20px rgba(47,40,35,.1);
}
.c-toast__inner .bi { font-size: 20px; }
.c-toast__msg { font-size: 14px; color: #2f2823; }

.pg-legal { max-width: 860px; }
.pg-legal__date { font-size: 12px; margin: 0 0 38px; }
.pg-legal__body { font-size: 14px; line-height: 1.85; color: #2f2823; text-align: left; width: 100%; }
.pg-legal__h2 { font-size: 1.8rem; margin: 0 0 14px; }
.pg-legal__h2 + .pg-legal__h2,
.pg-legal__body p + .pg-legal__h2 { margin-top: 32px; }
.pg-legal__h3 { font-size: 1.5rem; margin: 22px 0 10px; color: #2f2823; }
.pg-legal__contact { margin-top: 36px; color: #7d736e; }

.pg-team-heading { margin-bottom: 14px; }
.pg-team-s1 { margin-block-end: 55px; }
.pg-team-s2 { margin-block-end: 95px; }
.pg-team-s3 { margin-block-end: 90px; }
.pg-team-s4 { margin-block-end: var(--space-l); }
.pg-team-divider { margin-bottom: 48px; }
.pg-team-reason { max-width: 740px; }
.pg-team-reason-h { margin-bottom: 18px; }
.pg-team-reason-body { font-size: 14px; line-height: 1.85; color: #2f2823; text-align: left; width: 100%; }
.pg-team-rte { text-align: left; }

.c-footer__item .bi { margin-right: 5px; }

.c-input--honey { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }