:root {
  --background: #fcfcfc;
  --foreground: #272622;
  --card: #ffffff;
  --card-foreground: #272622;
  --primary: #413a32;
  --primary-foreground: #ffffff;
  --secondary: #f1ede4;
  --secondary-foreground: #272622;
  --muted: #f1ede4;
  --muted-foreground: #6f6b63;
  --accent: #8f6429;
  --accent-foreground: #272622;
  --destructive: #b63c35;
  --border: #dfd9ce;
  --input: #d4cbbb;
  --ring: #413a32;
  --radius: .9rem;
}

.dark {
  --background: #272622;
  --foreground: #f8f6f0;
  --card: #413a32;
  --card-foreground: #f8f6f0;
  --primary: #d8b67d;
  --primary-foreground: #272622;
  --secondary: #494238;
  --secondary-foreground: #f8f6f0;
  --muted: #494238;
  --muted-foreground: #d4cbbb;
  --accent: #d8b67d;
  --accent-foreground: #272622;
  --destructive: #ec746d;
  --border: #665d53;
  --input: #74695d;
  --ring: #d8b67d;
}




.letter-page { background:#fcfcfc;color:#272622;font-family:var(--font-noto),"Noto Sans JP",sans-serif;font-weight:400;line-height:1.75; }
.letter-wrap { width:min(1040px,calc(100% - 48px));margin-inline:auto; }
.letter-header { max-width:1088px;margin:auto;padding:22px 24px;font-size:14px;font-weight:600;color:#413a32; }
.letter-hero { border-block:1px solid #dfd9ce;background:#fcfcfc;padding:64px 0; }
.letter-hero-grid { display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:48px; }
.letter-eyebrow { display:flex;align-items:center;gap:12px;color:#8f6429;font-size:14px;font-weight:500;letter-spacing:.04em; }
.letter-eyebrow::before { content:"";width:32px;height:1px;background:#af8242; }
.letter-hero h1 { margin:26px 0;font-size:clamp(38px,4.8vw,58px);line-height:1.45;font-weight:700;letter-spacing:-.055em; }
.letter-hero h1 span { display:block; }
.letter-hero h1 .letter-hero-lead { font-size:clamp(20px,2.3vw,29px);white-space:nowrap;letter-spacing:-.05em; }
.letter-hero-summary { font-size:18px;font-weight:500;line-height:1.8; }
.letter-hero-description { margin-top:14px;font-size:16px;line-height:2;color:#6f6b63;max-width:35em; }
.letter-cta-wrap { margin-top:30px;max-width:450px;width:100%; }
.letter-cta-wrap>p { text-align:center;margin-top:12px;color:#6f6b63;font-size:13px; }
.letter-cta { display:flex!important;align-items:center;justify-content:center;gap:18px;min-height:54px;height:auto!important;width:100%;padding:14px 22px!important;font-size:16px!important;font-weight:600;border-radius:4px!important;background:#413a32!important;color:white!important;white-space:normal!important;box-shadow:none!important;transition:background .2s; }
.letter-cta:hover { background:#554a3d!important; }
.letter-portrait { border:1px solid #dfd9ce;border-radius:6px;background:white;overflow:hidden;scroll-margin-top:24px; }
.letter-portrait>img { width:100%;aspect-ratio:1/1.06;object-fit:cover;object-position:center 65%; }
.letter-portrait figcaption { padding:18px 20px;background:white;border-top:1px solid #dfd9ce; }
.letter-portrait figcaption p { font-size:14px;font-weight:600;line-height:1.8; }
.letter-portrait figcaption span { display:block;margin-top:8px;font-size:12px;color:#6f6b63; }
.letter-worries { padding-block:64px;text-align:center;container-type:inline-size; }
.letter-worries h2 { font-size:clamp(14px,4.1cqw,34px);font-weight:600;line-height:1.8;letter-spacing:-.04em; }
.letter-worries h2 span { display:block;white-space:nowrap; }
.letter-worries ul { max-width:760px;margin:30px auto;text-align:left;border-top:1px solid #dfd9ce; }
.letter-worries li { display:flex;align-items:center;gap:16px;border-bottom:1px solid #dfd9ce;padding:18px 4px; }
.letter-worries li svg { width:16px;flex-shrink:0;color:#af8242; }
.letter-worries li p { font-size:16px;font-weight:400;line-height:1.8; }
.letter-worries-close { font-size:16px;line-height:2;color:#6f6b63; }
.letter-content { background:white;padding:64px 0;border-block:1px solid #dfd9ce; }
.letter-section-heading { text-align:left;margin-bottom:32px; }
.letter-section-heading>p { display:flex;align-items:center;gap:16px;font:600 12px var(--font-inter),Inter,sans-serif;color:#8f6429;letter-spacing:.16em; }
.letter-section-heading>p::after { content:"";width:40px;height:1px;background:#af8242; }
.letter-section-heading h2 { font-size:clamp(28px,3.2vw,38px);line-height:1.5;font-weight:600;margin-top:16px;letter-spacing:-.04em; }
.letter-section-heading>div { margin-top:18px;font-size:16px;line-height:2;color:#6f6b63; }
.letter-feature { display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:48px;padding:28px 0 36px;border-top:1px solid #af8242; }
.letter-card-label,.letter-topic-number { font:500 20px var(--font-inter),Inter,sans-serif;color:#8f6429;letter-spacing:.04em; }
.letter-feature h3 { font-size:clamp(24px,2.7vw,32px);font-weight:600;line-height:1.6;letter-spacing:-.04em;margin-top:16px; }
.letter-card-body { font-size:16px;line-height:2;color:#6f6b63;margin-top:14px; }
.letter-feature figure img { display:block;width:100%;height:400px;object-fit:contain;border-radius:4px;filter:none; }
.letter-topic-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px; }
.letter-topic { padding:24px 0;border-top:1px solid #dfd9ce;background:white; }
.letter-topic h3 { font-size:20px;line-height:1.6;letter-spacing:-.025em;font-weight:600;margin-top:12px; }
.letter-topic .letter-card-body { margin-top:12px; }
.letter-content-cta { display:flex;justify-content:center;margin-top:8px; }
.letter-reading { max-width:800px;margin:auto;padding:64px 24px; }
.letter-why { background:#fcfcfc;color:#272622; }
.letter-why h2 { font-size:clamp(26px,3vw,34px);font-weight:600;margin-bottom:24px;letter-spacing:-.035em; }
.letter-why h2::before { content:"";display:block;width:40px;height:1px;background:#af8242;margin-bottom:20px; }
.letter-why p { font-size:16px;line-height:2;color:#6f6b63;margin-top:18px; }
.letter-why .letter-why-emphasis { color:#413a32;font-size:18px;font-weight:600;margin-block:26px; }
.letter-suspension { max-width:420px;margin:28px auto; }
.letter-suspension img { display:block;width:100%;height:auto;border:1px solid #dfd9ce;border-radius:4px; }
.letter-suspension figcaption { margin-top:10px;text-align:center;font-size:12px;color:#6f6b63; }
.letter-form-section { background:#f7f5f0;padding:56px 0;color:#272622;scroll-margin-top:16px;border-top:1px solid #dfd9ce; }
.letter-form-section .letter-section-heading { max-width:640px;margin-inline:auto; }
.letter-signup { max-width:640px;margin:32px auto 0;background:white;padding:32px;border:1px solid #dfd9ce;border-radius:6px;text-align:left;color:#272622; }
.letter-registration-notes { max-width:640px;margin:28px auto 0;padding-top:24px;border-top:1px solid #dfd9ce;text-align:left;color:#272622; }
.letter-footer { background:#fcfcfc;padding:32px 24px 96px;color:#413a32;text-align:center;border-top:1px solid #dfd9ce; }
.letter-footer>p { font-size:14px;font-weight:600; }
.letter-footer nav { display:flex;justify-content:center;gap:12px;margin:18px 0;font-size:14px; }
.letter-footer a { text-decoration:underline;text-underline-offset:4px; }
.letter-footer small { display:block;max-width:850px;margin:auto;font-size:12px;line-height:1.9;color:#6f6b63; }
.letter-sticky { display:none; }
@media(max-width:760px) {
 .letter-wrap { width:calc(100% - 32px); }
 .letter-header { padding:16px;font-size:12px; }
 .letter-hero { padding:32px 0; }
 .letter-hero-grid,.letter-feature { grid-template-columns:1fr;gap:26px; }
 .letter-hero h1 { margin:22px 0;font-size:42px; }
 .letter-hero h1 .letter-hero-lead { font-size:clamp(19px,4.8vw,29px); }
 .letter-hero-summary { font-size:17px; }
 .letter-portrait { max-width:440px;margin:auto;width:100%; }
 .letter-portrait>img { aspect-ratio:4/3;object-position:center 68%; }
 .letter-worries { padding-block:40px; }
 .letter-worries li { gap:12px;padding-block:16px; }
 .letter-content { padding-block:40px; }
 .letter-topic-grid { column-gap:24px; }
 .letter-reading { padding-block:44px; }
 .letter-signup { padding:24px 20px; }
 .letter-sticky { display:block;position:fixed;bottom:0;left:0;right:0;background:#fcfcfc;padding:10px 16px;z-index:40;border-top:1px solid #dfd9ce; }
 .letter-sticky .letter-cta { min-height:48px;padding:12px!important; }
}
@media(max-width:540px) { .letter-topic-grid { grid-template-columns:1fr; } .letter-cta { gap:10px;font-size:15px!important; } .letter-feature figure img { height:300px; } }