@font-face { font-family: "Case Zen Maru"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/assets/miraie/fonts/figma/47920d14170142977e05a601544d6b46ec575fbe.woff2") format("woff2"); }
@font-face { font-family: "Case Zen Maru"; font-style: normal; font-weight: 600 900; font-display: swap; src: url("/assets/miraie/fonts/figma/06e798dcf2595dcc3cdb7369c595dbc9ca9da6fc.woff2") format("woff2"); }
:root {
  color-scheme: light;
  --case-ink: #3a2c1c;
  --case-orange: #ff6500;
  --case-green: #19932b;
  --case-paper: #fff9ef;
  --case-line: #eadfd2;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff4e3; color: var(--case-ink); font-family: "Case Zen Maru", "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, sans-serif; line-height: 1.8; }
a { color: inherit; text-underline-offset: .22em; }
a:focus-visible { outline: 3px solid var(--case-green); outline-offset: 5px; }
img { max-width: 100%; }
.case-page-shell { max-width: 1000px; margin: auto; background: var(--case-paper); min-height: 100vh; }
.case-skip-link { position: fixed; top: -100px; left: 16px; z-index: 10; background: white; padding: 8px 16px; }
.case-skip-link:focus { top: 8px; }
.case-site-header { display: flex; align-items: center; gap: 16px; min-height: 86px; padding: 12px 40px; border-bottom: 1px solid var(--case-line); background: #fff; }
.case-wordmark { display: flex; }
.case-wordmark img { width: 154px; height: auto; }
.case-site-label { font-size: 12px; font-weight: 700; }
.case-header-link { margin-left: auto; font-size: 13px; font-weight: 700; text-decoration: none; }
.case-header-link span { color: var(--case-orange); padding-left: 8px; }
main { padding: 0 40px; }
.case-breadcrumb { display: flex; gap: 12px; flex-wrap: wrap; padding: 18px 0; color: #796b5c; font-size: 12px; }
.case-breadcrumb a { text-decoration: none; }
.case-intro { padding: 8px 0 36px; }
.case-intro-kicker { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 24px; }
.case-intro-kicker img { width: 68px; height: auto; }
.case-intro-kicker p { margin: 0; font-weight: 800; font-size: 24px; line-height: 1.45; }
.case-intro-kicker span { display: block; color: #bd672a; letter-spacing: .16em; font-size: 11px; }
.case-region { display: inline-block; border-radius: 999px; background: var(--case-ink); color: white; padding: 4px 16px; margin: 0 0 14px; font-size: 14px; font-weight: 700; }
h1 { font-size: clamp(27px, 4.3vw, 38px); letter-spacing: .015em; line-height: 1.55; margin: 0; overflow-wrap: anywhere; }
.case-title-rule { width: 56px; height: 5px; margin-top: 22px; border-radius: 10px; background: var(--case-orange); }
.case-content-card { padding: 32px; background: white; border-radius: 26px; box-shadow: 0 8px 28px #3a2c1c08; }
.case-section-heading { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; }
.case-section-number { font-size: 13px; font-weight: 800; color: #bd5700; padding-right: 12px; border-right: 1px solid #e8c9ad; }
h2 { font-size: 22px; line-height: 1.5; margin: 0; }
.case-photo-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.case-photo { margin: 0; overflow: hidden; border-radius: 16px; background: #f5f1eb; }
.case-photo figcaption { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; background: var(--case-green); color: white; line-height: 1.5; }
.case-photo-after figcaption { background: #e05a00; }
.case-photo b { font-size: 18px; letter-spacing: .06em; }
.case-photo figcaption span { font-size: 12px; }
.case-photo a { display: flex; justify-content: center; }
.case-photo img { display: block; width: 100%; height: auto; aspect-ratio: 334 / 417; object-fit: contain; }
.case-photo-note { text-align: right; margin: 10px 0 0; color: #796b5c; font-size: 12px; }
.case-work, .case-facts { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--case-line); }
.case-work > p { margin: 0; font-size: 16px; line-height: 2; white-space: pre-line; overflow-wrap: anywhere; }
.case-facts dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.case-facts dl > div { background: var(--case-paper); border-radius: 12px; padding: 16px 20px; }
.case-facts dt { font-size: 12px; color: #796b5c; }
.case-facts dd { margin: 2px 0 0; font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
.case-conditions-note { font-size: 12px; color: #796b5c; margin: 16px 0 0; }
.case-evidence { border-top: 1px dashed #d7c9ba; margin-top: 28px; padding-top: 16px; font-size: 12px; color: #796b5c; }
.case-evidence p { margin: 0; }
.case-return { display: flex; justify-content: center; padding: 32px 0 42px; }
.case-return a { display: inline-flex; align-items: center; gap: 12px; background: var(--case-orange); color: white; padding: 13px 26px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.case-return a:hover { background: #dc5800; }
.case-site-footer { padding: 26px 24px; text-align: center; border-top: 1px solid var(--case-line); }
.case-site-footer a { font-weight: 700; text-decoration: none; }
.case-site-footer p { font-size: 11px; color: #796b5c; margin: 4px 0 0; }
@media (max-width: 600px) {
  .case-site-header { min-height: 74px; padding: 12px 20px; gap: 10px; }
  .case-wordmark img { width: 122px; }
  .case-site-label { display: none; }
  main { padding: 0 18px; }
  .case-breadcrumb { font-size: 11px; padding: 14px 0; gap: 10px; }
  .case-intro { padding: 8px 2px 26px; }
  .case-intro-kicker { margin-bottom: 20px; }
  .case-region { font-size: 12px; padding: 4px 12px; }
  .case-content-card { padding: 20px 16px; border-radius: 20px; }
  .case-section-heading { margin-bottom: 16px; gap: 10px; }
  h2 { font-size: 18px; }
  .case-photo-pair { gap: 10px; }
  .case-photo { border-radius: 12px; }
  .case-photo figcaption { flex-direction: column; align-items: flex-start; padding: 6px 10px; }
  .case-photo b { font-size: 15px; }
  .case-photo figcaption span { font-size: 10px; }
  .case-photo-note { font-size: 10px; text-align: left; }
  .case-work, .case-facts { margin-top: 24px; padding-top: 22px; }
  .case-work > p { font-size: 14px; }
  .case-facts dl { gap: 8px; }
  .case-facts dl > div { padding: 12px; }
  .case-facts dd { font-size: 16px; }
  .case-return a { font-size: 14px; padding: 13px 22px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }