/* 2026 クラフト工房手作り体験(11月 秋のクラフトメニュー)ページ本文のスタイル
   ヘッダー・フッターは公式サイトの official/css/{reset,layout}.css をそのまま使う。
   公式の reset.css はスマホ幅で html の文字サイズを 1px にするため、ここでは rem を使わず px で指定する。
   手芸の雰囲気を出すため、ステッチ(縫い目)・リネンやギンガムの布・フェルトのワッペン・刺繍枠・値札を使い、
   配色は紅葉の赤・コキアの朱・いちょうの黄・どんぐりの茶。
   ステッチは outline の点線(outline-offset をマイナスにして内側に縫い目を出す)で描いている。 */
.cf {
  --maple: #c0392b;
  --maple-deep: #9a2a1f;
  --orange: #d9772b;
  --ginkgo: #e8b923;
  --acorn: #8a5a2b;
  --bark: #5e3a17;
  --kraft: #e9d8bd;
  --kraft-deep: #d6bf98;
  --cream: #fdf6ec;
  --peach: #fbeae6;
  --text: #3b2e22;
  --line: #eadfce;
  --thread: rgba(94, 58, 23, .45);
  /* 布の地(リネンの織り目) */
  --linen:
    repeating-linear-gradient(0deg, rgba(94, 58, 23, .045) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(94, 58, 23, .045) 0 1px, transparent 1px 4px);
  color: var(--text);
  font-size: 15px;
  line-height: 1.85;
  word-break: auto-phrase;
}
.cf *, .cf *::before, .cf *::after { box-sizing: border-box; }
/* 公式 reset.css の line-height:160% は px に固定されて引き継がれるため、倍率で指定し直す
   (:where で詳細度を下げ、下の各クラスの line-height を優先させる) */
.cf :where(p, li, dt, dd, div, span, h4, figure, figcaption, section) { line-height: 1.85; }
.cf img { max-width: 100%; height: auto; display: block; }
.cf a { color: var(--maple); }
.cf h2, .cf h3, .cf h4, .cf strong, .cf b { font-weight: bold; }
.cf figure { margin: 0; }
.cf ul, .cf ol { list-style: none; margin: 0; padding: 0; }
.cf-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.cf-nowrap { white-space: nowrap; }
.cf-red { color: var(--maple); }
.cf-center { text-align: center; }

/* 見出しなどの丸ゴシック */
.cf-hero-title, .cf-hero-kicker, .cf-hero-stamp, .cf-sec-title .ja, .cf-broom-catch,
.cf-cal-month, .cf-tag-name, .cf-tag-price b, .cf-ticket-time, .cf-place-name, .cf-closing-copy, .cf-next b {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
}
/* 手書き風 */
.cf-hero-copy, .cf-polaroid figcaption {
  font-family: "Yomogi", "Zen Maru Gothic", sans-serif;
  font-weight: 400;
}

/* 本文エリア(公式の #contents 内) */
#contents.cf { box-sizing: border-box; padding: 20px 20px 64px; }
.cf .blueTit01 { margin-bottom: 10px; line-height: 1.5; }

