/* メールフォーム共通。色はテーマ側の変数（C.A.T. は --cat-*）を使い、無ければ既定値 */
.f-wrap {
  --f-accent: var(--cat-red, var(--accent, #d33));
  --f-accent-dark: var(--cat-red-dark, var(--accent-dark, #a22));
  --f-ink: var(--cat-ink, var(--ink, #1a1a1a));
  --f-ink-2: var(--cat-ink-2, var(--ink-2, #4a4a4a));
  --f-muted: var(--cat-muted, #8a8a8a);
  --f-line: var(--cat-line, var(--line, #dcdcdc));
  --f-soft: var(--cat-bg-soft, var(--bg-soft, #f6f6f6));
  --f-radius: var(--cat-radius, 4px);
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 16px 96px;
  color: var(--f-ink);
  text-align: left;
  line-height: 1.8;
}
.f-wrap * { box-sizing: border-box; text-align: inherit; }

.f-head { margin-bottom: 24px; }
.f-eyebrow { margin: 0 0 8px; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--f-accent); }
.f-title { margin: 0; padding: 0; border: 0; background: none; font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 700; line-height: 1.3; color: var(--f-ink); }
.f-title::before, .f-title::after { display: none; }

.f-intro { margin-bottom: 32px; padding: 16px 20px; background: var(--f-soft); border-radius: var(--f-radius); font-size: .92rem; color: var(--f-ink-2); }
.f-intro h1, .f-intro h2, .f-intro h3 { display: none; }
.f-intro p { margin: 0 0 .5em; }
.f-intro > :last-child, .f-intro .rich-text > :last-child { margin-bottom: 0; }
.f-intro div { margin: 0; padding: 0; }
.f-intro ul { margin: .6em 0 0; padding-left: 1.2em; }
.f-intro li { margin: 0 0 .2em; list-style: disc; }
.f-intro a { color: var(--f-accent-dark); }

.f-alert { margin-bottom: 28px; padding: 16px 20px; border: 1px solid var(--f-accent); border-left-width: 4px; border-radius: var(--f-radius); background: #fff6f6; font-size: .9rem; }
.f-alert ul { margin: 8px 0 0; padding-left: 1.2em; }
.f-alert:focus { outline: none; }

.f-row { margin: 0 0 24px; }
.f-row[hidden] { display: none; }
.f-label { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .95rem; font-weight: 700; color: var(--f-ink); }
.f-req { display: inline-block; padding: 0 6px; border-radius: 2px; background: var(--f-accent); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .06em; line-height: 1.8; }
.f-req[hidden] { display: none; }
.f-sub { display: block; margin-bottom: 4px; font-size: .78rem; color: var(--f-muted); }
.f-help { margin: -2px 0 8px; font-size: .82rem; line-height: 1.6; color: var(--f-ink-2); }
.f-error { margin: 6px 0 0; font-size: .85rem; font-weight: 700; color: var(--f-accent-dark); }

/* 旧テーマの input/select { height: 28px } を打ち消す。消すとセレクトの文字が切れて見えなくなる */
.f-form input[type=text], .f-form input[type=email], .f-form input[type=tel], .f-form input[type=date],
.f-form input[type=number], .f-form input[type=url], .f-form select, .f-form textarea {
  display: block; width: 100%; height: auto !important; min-height: 48px;
  margin: 0; padding: 11px 14px; border: 1px solid var(--f-line); border-radius: var(--f-radius);
  background: #fff; color: var(--f-ink); font: inherit; font-size: 16px; line-height: 1.5;
  box-shadow: none; transition: border-color .15s, box-shadow .15s;
}
.f-form select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23666' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;
}
.f-form textarea { min-height: 160px; resize: vertical; }
.f-form textarea[rows="3"] { min-height: 96px; }
.f-form input::placeholder, .f-form textarea::placeholder { color: #b4b4b4; }
.f-form input:focus, .f-form select:focus, .f-form textarea:focus { outline: none; border-color: var(--f-ink); box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
.has-error input, .has-error select, .has-error textarea, .f-form .is-invalid { border-color: var(--f-accent) !important; background-color: #fffafa; }

.f-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.f-pair__item { display: block; font-weight: normal; }

.f-purchase__new { margin-top: 14px; padding: 14px 16px; border-radius: var(--f-radius); background: var(--f-soft); }
.f-purchase__new[hidden], .f-purchase__ym[hidden], .f-purchase__day[hidden], .f-purchase__toggle[hidden] { display: none; }
.f-purchase__q { margin: 0 0 8px; font-size: .85rem; font-weight: 700; color: var(--f-ink-2); }
.f-purchase__ym { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 360px; }
.f-purchase__day input { max-width: 240px; }
.f-form .f-purchase__ym select[hidden] { display: none; }
.f-purchase__links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin: 12px 0 0; font-size: .85rem; }
.f-link { padding: 0; border: 0; background: none; color: var(--f-ink); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.f-purchase__nokey { display: inline-flex; align-items: center; gap: 6px; font-weight: normal; color: var(--f-ink-2); cursor: pointer; }
.f-purchase__nokey input { width: 16px; height: 16px; margin: 0; }
.f-compose { display: grid; gap: 14px; padding: 16px; border-radius: var(--f-radius); background: var(--f-soft); }
.f-compose__part[hidden], .f-compose .f-choice[hidden] { display: none; }
.f-compose__q { margin: 0 0 6px; font-size: .82rem; font-weight: 700; color: var(--f-ink-2); }
.f-compose__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.f-compose__unit { display: flex; align-items: center; gap: 8px; }
.f-compose__unit span { font-size: .9rem; color: var(--f-ink-2); }
.f-form .f-compose input[type=text] { min-height: 42px; padding: 8px 12px; }
.f-compose > .f-compose__part > input[type=text] { max-width: 320px; }
.f-compose > .f-compose__part > .f-compose__unit { max-width: 200px; }
.f-choices--sm { gap: 6px; }
.f-choices--sm .f-choice span { min-height: 38px; padding: 6px 14px; font-size: .86rem; }
.f-zip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.f-zip input { max-width: 200px; }
.f-zip__status { font-size: .8rem; color: var(--f-muted); }
.f-zip__status.is-ok { color: #2f7d4a; font-weight: 700; }
.f-zip__status.is-ng { color: var(--f-accent-dark); }

.f-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.f-choices > div, .f-choices > div > div { display: contents; }
.f-choice { position: relative; display: inline-flex; cursor: pointer; margin: 0; font-weight: normal; }
.f-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.f-choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border: 1px solid var(--f-line); border-radius: 22px; background: #fff; font-size: .92rem; line-height: 1.5; color: var(--f-ink-2); transition: all .15s; }
.f-choice span::before { content: ""; width: 14px; height: 14px; margin-right: 8px; border: 1.5px solid #bbb; border-radius: 50%; flex: none; transition: all .15s; }
.f-choice input[type=checkbox] + span::before { border-radius: 3px; }
.f-choice:hover span { border-color: var(--f-ink); }
.f-choice input:checked + span { border-color: var(--f-ink); background: var(--f-ink); color: #fff; }
.f-choice input:checked + span::before { border-color: #fff; background: #fff; box-shadow: inset 0 0 0 3px var(--f-ink); }
.f-choice input:focus-visible + span { box-shadow: 0 0 0 3px rgba(0,0,0,.15); }

.f-file { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px; border: 1.5px dashed var(--f-line); border-radius: var(--f-radius); background: var(--f-soft); cursor: pointer; font-weight: normal; transition: border-color .15s; }
.f-file:hover, .f-file.is-drag { border-color: var(--f-ink); }
.f-file input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.f-file__btn { padding: 8px 16px; border: 1px solid var(--f-ink); border-radius: var(--f-radius); background: #fff; font-size: .85rem; font-weight: 700; }
.f-file__name { font-size: .85rem; color: var(--f-muted); word-break: break-all; }
.f-file.has-file .f-file__name { color: var(--f-ink); }
.f-file__preview { width: 64px; height: 64px; object-fit: cover; border-radius: 3px; margin-left: auto; }

.f-group { margin: 8px 0 28px; padding: 20px 20px 4px; border: 1px solid var(--f-line); border-left: 4px solid var(--f-accent); border-radius: var(--f-radius); background: #fff; }
.f-group[hidden] { display: none; }
.f-group__title { padding: 0 6px; font-size: .9rem; font-weight: 700; color: var(--f-accent-dark); }

.f-divert { margin: 0 0 24px; padding: 20px; border: 1px solid var(--f-line); border-left: 4px solid var(--f-accent); border-radius: var(--f-radius); background: var(--f-soft); }
.f-divert[hidden] { display: none; }
.f-divert__text { margin: 0 0 16px; font-size: .95rem; color: var(--f-ink); }
.f-form.is-diverted > .f-row:not(.f-row--diverter), .f-form.is-diverted > .f-group, .f-form.is-diverted > .f-submit { display: none; }
.f-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.f-submit { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--f-line); text-align: center; }
.f-submit__note { margin: 0 0 16px; font-size: .82rem; color: var(--f-muted); text-align: center; }
.f-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 260px; min-height: 52px; padding: 12px 32px; border: 1.5px solid var(--f-accent); border-radius: var(--f-radius); background: var(--f-accent); color: #fff !important; font: inherit; font-size: 1rem; font-weight: 700; letter-spacing: .06em; text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s; }
.f-btn:hover { background: var(--f-accent-dark); border-color: var(--f-accent-dark); }
.f-btn[disabled] { opacity: .6; cursor: wait; }
.f-btn--ghost { background: transparent; border-color: var(--f-ink); color: var(--f-ink) !important; }
.f-btn--ghost:hover { background: var(--f-ink); color: #fff !important; }

.f-done { text-align: center; }
.f-done * { text-align: center; }
.f-done__icon { color: #2f7d4a; margin-bottom: 12px; }
.f-done__body { margin: 20px 0 32px; color: var(--f-ink-2); }
.f-done__body p { margin: 0 0 .6em; }

@media (max-width: 600px) {
  .f-wrap { padding: 32px 16px 72px; }
  .f-group { padding: 16px 14px 2px; }
  .f-btn { width: 100%; min-width: 0; }
  .f-file__preview { margin-left: 0; }
}