@charset "UTF-8";

/* =========================================================
   キムチの家 LP
   ========================================================= */
:root {
  --c-red:    #E8402F;
  --c-red-d:  #C22C1E;
  --c-paper:  #FFFDF8;
  --c-ink:    #33302B;
  --c-ink-l:  #5B544A;
  --c-green:  #7CB342;
  --c-green-d:#4E7A1E;
  --c-gold:   #E8A33D;
  --c-rule:   #EAE3D6;


  --font-hand: "Yomogi", "Klee One", sans-serif;
  --font-body: "Klee One", "Zen Maru Gothic", -apple-system, BlinkMacSystemFont,
               "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;

  --font-sharp: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont,
                "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;

  --font-retro: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;

  --w-max: 520px;
  --pad: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #EFEBE1;
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .02em;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-red); }
p { margin: 0 0 1.2em; }

.wrap {
  max-width: var(--w-max);
  margin: 0 auto;
  background: var(--c-paper);
  overflow: hidden;
}


/* =========================================================
   下端に追従する購入導線
   「買い方のコツ」を通り過ぎてから出て、
   本物のボタンが画面に入っているあいだは引っ込む
   ========================================================= */
.sticky-buy {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;

  padding: 0 14px calc(14px + env(safe-area-inset-bottom, 0px));
  background: none;
  border: none;
  transform: translateY(130%);
  transition: transform .3s cubic-bezier(.2,.85,.3,1);
  pointer-events: none;
}
.sticky-buy.is-on {
  transform: translateY(0);
  pointer-events: auto;
}

.sticky-buy .btn--sticky {
  max-width: 492px;
  margin: 0 auto;
  padding: .92em 1.2em;

  background: var(--c-red);
  color: #fff;
  border: none;
  font-size: 1.12rem;

  box-shadow:
    0 3px 0 var(--c-red-d),
    0 6px 20px rgba(60, 20, 12, .34);
}
.sticky-buy .btn--sticky:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--c-red-d), 0 4px 14px rgba(60, 20, 12, .3);
}


.btn__main { display: block; line-height: 1.4; }
.btn__sub {
  display: block;
  margin-top: .15em;
  font-size: .68em;
  font-weight: 500;
  line-height: 1.5;
  opacity: .92;
}


/* =========================================================
   右上の案内ボタン（常時表示）
   ========================================================= */
.tt-open {
  position: fixed; top: 10px; right: 10px; z-index: 250;
  display: flex; align-items: center; gap: .45em;
  max-width: 168px;
  padding: .5em .8em .55em;
  border: none; border-radius: 10px;
  background: var(--c-red);
  color: #fff;
  font-family: var(--font-body);
  font-size: .66rem; line-height: 1.35;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0,0,0,.28);
  animation: ttPulse 2.6s ease-in-out infinite;
}
.tt-open__mark { font-size: 1.15rem; line-height: 1; }
.tt-open__t b { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.tt-open:active { transform: translateY(1px); }

@keyframes ttPulse {
  0%, 100% { box-shadow: 0 3px 12px rgba(0,0,0,.28); }
  50%      { box-shadow: 0 3px 12px rgba(0,0,0,.28), 0 0 0 5px rgba(232,64,47,.22); }
}


/* =========================================================
   TikTok案内のポップアップ
   ========================================================= */
.modal {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(20,16,12,.72);
}
.modal[hidden] { display: none; }
.modal__box {
  width: 100%; max-width: 400px; max-height: 92vh; overflow-y: auto;
  border-radius: 16px; overflow-x: hidden;
  background: var(--c-paper);
  box-shadow: 0 16px 50px rgba(0,0,0,.45);
}


.modal__head {
  padding: 20px 20px 18px;
  background: linear-gradient(160deg, #F2604F 0%, var(--c-red) 60%, #C22C1E 100%);
  color: #fff; text-align: center;
}
.modal__mark { margin: 0 0 .15em; font-size: 2.2rem; line-height: 1; }
.modal__title {
  margin: 0; font-family: var(--font-hand);
  font-size: 1.42rem; line-height: 1.45; font-weight: 700;
  -webkit-text-stroke: .5px currentColor;
}

.modal__body { padding: 20px 20px 22px; }
.modal__lead {
  margin: 0 0 1.2em; font-size: 1rem; line-height: 1.85; text-align: center;
}
.modal__lead b { color: var(--c-red); }

.modal__steps { margin: 0 0 1.4em; padding: 0; list-style: none; }
.modal__steps li {
  display: grid;
  grid-template-columns: 1.9em 1fr;
  grid-template-areas: "n t";
  gap: .7em;
  align-items: center;
  padding: .75em 0;
}
.modal__steps li + li { border-top: 1px solid var(--c-rule); }
.modal__n {
  grid-area: n;
  width: 1.9em; height: 1.9em;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--c-red); color: #fff;
  font-family: var(--font-hand); font-size: .95rem; line-height: 1;
}
.modal__t { grid-area: t; font-size: .92rem; line-height: 1.6; }
.modal__t b { color: var(--c-red); }
.btn--modal {
  margin: 0;
  background: var(--c-ink); color: #fff; font-size: 1.06rem;
}


/* =========================================================
   理念（看板をグレーにして白文字を重ねる）
   ========================================================= */
.creed { position: relative; }


.creed--top { line-height: 0; }
.creed--top img { width: 100%; height: auto; }


/* =========================================================
   セクション共通
   ========================================================= */
.sec { padding: 40px var(--pad); }
.sec__title {
  margin: 0 0 1.2em;
  font-family: var(--font-hand);

  font-size: clamp(1.22rem, 5.9vw, 1.46rem);
  font-weight: 700; line-height: 1.5;
  text-align: center;
  letter-spacing: 0;

  line-break: strict;
  word-break: keep-all;

  -webkit-text-stroke: .55px currentColor;
  paint-order: stroke fill;
}

.sec__title--wave {
  position: relative;
  padding-bottom: .62em;
}
.sec__title--wave::after {
  content: "";
  position: absolute; left: 50%; bottom: 0;
  width: 8.2em; height: 9px;
  transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='9' viewBox='0 0 22 9'%3E%3Cpath d='M0 6 Q 5.5 1 11 6 T 22 6' fill='none' stroke='%23E8402F' stroke-opacity='0.38' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center;
  background-size: 22px 9px;
}
.sec__title--wave::before {
  content: "";
  position: absolute; left: 50%; bottom: 1.5px;
  width: 9.6em; height: 6px;
  transform: translateX(-50%);
  opacity: .55;

  background:
    radial-gradient(circle 2.6px at left center,  var(--c-gold) 99%, transparent) left  center / 50% 100% no-repeat,
    radial-gradient(circle 2.6px at right center, var(--c-gold) 99%, transparent) right center / 50% 100% no-repeat;
}


/* =========================================================
   ボタン
   ========================================================= */
.btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 1em 1.2em; margin-bottom: 12px;
  border: none; border-radius: 999px;
  font-family: var(--font-body); font-size: 1.06rem; font-weight: 600;
  line-height: 1.4; text-align: center; text-decoration: none; cursor: pointer;
}