.cf-meta { display: flex; align-items: center; justify-content: space-between; margin: 0 0 18px; font-size: 13px; }
.cf-badge { background: #e57a95; color: #fff; padding: 1px 12px; }
.cf-meta time { color: #888; font-weight: bold; }

/* ===== メインビジュアル ===== */
.cf-hero {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: var(--bark);
  aspect-ratio: 16 / 9;
  outline: 2px dashed rgba(255, 255, 255, .85);
  outline-offset: -12px;
}
.cf-hero-photo { position: absolute; inset: 0; }
#contents.cf .cf-hero-photo img { width: 100%; height: 100%; } /* 公式の #wrapper img { height:auto } に勝たせる */
.cf-hero-photo img { object-fit: cover; object-position: 50% 30%; animation: cf-zoom 14s ease-out both; }
.cf-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(40, 20, 5, 0) 38%, rgba(60, 28, 8, .55) 68%, rgba(60, 28, 8, .85) 100%);
  pointer-events: none;
}
.cf-hero-text {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 32px;
  text-align: center;
  color: #fff;
}
/* フェルトのリボン */
.cf-hero-kicker {
  display: inline-block;
  margin: 0 0 6px;
  padding: 5px 26px;
  border-radius: 8px;
  background: var(--orange);
  font-size: 17px;
  letter-spacing: 2px;
  outline: 1.5px dashed rgba(255, 255, 255, .9);
  outline-offset: -5px;
  transform: rotate(-2deg);
}
.cf-hero-title {
  margin: 0;
  font-size: 60px;
  line-height: 1.25;
  letter-spacing: 4px;
  text-shadow: 0 3px 14px rgba(40, 20, 5, .5);
}
.cf-hero-copy { margin: 2px 0 0; font-size: 24px; letter-spacing: 3px; text-shadow: 0 2px 8px rgba(40, 20, 5, .7); }

/* 右上のフェルトのワッペン */
.cf-hero-stamp {
  position: absolute;
  z-index: 3;
  top: 26px;
  right: 26px;
  width: 132px;
  height: 132px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.5px) 0 0 / 5px 5px, var(--maple);
  color: #fff;
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
  outline: 2px dashed rgba(255, 255, 255, .85);
  outline-offset: -8px;
  transform: rotate(8deg);
}
.cf-hero-stamp-date { font-size: 30px; line-height: 1.05; letter-spacing: 1px; }
.cf-hero-stamp-date small { font-size: 14px; margin-left: 2px; }

/* ひらひら落ちる葉 */
.cf-hero-leaves { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cf-hero-leaves svg { position: absolute; top: -40px; width: 30px; height: 30px; opacity: .92; animation: cf-fall 11s linear infinite; }
.cf-hero-leaves .l1 { left: 8%;  fill: var(--maple);  animation-delay: 0s; }
.cf-hero-leaves .l2 { left: 24%; fill: var(--ginkgo); animation-delay: -4s; animation-duration: 13s; width: 26px; height: 26px; }
.cf-hero-leaves .l3 { left: 44%; fill: var(--orange); animation-delay: -7s; width: 22px; height: 22px; }
.cf-hero-leaves .l4 { left: 63%; fill: var(--ginkgo); animation-delay: -2s; animation-duration: 12s; }
.cf-hero-leaves .l5 { left: 80%; fill: var(--maple);  animation-delay: -9s; animation-duration: 14s; width: 24px; height: 24px; }
.cf-hero-leaves .l6 { left: 92%; fill: var(--orange); animation-delay: -5.5s; width: 20px; height: 20px; }
@keyframes cf-fall {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(24px, 25vh) rotate(90deg); }
  50%  { transform: translate(-12px, 50vh) rotate(200deg); }
  75%  { transform: translate(20px, 75vh) rotate(290deg); }
  100% { transform: translate(-6px, 100vh) rotate(380deg); }
}
@keyframes cf-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }

.cf-intro {
  margin: 28px auto 0;
  max-width: 640px;
  text-align: center;
  font-size: 16px;
}
.cf-intro strong { color: var(--acorn); }
.cf-intro .cf-red { color: var(--maple); background: linear-gradient(transparent 66%, rgba(232, 185, 35, .45) 66%); }

/* ===== もくじ(フェルトのワッペン) ===== */
.cf-index { margin: 30px 0 8px; }
.cf-index ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cf-index li { --c: var(--orange); }
.cf-index li:nth-child(2) { --c: var(--ginkgo); }
.cf-index li:nth-child(3) { --c: var(--acorn); }
.cf-index li:nth-child(4) { --c: var(--maple); }
.cf-index a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 6px 14px;
  border-radius: 16px;
  background: radial-gradient(rgba(94, 58, 23, .05) 1px, transparent 1.5px) 0 0 / 5px 5px, var(--cream);
  outline: 2px dashed var(--c);
  outline-offset: -7px;
  box-shadow: 0 4px 0 var(--kraft-deep);
  color: var(--bark);
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  transform: rotate(-1.5deg);
  transition: transform .25s, box-shadow .25s;
}
.cf-index li:nth-child(even) a { transform: rotate(1.5deg); }
.cf-index a::after { content: "▼"; font-size: 9px; color: var(--c); }
.cf-index svg { width: 26px; height: 26px; fill: var(--c); transition: transform .4s; }
.cf-index li a:hover { transform: rotate(0) translateY(-3px); box-shadow: 0 7px 0 var(--kraft-deep); }
.cf-index a:hover svg { transform: rotate(-20deg) scale(1.1); }

/* ===== セクション見出し(縫い付けた布のラベル) ===== */
.cf-sec { margin-top: 68px; scroll-margin-top: 20px; }
.cf-sec-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 0 30px;
  padding: 8px 0;
  text-align: center;
}
/* 左右にのびる、ひと針ずつの縫い目 */
.cf-sec-title::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--orange) 0 12px, transparent 12px 20px);
  transition: clip-path 1.4s ease;
}
.cf-anim .cf-sec-title::before { clip-path: inset(0 50% 0 50%); }
.cf-anim .cf-sec-title.is-in::before { clip-path: inset(0); }
.cf-sec-title svg { position: relative; flex: none; width: 34px; height: 34px; }
.cf-sec-title svg:first-child { fill: var(--orange); transform: rotate(-14deg); }
.cf-sec-title svg:last-child { fill: var(--ginkgo); transform: rotate(14deg); }
.cf-sec-title use[href="#cf-acorn"] { fill: var(--acorn); }
.cf-label {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 38px 10px;
  border-radius: 8px;
  background: var(--linen), var(--cream);
  outline: 2px dashed var(--thread);
  outline-offset: -7px;
  box-shadow: 0 4px 0 var(--kraft-deep), 0 0 0 6px #f6f6f6;
  transform: rotate(-1deg);
}
.cf-sec-title .ja { color: var(--bark); font-size: 30px; line-height: 1.3; letter-spacing: 3px; }
.cf-sec-title .en { color: var(--orange); font-size: 12px; font-weight: bold; letter-spacing: 3px; line-height: 1.6; }

/* ===== 開催日 ===== */
.cf-days { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; }

/* カレンダー:リネンの布にステッチ */
.cf-cal {
  position: relative;
  padding: 24px 18px 18px;
  border-radius: 18px;
  background: var(--linen), #f3e6cf;
  outline: 2px dashed var(--thread);
  outline-offset: -9px;
  box-shadow: 0 6px 0 var(--kraft-deep);
}
.cf-cal-month {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin: 0 0 10px;
  color: var(--bark);
  font-size: 44px;
  line-height: 1;
}
.cf-cal-month small { font-size: 20px; }
.cf-cal-month span { font-family: sans-serif; font-weight: bold; font-size: 12px; letter-spacing: 2px; color: var(--acorn); }
.cf-cal-week, .cf-cal-grid { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.cf-cal-week {
  padding-bottom: 6px;
  margin-bottom: 6px;
  background: repeating-linear-gradient(90deg, var(--thread) 0 6px, transparent 6px 11px) 0 100% / 100% 2px no-repeat;
  font-size: 12px;
  font-weight: bold;
  color: var(--bark);
}
.cf-cal-week .sun { color: var(--maple); }
.cf-cal-week .sat { color: #2f6fb0; }
.cf-cal-grid li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  font-size: 15px;
  color: rgba(94, 58, 23, .45);
}
/* 開催日はフェルトの丸ワッペン */
.cf-cal-grid .on span {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1.5px) 0 0 / 4px 4px, var(--maple);
  color: #fff;
  font-weight: bold;
  outline: 1.5px dashed rgba(255, 255, 255, .9);
  outline-offset: -5px;
  box-shadow: 0 3px 0 var(--maple-deep);
}
.cf-cal-grid .on.is-past span { background: #c9b79c; box-shadow: none; color: #fff; }
.cf-cal-grid .on.is-past span::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: 50%;
  border-top: 2px solid rgba(255, 255, 255, .9);
  transform: rotate(-30deg);
}
.cf-cal-grid .on.is-next span { animation: cf-pulse 1.8s ease-in-out infinite; }
@keyframes cf-pulse {
  0%, 100% { box-shadow: 0 3px 0 var(--maple-deep), 0 0 0 0 rgba(192, 57, 43, .45); }
  50%      { box-shadow: 0 3px 0 var(--maple-deep), 0 0 0 9px rgba(192, 57, 43, 0); }
}
.cf-cal-legend { position: relative; margin: 8px 0 0; text-align: center; font-size: 13px; color: var(--bark); }
.cf-cal-dot { display: inline-block; width: 12px; height: 12px; margin-right: 4px; border-radius: 50%; background: var(--maple); vertical-align: -1px; }