.btn--buy {

  flex-direction: column;
  padding: .82em 1.2em .9em;
  background: #fff; color: var(--c-red);
  border: 2px solid var(--c-red);
  font-size: 1.2rem;
  box-shadow: 0 3px 0 rgba(232,64,47,.28);
}
.btn--buy:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(232,64,47,.28); }
/* =========================================================
   買い方のコツ
   番号は使わず、色の帯そのものでインパクトを出す
   ========================================================= */

.tips { margin: 0 0 1.6em; padding: 0; list-style: none; }
.tips__item {
  position: relative;
  padding: 2em 1.2em 1.9em;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--c-rule);
  text-align: center;
  overflow: hidden;
}

.tips__item::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 7px;
}
.tips__item--sun::before { background: var(--c-red); }


.tips--solo .tips__item {
  background: linear-gradient(180deg, #FFF6F4 0%, #fff 46%);
  border-color: rgba(232,64,47,.28);
  box-shadow: 0 6px 22px rgba(232,64,47,.12);
}

.tips__label {
  display: inline-block;
  margin: .2em 0 .7em;
  padding: .22em 1.4em;
  border-radius: 999px;
  font-family: var(--font-sharp);
  font-size: .86rem; font-weight: 700; line-height: 1.7;
  letter-spacing: .08em;
  color: #fff;
  background: var(--c-red);
}

.tips__day {
  margin: 0;
  font-family: var(--font-sharp);
  font-size: clamp(1.8rem, 8.6vw, 2.3rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .04em;
  color: var(--c-red);
}
.tips__time {
  margin: 0 0 .5em;
  font-family: var(--font-sharp);
  font-size: clamp(3.1rem, 16.6vw, 4.4rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--c-red);
}


.tips__shop {
  display: inline-block;
  margin: 0 0 .6em;
  padding: .3em 1.1em;
  border-radius: 8px;
  background: var(--c-red);
  color: #fff;
  font-family: var(--font-sharp);
  font-size: clamp(1.14rem, 5.4vw, 1.4rem);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .02em;
}

.tips__what {
  margin: 0;
  font-family: var(--font-sharp);
  font-size: 1.02rem; font-weight: 700; line-height: 1.6;
  color: var(--c-ink);
}


/* =========================================================
   一週間のねらい目
   7日を横に並べ、棒の高さで期待値をひと目で示す
   ========================================================= */


.sec--week {
  background:
    radial-gradient(circle at 8% 10%, rgba(255,255,255,.22) 0 46px, transparent 47px),
    radial-gradient(circle at 94% 90%, rgba(232,64,47,.16) 0 60px, transparent 61px),
    linear-gradient(180deg, #FFA53E 0%, #FFC46A 100%);
}
.sec--week .sec__title { color: #8E1B12; }

.wk { margin: 0 0 1.2em; padding: 0; list-style: none; }
.wk__row {
  display: grid;
  grid-template-columns: 3em 1fr auto;
  align-items: center;
  gap: .75em;
  padding: .6em .8em;
  margin-bottom: 6px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--c-rule);
}


.wk__day {
  display: flex; align-items: center; justify-content: center;
  width: 3em; height: 3em;
  border-radius: 50%;
  background: #B3ABA0;
  color: #fff;
  font-family: var(--font-sharp);
  font-size: 1.16rem; font-weight: 900; line-height: 1;
}

.wk__meter {
  display: flex; align-items: flex-end; gap: 4px;
  height: 38px;
}
.wk__meter i {
  width: 9px; border-radius: 3px;
  background: #E2DCD1;
}
.wk__meter i:nth-child(1) { height: 13px; }
.wk__meter i:nth-child(2) { height: 19px; }
.wk__meter i:nth-child(3) { height: 25px; }
.wk__meter i:nth-child(4) { height: 31px; }
.wk__meter i:nth-child(5) { height: 38px; }

.wk__meter[data-lv="5"] i:nth-child(-n+5),
.wk__meter[data-lv="4"] i:nth-child(-n+4),
.wk__meter[data-lv="3"] i:nth-child(-n+3),
.wk__meter[data-lv="2"] i:nth-child(-n+2),
.wk__meter[data-lv="1"] i:nth-child(-n+1) { background: var(--c-red); }

.wk__meter--q {
  display: flex; align-items: center; justify-content: center;
  width: 61px; height: 38px;
  font-family: var(--font-sharp);
  font-size: 1.9rem; font-weight: 900; line-height: 1;
  color: var(--c-gold);
}
.wk__body { display: flex; flex-direction: column; line-height: 1.45; }
.wk__body b {
  font-family: var(--font-sharp);
  font-size: 1.04rem; font-weight: 700;
}
.wk__body em {
  font-style: normal;
  font-family: var(--font-hand);
  font-size: .88rem;
  color: var(--c-ink-l);
}


.wk__row[data-d="sun"] .wk__day { background: #E8402F; }
.wk__row[data-d="mon"] .wk__day { background: #94A6BA; }
.wk__row[data-d="tue"] .wk__day { background: #F2762B; }
.wk__row[data-d="wed"] .wk__day { background: #3D8FD1; }
.wk__row[data-d="thu"] .wk__day { background: #57A94A; }
.wk__row[data-d="fri"] .wk__day { background: #E5B33A; }
.wk__row[data-d="sat"] .wk__day { background: #8B6B4A; }


.wk__row--lv5 {
  border: 2px solid var(--c-red);
  background: #FFF5F3;
  box-shadow: 0 3px 10px rgba(232,64,47,.18);
}
.wk__row--lv5 .wk__body b { color: var(--c-red); }

.wk__row--lv0 { background: #F5F1E8; }
.wk__row--lv0 .wk__body b { color: #9A9286; }

.wk__best {
  margin: 0 0 1.5em;
  font-family: var(--font-hand);
  font-size: 1.16rem; text-align: center;
}
.wk__best b {
  color: var(--c-red);
  font-size: 1.3em; font-weight: 700;
  -webkit-text-stroke: .6px currentColor;
  border-bottom: 3px solid var(--c-red);
  padding-bottom: .1em;
}


.wk__extra {
  margin-top: 1.6em;
  padding: 1.1em 1em 1.2em;
  border-radius: 10px;
  background: #FFF8EE;
  border: 1px dashed var(--c-gold);
  text-align: center;
}
.wk__extra-lead {
  margin: 0;
  font-size: .88rem; line-height: 1.7;
}
.wk__extra-lead b { color: #B87515; font-weight: 700; }
.wk__extra-link {
  display: inline-flex; align-items: center; gap: .35em;
  margin: .5em 0 1.1em;
  padding: .3em 1em;
  border-radius: 999px;
  background: var(--c-ink);
  color: #fff;
  font-family: var(--font-sharp);
  font-size: .84rem; font-weight: 700; line-height: 1.7;
  text-decoration: none;
}
.wk__extra-link span { font-size: .9em; }
.wk__extra-link--ig {
  margin-bottom: 0;
  background: linear-gradient(120deg, #C13584, #E1306C 55%, #F77737);
}


/* =========================================================
   こだわり
   商店の壁の品書きのつもりで組む。
   縦書きの赤い短冊に見出し、「其の一」で数え、
   写真は白フチのスナップを少し傾けて貼る。
   飾りは足さない。置き方と間で見せる
   ========================================================= */
.sec--points {
  padding: 42px var(--pad) 40px;
  background: linear-gradient(180deg, #FDF3E3 0%, var(--c-paper) 100%);
}
.sec--points .sec__title { margin-bottom: 1.7em; }

.pt { margin: 0; padding: 0; list-style: none; }
.pt__item {
  display: grid;
  grid-template-columns: 1fr 1.14fr;
  gap: 14px;
  align-items: center;
  padding: 17px 0;
}
.pt__item:nth-child(1) { --d: 0s; }
.pt__item:nth-child(2) { --d: .12s; }
.pt__item:nth-child(3) { --d: .24s; }
.pt__item:nth-child(4) { --d: .36s; }


.pt__item:nth-child(even) { grid-template-columns: 1.14fr 1fr; }
.pt__item:nth-child(even) .pt__pic { grid-column: 2; grid-row: 1; }
.pt__item:nth-child(even) .pt__txt { grid-column: 1; grid-row: 1; }


.pt__pic { display: block; line-height: 0; }
.pt__pic img {
  display: block; width: 100%; height: auto;
  border: 5px solid #fff;
  border-radius: 2px;
  box-shadow: 0 4px 14px rgba(51,48,43,.18);
  rotate: -2deg;
}
.pt__item:nth-child(even) .pt__pic img { rotate: 2deg; }


.pt__txt { display: flex; gap: 10px; align-items: center; }
.pt__item:nth-child(even) .pt__txt {
  flex-direction: row-reverse;
  text-align: right;
}


.pt__strip {
  display: grid; place-items: center;
  padding: .85em .36em;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--c-red) 0%, var(--c-red-d) 100%);
  color: #fff;
  writing-mode: vertical-rl;
  font-family: var(--font-sharp);
  font-size: .92rem; font-weight: 900; line-height: 1;
  letter-spacing: .13em;
  box-shadow: 3px 3px 0 rgba(194,44,30,.16);
}
.pt__col { display: block; min-width: 0; }
.pt__no {
  display: block;
  margin: 0 0 .45em;
  font-family: var(--font-hand);
  font-size: 1.06rem; line-height: 1.2;
  letter-spacing: .1em;
  color: var(--c-red-d);
  -webkit-text-stroke: .4px currentColor;
}
.pt__body {
  display: block;
  font-family: var(--font-hand);
  font-size: .8rem; line-height: 1.85;
  letter-spacing: -.02em;
  color: var(--c-ink);
}
.pt__body b { color: var(--c-red-d); font-weight: 700; }


.pt__end {
  margin: 1.7em 0 0;
  font-family: var(--font-hand);
  font-size: 1.08rem; line-height: 1.7;
  text-align: center;
}
.pt__end b {
  color: var(--c-red);
  -webkit-text-stroke: .5px currentColor;
}


@media (prefers-reduced-motion: no-preference) {
  .pt__pic {
    opacity: 0; translate: -16px 0;
    transition: opacity .55s cubic-bezier(.2,.8,.3,1), translate .55s cubic-bezier(.2,.8,.3,1);
    transition-delay: var(--d);
  }
  .pt__item:nth-child(even) .pt__pic { translate: 16px 0; }


  .pt__strip {
    clip-path: inset(-10px -10px 100% -10px);
    transition: clip-path .5s cubic-bezier(.3,.9,.35,1);
    transition-delay: calc(var(--d) + .16s);
  }

  .pt__no, .pt__body {
    opacity: 0; translate: 0 9px;
    transition: opacity .45s ease-out, translate .45s ease-out;
  }
  .pt__no   { transition-delay: calc(var(--d) + .3s); }
  .pt__body { transition-delay: calc(var(--d) + .42s); }

  .pt.is-on .pt__pic   { opacity: 1; translate: 0 0; }
  .pt.is-on .pt__strip { clip-path: inset(-10px -10px -10px -10px); }
  .pt.is-on .pt__no,
  .pt.is-on .pt__body  { opacity: 1; translate: 0 0; }
}


/* =========================================================
   食べごろメーター
   左に地層、右に説明の札。上から下へ一本の矢印が伸びていく。
   博物館の年表パネルのつもりで作ってある
   ========================================================= */

.sec--ripe {
  background:
    radial-gradient(circle at 90% 8%, rgba(255,210,39,.25) 0 54px, transparent 55px),
    radial-gradient(circle at 6% 90%, rgba(245,68,58,.09) 0 44px, transparent 45px),
    linear-gradient(180deg, #FFF0C4 0%, #FFF8E4 100%);
}
.sec--ripe .sec__title { color: #B4211A; }

.ripe {
  margin: 0 0 .2em;
  padding: 0 2px;
}


.ripe__axis {
  width: 7em;
  margin: 0 auto 7px;
  padding: .3em 0;
  border-radius: 999px;
  background: #FFE07A;
  color: #7A5405;
  font-family: var(--font-sharp);
  font-size: .68rem; font-weight: 900; line-height: 1.5;
  letter-spacing: -.05em;
  text-align: center;
  rotate: -2.5deg;
  box-shadow: 2px 2px 0 rgba(0,0,0,.1);
}
.ripe__axis--btm {
  margin: 14px auto 0;
  background: var(--c-red-d);
  color: #fff;
  rotate: 2.5deg;
}

.ripe__list {
  margin: 0;
  padding: 0 0 60px;
  list-style: none;
}


.ripe__step {
  display: grid;
  grid-template-columns: 1fr 84px 1fr;
  grid-template-rows: auto auto;
  gap: 0 6px;
  align-items: center;
}
.ripe__layer { grid-column: 2; grid-row: 1 / 3; align-self: stretch; }
.ripe__card  { grid-column: 3; grid-row: 1; }
.ripe__acid  { grid-column: 3; grid-row: 2; }

.ripe__step--2 .ripe__card,
.ripe__step--4 .ripe__card,
.ripe__step--2 .ripe__acid,
.ripe__step--4 .ripe__acid { grid-column: 1; }

.ripe__step--1 { --ln: #FFC931; --i: 0; }
.ripe__step--2 { --ln: #FF8F1F; --i: 1; }
.ripe__step--3 { --ln: #F5443A; --i: 2; }
.ripe__step--4 { --ln: #B4211A; --i: 3; }


.ripe__layer {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 1.15em .2em .9em;
  color: #fff;
  text-align: center;
}

.ripe__layer::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--ln);
  clip-path: polygon(0 0, 50% 18px, 100% 0, 100% 100%, 0 100%);
}

.ripe__layer::after {
  content: "";
  position: absolute; top: calc(100% - 1px); left: 0; right: 0;
  height: 20px;
  background: var(--ln);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  z-index: 1;
}

.ripe__step--1 .ripe__layer {
  padding-top: .9em;
  color: #6B4A05;
}
.ripe__step--1 .ripe__layer::before {
  clip-path: none;
  border-radius: 16px 16px 0 0;
}
.ripe__step--2 .ripe__layer { color: #5A2A02; }


.ripe__step--4 .ripe__layer::after {
  left: -13px; right: -13px;
  height: 59px;
}


.ripe__when {
  position: relative;
  font-family: var(--font-sharp);
  font-size: .86rem; font-weight: 900; line-height: 1.35;
  letter-spacing: -.07em;
}


.ripe__card {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  gap: .1em;
  margin: 6px 0;
  padding: .7em .48em;
  border: 3px solid var(--ln);
  border-radius: 18px;
  background: #fff;
  box-shadow: 3px 3px 0 var(--ln);
  rotate: -1deg;
}
.ripe__step--2 .ripe__card,
.ripe__step--4 .ripe__card { rotate: 1deg; }


.ripe__card::before {
  content: "";
  position: absolute; top: 50%;
  margin-top: -7px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.ripe__step--1 .ripe__card::before,
.ripe__step--3 .ripe__card::before {
  left: -11px;
  border-right: 7px solid var(--ln);
}
.ripe__step--2 .ripe__card::before,
.ripe__step--4 .ripe__card::before {
  right: -11px;
  border-left: 7px solid var(--ln);
}
.ripe__step--3 .ripe__card { margin-top: 13px; }

.ripe__name {
  font-family: var(--font-sharp);
  font-size: .9rem; font-weight: 900; line-height: 1.3;
  letter-spacing: -.06em;
  color: var(--c-ink);
}
.ripe__body {
  font-family: var(--font-hand);
  font-size: .66rem; line-height: 1.45;
  letter-spacing: -.05em;
  color: var(--c-ink-l);
  line-break: strict;
  word-break: keep-all;
}


.ripe__acid {
  display: flex; align-items: center; gap: 2px;
  justify-content: center;
  margin-top: 5px;
}
.ripe__acid img {
  width: 19px; height: auto;
  max-width: none;
  flex: none;
}

.ripe__acid-h {
  display: block;
  width: 10px;
  overflow: hidden;
  flex: none;
}


.ripe__badge {
  position: absolute; top: -1em; right: .5em;
  transform: rotate(-6deg);
  padding: .16em .8em;
  border-radius: 999px;
  background: var(--c-gold);
  color: #fff;
  font-family: var(--font-sharp);
  font-size: .64rem; font-weight: 900; line-height: 1.6;
  white-space: nowrap;
  border: 2px solid #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,.22);
}


@media (prefers-reduced-motion: no-preference) {
  .ripe__layer { clip-path: inset(0 -20px 100% -20px); }
  .ripe.is-on .ripe__layer {
    animation: ripeDrop .38s cubic-bezier(.2,.8,.3,1) forwards;
    animation-delay: calc(var(--i) * .17s);
  }

  .ripe__card { opacity: 0; scale: .88; }
  .ripe__step--1 .ripe__card,
  .ripe__step--3 .ripe__card { translate: 18px 0; }
  .ripe__step--2 .ripe__card,
  .ripe__step--4 .ripe__card { translate: -18px 0; }
  .ripe.is-on .ripe__card {
    animation: ripePop .34s cubic-bezier(.2,1.1,.35,1.5) forwards;
    animation-delay: calc(var(--i) * .17s + .2s);
  }
}
@keyframes ripeDrop { to { clip-path: inset(0 -20px -66px -20px); } }
@keyframes ripePop  { to { opacity: 1; translate: 0 0; scale: 1; } }


/* =========================================================
   キムチーマン
   ページの頭から終わりまで、案内役として顔を出す。
   ふわふわ上下に揺れるだけの、控えめな動き
   ========================================================= */
.km {
  height: auto;
  pointer-events: none;
  user-select: none;
}
@media (prefers-reduced-motion: no-preference) {
  .km { animation: kmBob 2.8s ease-in-out infinite; }
}
@keyframes kmBob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -7px; }
}


.sec--buy .tips { position: relative; margin-top: 116px; }
.sec--buy .tips__item { z-index: 1; }

.km--card-l,
.km--card-r,
.km--cta {
  position: absolute;
  bottom: 100%;
}

.km--card-l {
  width: 82px; left: 2px; margin-bottom: -18px;
  z-index: 2;
}

.km--card-r {
  width: 76px; right: -6px; margin-bottom: -14px;
  z-index: 0;
  animation-delay: -.9s;
}


.buy-cta { position: relative; margin-top: 142px; padding-top: 8px; }
.buy-cta .btn--buy { position: relative; z-index: 1; }


@media (prefers-reduced-motion: no-preference) {
  .buy-cta .btn--buy:hover,
  .buy-cta .btn--buy:focus-visible,
  .buy-cta .btn--buy:active {
    animation: purun .55s cubic-bezier(.36,.07,.19,.97) both;
    transform-origin: 50% 100%;
  }
}
@keyframes purun {
  0%   { scale: 1 1; }
  28%  { scale: 1.07 .9; }
  50%  { scale: .94 1.07; }
  72%  { scale: 1.04 .97; }
  100% { scale: 1 1; }
}
.km-tap {
  position: absolute; right: 8px; bottom: 100%;
  margin-bottom: -12px;
  width: 76px;
  z-index: 2;
}
.km-tap .km--cta {
  position: static;
  display: block; width: 100%; margin: 0;
  animation-delay: -1.7s;
}

.km-tap__bubble {
  position: absolute; left: 24%; top: calc(100% - 4px); z-index: 2;
  translate: -50% 0;
  padding: .3em .75em;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--c-red);
  color: var(--c-red-d);
  font-family: var(--font-sharp);
  font-size: .8rem; font-weight: 900; line-height: 1.4;
  letter-spacing: -.04em;
  white-space: nowrap;
  rotate: -7deg;
  box-shadow: 0 2px 8px rgba(0,0,0,.16);
}


.wk__best {
  display: flex; align-items: center; justify-content: center;
  gap: .3em;
}
.km--best {
  width: 62px;
  flex: none;
  animation-delay: -1.2s;
}


.ripe { position: relative; }
.km--ripe {
  position: absolute; right: 4px; bottom: 0;
  width: 78px;
  animation-delay: -2.1s;
}


.km-sign {
  position: relative;
  width: 132px;
  margin: 0 auto 1.4em;
}
@media (prefers-reduced-motion: no-preference) {
  .km-sign { animation: kmBob 2.8s ease-in-out infinite; }
}
.km--sign { display: block; width: 100%; animation: none; }

.km-sign__t {
  position: absolute;
  left: 18%; top: 40%; width: 64%; height: 26%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sharp);
  font-size: 11px; font-weight: 900; line-height: 1;
  letter-spacing: -.06em;
  color: var(--c-red-d);
  white-space: nowrap;
}


/* =========================================================
   定期便のおしらせ
   チラシの「どーん」。黄色の集中線から飛び出してくる
   ========================================================= */
.coming {
  position: relative;
  overflow: hidden;
  padding: 42px var(--pad) 46px;
  text-align: center;
  background: #FFC61E;
}

.coming::before {
  content: "";
  position: absolute; inset: -40%;
  background: repeating-conic-gradient(
    from 3deg at 50% 44%,
    rgba(255,255,255,.13) 0deg 6deg, transparent 6deg 18deg);
}
.coming__tag,
.coming__text { position: relative; }

.coming__tag {
  display: inline-block; margin: 0 0 .7em;
  padding: .28em 1.2em;
  border-radius: 999px;
  background: var(--c-red);
  color: #fff;
  font-family: var(--font-sharp);
  font-size: .92rem; font-weight: 900; line-height: 1.7;
  letter-spacing: .04em;
  rotate: -3deg;
  box-shadow: 0 3px 0 rgba(0,0,0,.14);
}
.coming__text {
  margin: 0;
  font-family: var(--font-sharp);
  font-size: clamp(1.72rem, 8.4vw, 2.3rem);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: -.04em;
  color: #4A2D00;
}
.coming__text b {
  display: inline-block;
  font-weight: 900;
  font-size: 1.5em;
  color: var(--c-red-d);
  -webkit-text-stroke: 1px currentColor;
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 #fff;
}


.coming__line {
  position: relative;
  display: inline-block;
  margin-top: 1.1em;
  padding: .6em 1.5em;
  border-radius: 999px;
  background: #06C755;
  color: #fff;
  font-family: var(--font-sharp);
  font-size: .88rem; font-weight: 900; line-height: 1.5;
  letter-spacing: -.02em;
  text-decoration: none;
  box-shadow: 0 3px 0 rgba(0,0,0,.18);
}
.coming__line b { display: block; font-size: 1.18em; }


@media (prefers-reduced-motion: no-preference) {
  .coming__tag, .coming__text, .coming__line { opacity: 0; scale: .35; }
  .coming.is-on .coming__tag {
    animation: comingBoom .5s cubic-bezier(.2,1.45,.4,1) forwards;
  }
  .coming.is-on .coming__text {
    animation: comingBoom .55s cubic-bezier(.2,1.45,.4,1) .12s forwards;
  }
  .coming.is-on .coming__line {
    animation: comingBoom .5s cubic-bezier(.2,1.45,.4,1) .26s forwards;
  }
}
@keyframes comingBoom {
  0%   { opacity: 0; scale: .35; }
  100% { opacity: 1; scale: 1; }
}


/* =========================================================
   商品ラインナップ（チェキ風）
   ========================================================= */

.cheki {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 20px 14px; margin: 0 0 2em; padding: 4px 0; list-style: none;
}
.cheki__item {
  background: #fff;
  box-shadow: 0 3px 10px rgba(60,45,30,.18);
}
.cheki__item img { width: 100%; }
.cheki__item:nth-child(4n+1) { transform: rotate(-1.4deg); }
.cheki__item:nth-child(4n+2) { transform: rotate(1.1deg); }
.cheki__item:nth-child(4n+3) { transform: rotate(.8deg); }
.cheki__item:nth-child(4n)   { transform: rotate(-.9deg); }


.cheki__item.is-more { display: none; }


.cheki.is-open .cheki__item.is-more {
  display: block;
  animation: chekiIn .44s cubic-bezier(.22,.9,.3,1.32) backwards;
  animation-delay: calc(var(--i, 0) * .045s);
}
@keyframes chekiIn {
  from { opacity: 0; translate: 0 -26px; scale: .88; }
  60%  { opacity: 1; }
  to   { opacity: 1; translate: 0 0; scale: 1; }
}


.cheki.is-closing .cheki__item.is-more {
  display: block;
  animation: chekiOut .3s cubic-bezier(.5,0,.75,0) forwards;
  animation-delay: calc(var(--r, 0) * .028s);
}
@keyframes chekiOut {
  from { opacity: 1; translate: 0 0; scale: 1; }
  to   { opacity: 0; translate: 0 -20px; scale: .9; }
}

.btn--more {
  gap: .5em;
  background: #fff; color: var(--c-red-d);
  border: 2px dashed var(--c-red);
  font-family: var(--font-hand);
  font-size: 1.06rem; font-weight: 700;
}
.btn__arrow { font-size: .7em; }
.btn--more.is-open .btn__arrow { transform: rotate(180deg); display: inline-block; }


/* =========================================================
   紙芝居（あゆみ）
   ========================================================= */

.sec--story {
  position: relative;
  background: linear-gradient(180deg, #F3EADA 0%, var(--c-paper) 100%);

  box-shadow:
    inset 0 0 0 8px transparent,
    inset 0 0 0 9px rgba(226,210,175,.38),
    inset 0 0 0 13px transparent,
    inset 0 0 0 14px rgba(226,210,175,.16);
  padding-top: 50px;
  padding-bottom: 50px;
  color: #E4D7BA;
}
.sec--story::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(115% 85% at 50% 34%, rgba(0,0,0,0) 52%, rgba(0,0,0,.5) 100%),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.02) 2px 3px),
    #231D16;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 67%);
          mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 67%);
}

.sec--story > * { position: relative; z-index: 1; }
.sec--story .sec__title {
  font-family: var(--font-retro);
  font-weight: 900;
  letter-spacing: .14em;
  color: #F1E7CE;
  -webkit-text-stroke: 0;
}

.sec--story::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 83px,  rgba(255,255,255,.06) 83px 84px,
      transparent 84px 171px, rgba(255,255,255,.035) 171px 172.5px,
      transparent 172.5px 260px),
    radial-gradient(circle at 22% 31%, rgba(255,255,255,.05) 0 1px, transparent 2px),
    radial-gradient(circle at 71% 64%, rgba(255,255,255,.045) 0 1px, transparent 2px),
    radial-gradient(circle at 48% 82%, rgba(255,255,255,.04) 0 1px, transparent 2px);
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 67%);
          mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 67%);
}


.sec--story .sec__title--wave::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='9' viewBox='0 0 22 9'%3E%3Cpath d='M0 6 Q 5.5 1 11 6 T 22 6' fill='none' stroke='%23D9B36A' stroke-opacity='0.5' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

.story { margin: 0 0 1.4em; padding: 0; list-style: none; }

.story__panel { margin-bottom: 44px; }


.story__year {
  display: flex; align-items: center; justify-content: center;
  gap: .6em;
  margin: 0 0 .9em;
}
.story__year::before,
.story__year::after {
  content: ""; flex: 1 1 auto; height: 3px;
  border-top: 1px solid rgba(226,210,175,.42);
  border-bottom: 1px solid rgba(226,210,175,.18);
}
.story__num {
  font-family: var(--font-retro);
  font-size: 1.9rem; font-weight: 900;
  line-height: 1; letter-spacing: .1em;
  color: #D9B36A;
}
.story__nen {
  font-family: var(--font-retro);
  font-size: .92rem; font-weight: 700;
  letter-spacing: .08em;
  color: #A79470;
}

.story__text {
  margin: 0 0 1.4em;
  font-family: var(--font-retro);
  font-weight: 500;
  font-size: 1rem; line-height: 2.1;
  letter-spacing: .06em;
  text-align: center;
  color: #E4D7BA;
}


.story__panel img {
  margin-bottom: 0;
  border: 7px solid #fff;
  box-shadow: 0 5px 16px rgba(51,48,43,.2);
  rotate: -1.1deg;
}
.story__panel:nth-child(2) img { rotate: 1deg; }


.story__panel--old img { filter: sepia(.3) saturate(.86) contrast(1.04); }


.story__panel--now { color: var(--c-ink); }
.story__panel--now .story__year::before,
.story__panel--now .story__year::after {
  border-top-color: rgba(51,48,43,.32);
  border-bottom-color: rgba(51,48,43,.14);
}
.story__panel--now .story__num {
  font-family: var(--font-sharp);
  letter-spacing: .02em;
  color: var(--c-red-d);
}
.story__panel--now .story__nen {
  font-family: var(--font-sharp);
  color: var(--c-ink-l);
}
.story__panel--now .story__text {
  font-family: var(--font-hand);
  letter-spacing: 0;
  line-height: 1.9;
  color: var(--c-ink);
}

.story__panel--now img { rotate: 0deg; }


.story__panel--phone img {
  display: block;
  width: 62%;
  max-width: 260px;
  margin-inline: auto;
  border-width: 5px;
  border-radius: 14px;
}

.story__now {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 1.2rem;
  text-align: center; color: var(--c-red-d);
  -webkit-text-stroke: .4px currentColor;
}


/* =========================================================
   会える場所
   ========================================================= */
.places__lead {
  display: flex; align-items: center; gap: .8em;
  margin: 2.4em 0 1.2em;
  font-family: var(--font-hand); font-size: 1.1rem; line-height: 1.4;
  color: var(--c-red);
}
.places__lead::before,
.places__lead::after {
  content: ""; flex: 1; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--c-rule));
}
.places__lead::after { background: linear-gradient(90deg, var(--c-rule), transparent); }
.sec__title + .places__lead { margin-top: 0; }


.places__more {
  margin: 2.8em 0 .3em;
  font-family: var(--font-hand);
  font-size: clamp(1.7rem, 8vw, 2.1rem);
  line-height: 1.3;
  letter-spacing: -.06em;

  text-indent: .5em;
  color: var(--c-red);
  text-align: center;
  -webkit-text-stroke: .8px currentColor;
}
.places__note {
  margin: 0 0 .4em;
  font-family: var(--font-hand);
  font-size: .95rem; line-height: 1.8;
  color: var(--c-ink-l);
  text-align: center;
}


.shop { margin-bottom: 2.2em; }


.shop + .shop {
  margin-top: 3em;
  padding-top: 2.6em;
  position: relative;
}
.shop + .shop::before {
  content: "";
  position: absolute; top: 0;
  left: calc(var(--pad) * -1); right: calc(var(--pad) * -1);
  height: 6px;
  background: repeating-linear-gradient(
    90deg, var(--c-rule) 0 16px, transparent 16px 28px);
}
.shop__hero {
  position: relative;
  width: calc(100% + var(--pad) * 2);
  margin: 0 calc(var(--pad) * -1) 1em;
  line-height: 0;
}
.shop__pic {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

.shop__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.4em var(--pad) 1em;
  background: linear-gradient(
    to top,
    rgba(20,16,13,.82) 0%,
    rgba(20,16,13,.62) 46%,
    rgba(20,16,13,0) 100%
  );
  color: #fff;
}
.shop__name {
  margin: 0 0 .15em;
  font-family: var(--font-hand);
  font-size: 1.36rem; font-weight: 700; line-height: 1.4;
  color: #fff;
  -webkit-text-stroke: .5px currentColor;
  text-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.shop__access {
  margin: 0;
  font-family: var(--font-hand);
  font-size: .92rem; line-height: 1.6;
  color: #F0E7DA;
  text-shadow: 0 1px 5px rgba(0,0,0,.6);
}
.shop__sns {
  display: inline-block; margin-top: .8em;
  font-size: .86rem; text-underline-offset: 3px;
}

.map {
  position: relative; aspect-ratio: 16 / 10;
  overflow: hidden;

  width: calc(100% + var(--pad) * 2);
  margin-left: calc(var(--pad) * -1);
  margin-right: calc(var(--pad) * -1);
}
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.shop .ph--wide {
  width: calc(100% + var(--pad) * 2);
  margin-left: calc(var(--pad) * -1);
  margin-right: calc(var(--pad) * -1);
  border-radius: 0;
}


.where { margin: 0; padding: 0; list-style: none; }
.where li {
  display: flex; flex-direction: column;
  padding: .85em 0 .85em 1.1em;
  position: relative;
  line-height: 1.6;
}
.where li + li { border-top: 1px solid var(--c-rule); }
.where li::before {
  content: ""; position: absolute; left: 0; top: 1.5em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-red);
}
.where__name {
  font-family: var(--font-hand);
  font-size: 1.1rem; font-weight: 700;
  -webkit-text-stroke: .3px currentColor;
}
.where__sub {
  font-family: var(--font-hand);
  font-size: .92rem; color: var(--c-ink);
}
.where__at { font-size: .82em; color: var(--c-ink-l); }

.where__link {
  align-self: flex-start;
  display: inline-flex; align-items: center;
  margin-top: .45em;
  padding: .22em .85em;
  border: 1px solid rgba(232,64,47,.4);
  border-radius: 999px;
  background: #FFF6F4;
  color: var(--c-red-d);
  font-family: var(--font-sharp);
  font-size: .74rem; font-weight: 700; line-height: 1.7;
  text-decoration: none;
}
.where__link::after { content: "→"; margin-left: .4em; font-size: .9em; }
.where__link + .where__link { margin-top: .3em; }


/* =========================================================
   フッター
   ========================================================= */

.footer {
  padding: 40px var(--pad) 34px;
  background: #2E2721; color: #CFC6B8;
  text-align: center; font-size: .88rem; line-height: 1.9;
}
.footer a { color: #F0E7D8; }
.footer__logo {
  width: 180px; margin: 0 auto 1.6em;

  filter: brightness(0) invert(1) opacity(.92);
}
.sns {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .6em 1.4em; margin: 0 0 1.6em; font-size: .92rem;
}
.sns a { text-underline-offset: 4px; }
.footer__addr {
  font-style: normal; margin: 0 0 1em;
  padding-top: 1.4em; border-top: 1px solid rgba(255,255,255,.14);
  color: #A79C8C;
}
.footer__mail { font-size: .84rem; color: #A79C8C; }
.footer__links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .5em 1.2em; margin: 1.6em 0 1.2em; font-size: .8rem;
}
.copy { margin: 0; font-size: .76rem; color: #7E7466; }


/* =========================================================
   PC表示
   ========================================================= */
@media (min-width: 560px) {
  body { padding: 24px 0; }
  .wrap { border-radius: 8px; box-shadow: 0 4px 24px rgba(0,0,0,.12); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}