.cf-next {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 14px;
  padding: 9px 22px;
  border-radius: 12px;
  background: var(--maple);
  color: #fff;
  font-weight: bold;
  outline: 1.5px dashed rgba(255, 255, 255, .85);
  outline-offset: -5px;
}
.cf-next[hidden] { display: none; }
.cf-next span { font-size: 13px; padding: 0 10px; border-radius: 999px; background: #fff; color: var(--maple); }
.cf-next b { font-size: 22px; line-height: 1.2; }
.cf-days-lead { margin: 0 0 12px; font-size: 16px; }
.cf-days-lead strong { color: var(--maple); }
.cf-days-list { display: grid; gap: 10px; }
.cf-days-list li { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* 布のタグ */
.cf-days-list time {
  display: block;
  padding: 8px 14px 8px 20px;
  border-radius: 4px 10px 10px 4px;
  background: linear-gradient(90deg, #2f6fb0 0 8px, transparent 8px), var(--linen), var(--cream);
  outline: 1.5px dashed var(--thread);
  outline-offset: -5px;
  color: var(--bark);
  font-weight: bold;
  font-size: 17px;
}
.cf-days-list time + time { background: linear-gradient(90deg, var(--maple) 0 8px, transparent 8px), var(--linen), var(--cream); }
.cf-days-list small { font-size: 13px; }
.cf-rain {
  margin: 16px 0 0;
  padding: 12px 18px;
  border-radius: 12px;
  background: #fff6e8;
  outline: 1.5px dashed rgba(47, 111, 176, .45);
  outline-offset: -5px;
  font-size: 14px;
}
.cf-rain span { margin-right: 6px; color: #2f6fb0; }

/* ===== コキアのほうき(ギンガムチェックの布) ===== */
.cf-broom {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 28px;
  align-items: center;
  padding: 40px 34px;
  border-radius: 24px;
  background:
    repeating-linear-gradient(0deg, rgba(217, 119, 43, .13) 0 16px, transparent 16px 32px),
    repeating-linear-gradient(90deg, rgba(217, 119, 43, .13) 0 16px, transparent 16px 32px),
    #fffaf5;
  outline: 2px dashed rgba(192, 57, 43, .5);
  outline-offset: -11px;
}
/* 白いフェルトのワッペンに文字 */
.cf-broom-text {
  padding: 26px 22px 24px;
  border-radius: 20px;
  background: radial-gradient(rgba(94, 58, 23, .04) 1px, transparent 1.5px) 0 0 / 5px 5px, #fff;
  outline: 2px dashed rgba(192, 57, 43, .55);
  outline-offset: -8px;
  box-shadow: 0 5px 0 rgba(192, 57, 43, .15);
  transform: rotate(-1.5deg);
}
.cf-broom-catch { margin: 0 0 18px; color: var(--bark); font-size: 26px; line-height: 1.5; }
.cf-chips { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.cf-chips li {
  --c: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 22px 8px 14px;
  border-radius: 999px;
  background: var(--linen), var(--cream);
  outline: 1.5px dashed var(--c);
  outline-offset: -5px;
  font-weight: bold;
  font-size: 15px;
  color: var(--bark);
}
.cf-chips li:nth-child(2) { --c: var(--ginkgo); }
.cf-chips li:nth-child(3) { --c: var(--acorn); }
.cf-chips svg { width: 22px; height: 22px; fill: var(--c); }

/* ポラロイド風の写真(布用テープで留める) */
.cf-polaroids { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 0 20px; }
.cf-polaroid {
  position: relative;
  padding: 8px 8px 0;
  background: #fff;
  box-shadow: 0 8px 18px rgba(94, 58, 23, .22);
  transition: transform .35s;
}
.cf-polaroid img { aspect-ratio: 1 / 1; object-fit: cover; }
.cf-polaroid figcaption { padding: 4px 0 8px; text-align: center; font-size: 17px; color: var(--bark); }
.cf-polaroid.p1 { transform: rotate(-5deg); }
.cf-polaroid.p2 { transform: rotate(4deg) translateY(22px); }
.cf-polaroid::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 74px;
  height: 22px;
  margin-left: -37px;
  background: var(--linen), rgba(232, 185, 35, .75);
  outline: 1px dashed rgba(94, 58, 23, .4);
  outline-offset: -4px;
  transform: rotate(-3deg);
}
.cf-polaroid.p2::before { background: var(--linen), rgba(217, 119, 43, .6); transform: rotate(4deg); }
.cf-polaroid:hover { transform: rotate(0) translateY(-4px) scale(1.03); z-index: 2; }

/* ===== 料金(糸を通した値札) ===== */
.cf-tags { display: flex; justify-content: center; flex-wrap: wrap; gap: 30px 56px; padding: 30px 0 0 30px; }
.cf-tag-wrap { position: relative; }
/* 値札の穴から出ている糸 */
.cf-tag-wrap::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: -30px;
  top: calc(50% - 46px);
  width: 60px;
  height: 46px;
  border-top: 2px solid var(--maple);
  border-right: 2px solid var(--maple);
  border-top-right-radius: 46px;
  pointer-events: none;
}
.cf-tag {
  position: relative;
  width: 260px;
  padding: 20px 20px 22px 54px;
  background: var(--linen), var(--kraft);
  color: var(--bark);
  clip-path: polygon(34px 0, 100% 0, 100% 100%, 34px 100%, 0 50%);
  transform-origin: 30px 50%;
  transform: rotate(-3deg);
  filter: drop-shadow(0 5px 0 var(--kraft-deep));
  transition: transform .4s;
}
.cf-tag-deco { transform: rotate(3deg); background: var(--linen), #f6dfd2; }
.cf-tag-wrap:hover .cf-tag { transform: rotate(0); }
/* 値札の穴 */
.cf-tag::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: #f6f6f6;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
}
/* 縫い目 */
.cf-tag::after {
  content: "";
  position: absolute;
  inset: 8px 8px 8px 46px;
  border: 2px dashed var(--thread);
  border-radius: 6px;
  pointer-events: none;
}
.cf-tag-name {
  display: inline-block;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--maple);
  color: #fff;
  font-size: 15px;
}
.cf-tag-deco .cf-tag-name { background: var(--orange); }
.cf-tag-price { display: block; margin-top: 4px; font-weight: bold; font-size: 16px; }
.cf-tag-price b { font-size: 46px; line-height: 1.1; color: var(--maple); letter-spacing: 1px; }
.cf-tag-deco .cf-tag-price b { color: var(--maple-deep); }
.cf-tag-price small { font-size: 12px; }

/* ===== 開催時間(布のチケット) ===== */
.cf-tickets { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cf-ticket {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 18px;
  padding: 20px 26px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 0 50%, #f6f6f6 0 12px, transparent 13px),
    radial-gradient(circle at 100% 50%, #f6f6f6 0 12px, transparent 13px),
    var(--linen), var(--cream);
  outline: 2px dashed var(--thread);
  outline-offset: -8px;
  box-shadow: 0 4px 0 var(--line);
}
.cf-ticket-no {
  grid-row: 1 / 3;
  writing-mode: vertical-rl;
  padding: 10px 5px;
  border-radius: 8px;
  background: var(--orange);
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 3px;
  outline: 1.5px dashed rgba(255, 255, 255, .85);
  outline-offset: -4px;
}
.cf-ticket + .cf-ticket .cf-ticket-no { background: var(--acorn); }
.cf-ticket-time { color: var(--bark); font-size: 34px; line-height: 1.25; letter-spacing: 1px; }
.cf-ticket-time i { font-style: normal; font-size: 22px; margin: 0 4px; color: var(--orange); }
.cf-ticket-last { font-size: 13px; color: #776655; font-weight: bold; }
.cf-ticket-last::before { content: "※"; }

/* 開催場所 */
.cf-place {
  position: relative;
  margin-top: 22px;
  border-radius: 22px;
  overflow: hidden;
  outline: 2px dashed rgba(255, 255, 255, .85);
  outline-offset: -12px;
}
.cf-place img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; object-position: 50% 40%; }
/* 織りネームのようなラベル */
.cf-place-text {
  position: absolute;
  left: 26px;
  bottom: 26px;
  padding: 16px 28px 14px;
  border-radius: 10px;
  background: var(--linen), #fff;
  outline: 2px dashed var(--thread);
  outline-offset: -7px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
  transform: rotate(-2deg);
}
.cf-place-text p { margin: 0; }
.cf-place-label { font-size: 12px; font-weight: bold; letter-spacing: 2px; color: var(--orange); }
.cf-place-name { color: var(--bark); font-size: 28px; line-height: 1.3; }
.cf-place-area { display: inline-block; margin-top: 4px !important; padding: 0 12px; border-radius: 999px; background: #e9f1dc; color: #4b6b23; font-size: 13px; font-weight: bold; }

/* ===== 締め(作業台:刺繍枠・ポラロイド・ボタン・糸巻き) ===== */
.cf-closing {
  position: relative;
  margin-top: 68px;
  padding: 44px 24px 36px;
  border-radius: 24px;
  text-align: center;
  background: radial-gradient(rgba(138, 90, 43, .08) 1px, transparent 1.5px) 0 0 / 7px 7px, var(--kraft);
  outline: 2px dashed var(--thread);
  outline-offset: -11px;
}
.cf-closing > p { position: relative; margin: 0 0 16px; }
.cf-closing-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
}

/* 刺繍枠 */
.cf-hoop-wrap { margin: 0; }
.cf-hoop {
  position: relative;
  width: 410px;
  aspect-ratio: 1;
  margin: 18px auto 0;
  padding: 13px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e2b57a, #b98149 55%, #d7a66b);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .25), inset 0 0 0 7px #c48f55, 0 12px 22px rgba(94, 58, 23, .3);
  animation: cf-sway 6s ease-in-out infinite;
  transform-origin: 50% 0;
}
@keyframes cf-sway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
/* 枠の留め金 */
.cf-hoop::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -14px;
  left: 50%;
  width: 36px;
  height: 26px;
  margin-left: -18px;
  border-radius: 5px;
  background: linear-gradient(90deg, #8e8e8e, #e4e4e4 40%, #9a9a9a);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .25);
}
.cf-hoop::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: -24px;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f2f2f2, #8a8a8a);
}
.cf-hoop-cloth {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: #ece2d2;
  box-shadow: inset 0 0 0 2px #a8743d;
}
#contents.cf .cf-hoop-cloth img { width: 100%; height: 100%; object-fit: cover; } /* 公式の #wrapper img に勝たせる */
/* 布のたるみの影 */
.cf-hoop-cloth::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 10px 18px rgba(94, 58, 23, .22), inset 0 0 0 2px #a8743d;
  pointer-events: none;
}
/* 刺繍した文字(布の下の空いたところに) */
.cf-closing-copy {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 6%;
  margin: 0;
  color: var(--maple);
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: 2px;
  text-shadow: 0 0 6px #f1e8da, 0 0 3px #f1e8da, 1px 1px 0 rgba(154, 42, 31, .3);
}
.cf-closing-copy::after {
  content: "";
  display: block;
  width: 46%;
  height: 3px;
  margin: 5px auto 0;
  background: repeating-linear-gradient(90deg, var(--ginkgo) 0 8px, transparent 8px 13px);
}
.cf-hoop-needle { position: absolute; z-index: 4; right: -14px; bottom: 36px; width: 80px; height: 80px; transform: rotate(10deg); }
.cf-ai-note { margin-top: 12px; font-size: 11px; color: #776655; }

/* 両脇のポラロイド写真 */
.cf-closing-photo { width: 190px; }
.cf-closing-photo figcaption { line-height: 1.4; padding: 8px 0 10px; }
.cf-closing-photo.p3 { justify-self: end; transform: rotate(-7deg); }
.cf-closing-photo.p4 { justify-self: start; transform: rotate(6deg) translateY(30px); }
.cf-closing-photo.p4::before { background: var(--linen), rgba(192, 57, 43, .45); transform: rotate(-5deg); }

/* ちらばったボタンと糸巻き */
.cf-button {
  --c: var(--orange);
  position: absolute;
  z-index: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 36%, rgba(60, 30, 10, .45) 0 2px, transparent 2.6px),
    radial-gradient(circle at 64% 36%, rgba(60, 30, 10, .45) 0 2px, transparent 2.6px),
    radial-gradient(circle at 36% 64%, rgba(60, 30, 10, .45) 0 2px, transparent 2.6px),
    radial-gradient(circle at 64% 64%, rgba(60, 30, 10, .45) 0 2px, transparent 2.6px),
    var(--c);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .28), 0 2px 3px rgba(94, 58, 23, .3);
}
.cf-button.b1 { top: 4px; left: 8%; --c: var(--ginkgo); }
.cf-button.b2 { bottom: 0; left: 4%; width: 22px; height: 22px; --c: var(--maple); }
.cf-button.b3 { top: 10px; right: 10%; width: 22px; height: 22px; --c: #6f9a3a; }
.cf-button.b4 { bottom: 34px; right: 3%; --c: var(--acorn); }
.cf-spool { position: absolute; z-index: 1; bottom: -6px; right: 15%; width: 46px; height: 54px; transform: rotate(-12deg); }
.cf-btn {
  position: relative;
  display: inline-block;
  padding: 14px 36px;
  border-radius: 999px;
  background: var(--maple);
  color: #fff !important;
  font-weight: bold;
  text-decoration: none;
  outline: 1.5px dashed rgba(255, 255, 255, .85);
  outline-offset: -6px;
  box-shadow: 0 4px 0 var(--maple-deep);
  transition: transform .15s, box-shadow .15s;
}
.cf-btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--maple-deep); }

/* ===== スクロールでふわっと表示(JS が使えるときだけ) ===== */
.cf-anim .cf-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.cf-anim .cf-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cf *, .cf *::before, .cf *::after { animation: none !important; transition: none !important; }
  .cf-hero-leaves { display: none; }
}

/* ===== スマホ ===== */
@media screen and (max-width: 768px) {
  #contents.cf { padding: 14px 14px 48px; }
  .cf { font-size: 14px; }

  .cf-hero { aspect-ratio: 4 / 5; border-radius: 18px; outline-offset: -9px; }
  .cf-hero-photo img { object-position: 46% 50%; }
  .cf-hero-text { bottom: 24px; }
  .cf-hero-kicker { font-size: 14px; padding: 4px 18px; }
  .cf-hero-title { font-size: 34px; letter-spacing: 2px; }
  .cf-hero-copy { font-size: 19px; }
  .cf-hero-stamp { width: 104px; height: 104px; top: 16px; right: 16px; font-size: 10px; line-height: 1.25; outline-offset: -6px; }
  .cf-hero-stamp-date { font-size: 23px; }
  .cf-hero-leaves svg { width: 22px; height: 22px; }

  .cf-intro { font-size: 15px; text-align: left; }
  .cf-intro br { display: none; }

  .cf-index ul { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cf-index a { flex-direction: row; justify-content: center; padding: 12px 6px; font-size: 13px; outline-offset: -5px; }
  .cf-index a::after { margin-left: 2px; }
  .cf-index svg { width: 20px; height: 20px; }

  .cf-sec { margin-top: 52px; }
  .cf-sec-title { gap: 8px; margin-bottom: 22px; }
  .cf-sec-title svg { width: 24px; height: 24px; }
  .cf-label { padding: 10px 22px 8px; outline-offset: -6px; }
  .cf-sec-title .ja { font-size: 22px; letter-spacing: 2px; }
  .cf-sec-title .en { font-size: 10px; }

  .cf-days { grid-template-columns: 1fr; gap: 20px; }
  .cf-cal { padding: 22px 12px 16px; outline-offset: -7px; }
  .cf-cal-month { font-size: 36px; }
  .cf-cal-grid li { height: 42px; font-size: 14px; }
  .cf-cal-grid .on span { width: 36px; height: 36px; outline-offset: -4px; }
  .cf-next b { font-size: 19px; }
  .cf-days-list time { font-size: 15px; }

  .cf-broom { grid-template-columns: 1fr; padding: 26px 18px 22px; gap: 18px; outline-offset: -8px; }
  .cf-broom-text { padding: 20px 14px 18px; }
  .cf-broom-catch { font-size: 21px; text-align: center; margin-bottom: 14px; }
  .cf-chips { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; }
  .cf-chips li { font-size: 13px; padding: 6px 16px 6px 12px; }
  .cf-chips svg { width: 18px; height: 18px; }
  .cf-polaroid figcaption { font-size: 14px; }

  .cf-tags { gap: 34px; padding-left: 24px; }
  .cf-tag { width: 250px; }
  .cf-tag-price b { font-size: 40px; }

  .cf-tickets { grid-template-columns: 1fr; gap: 12px; }
  .cf-ticket { padding: 16px 22px; }
  .cf-ticket-time { font-size: 28px; }

  .cf-place { outline-offset: -8px; }
  .cf-place img { aspect-ratio: 4 / 3; }
  .cf-place-text { left: 16px; bottom: 16px; padding: 10px 20px; outline-offset: -5px; }
  .cf-place-name { font-size: 22px; }

  .cf-closing { margin-top: 52px; padding: 36px 14px 30px; outline-offset: -8px; }
  .cf-closing-stage { grid-template-columns: 1fr 1fr; gap: 14px 10px; }
  .cf-hoop-wrap { grid-column: 1 / -1; order: -1; }
  .cf-hoop { width: 290px; padding: 10px; }
  .cf-closing-copy { font-size: 17px; letter-spacing: 1px; bottom: 6%; }
  .cf-hoop-needle { width: 58px; height: 58px; right: -10px; bottom: 22px; }
  .cf-closing-photo { width: 100%; max-width: 160px; }
  .cf-closing-photo figcaption { font-size: 13px; }
  .cf-closing-photo.p4 { transform: rotate(5deg) translateY(12px); }
  .cf-button.b1 { top: 0; left: 2%; }
  .cf-button.b3 { top: 6px; right: 4%; }
  .cf-button.b2, .cf-button.b4 { display: none; }
  .cf-spool { width: 36px; height: 42px; bottom: auto; top: 262px; right: auto; left: 3%; transform: rotate(12deg); }
  .cf-btn { padding: 13px 24px; font-size: 14px; }
}