* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; background: var(--yayoi-surface); color: var(--yayoi-navy-deep); font-family: "Segoe UI", "Noto Sans", system-ui, sans-serif; font-size: 15px; line-height: 1.7; }
a { color: var(--yayoi-navy); text-underline-offset: 4px; }
a:hover { color: var(--yayoi-coral); }
:focus-visible { outline: 3px solid var(--yayoi-coral); outline-offset: 4px; }
.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 100; padding: 12px 18px; background: var(--yayoi-navy-deep); color: white; }
.skip-link:focus { top: 10px; }
.site-header { position: sticky; top: 0; z-index: 10; background: var(--yayoi-surface); border-bottom: 1px solid var(--yayoi-line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 80px; }
.header-inner img, .footer-inner img { display: block; object-fit: contain; }
.header-inner nav { display: flex; align-items: center; gap: 25px; font-size: 13px; font-weight: 600; }
.header-inner nav a { text-decoration: none; }
.header-inner nav [aria-current] { border-bottom: 2px solid var(--yayoi-coral); }
.contact-link { border: 1px solid var(--yayoi-line); border-radius: var(--yayoi-radius-sm); padding: 8px 14px; }
.breadcrumb { display: flex; gap: 12px; margin-block: 26px; color: var(--yayoi-muted); font-size: 12px; }
.guide-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 58px; align-items: start; padding-bottom: 30px; }
.guide-sidebar { position: sticky; top: 108px; }
.guide-sidebar nav { display: grid; padding-bottom: 24px; border-bottom: 1px solid var(--yayoi-line); }
.guide-sidebar nav p { margin: 0 0 14px; font-size: 17px; font-weight: 700; }
.guide-sidebar nav a { padding: 8px 0; font-size: 13px; text-decoration: none; }
.sidebar-help { margin-top: 26px; font-size: 13px; }
.sidebar-help p { color: var(--yayoi-muted); }
.sidebar-help a { font-weight: 600; }
.intro { padding: 4px 0 34px; }
.guide-label { color: var(--yayoi-muted); font-size: 13px; margin: 0 0 10px; }
h1 { margin: 0 0 18px; font-size: clamp(30px, 3.2vw, 42px); letter-spacing: -.035em; line-height: 1.18; }
.intro > p:not(.guide-label) { max-width: 710px; }
.intro > p { color: var(--yayoi-muted); }
.intro .availability-note { margin: 22px 0 0; padding: 15px 18px; border-left: 3px solid var(--yayoi-navy); background: var(--yayoi-soft); color: var(--yayoi-navy); font-size: 13px; }
h2 { margin: 0 0 10px; font-size: 25px; letter-spacing: -.025em; line-height: 1.3; }
.section-description { margin: 0 0 20px; color: var(--yayoi-muted); }
.table-hint { display: none; font-size: 12px; color: var(--yayoi-muted); }
.table-scroll { overflow-x: auto; border: 1px solid var(--yayoi-line); border-radius: var(--yayoi-radius-md); }
table { border-collapse: collapse; width: 100%; min-width: 660px; font-size: 13px; line-height: 1.6; }
th, td { text-align: left; padding: 17px 16px; vertical-align: top; border-bottom: 1px solid var(--yayoi-line); border-right: 1px solid var(--yayoi-line); }
th:last-child, td:last-child { border-right: 0; }
tr:last-child th, tr:last-child td { border-bottom: 0; }
thead { background: var(--yayoi-navy); color: white; }
thead th { width: 25%; border-color: #536078; font-weight: 700; }
thead th:first-child { width: 20%; }
thead a { color: white; font-size: 16px; text-decoration: none; }
thead a:hover { color: var(--yayoi-yellow); text-decoration: underline; }
thead span { display: block; margin-top: 8px; color: #e0e4ee; font-size: 11px; font-weight: 400; }
tbody th { background: var(--yayoi-canvas); font-weight: 600; }
td small { display: block; color: var(--yayoi-muted); font-size: 11px; margin-top: 5px; }
.status { color: var(--yayoi-success); font-weight: 600; }
.table-footnote { color: var(--yayoi-muted); font-size: 12px; margin: 14px 0 0; }
.method { padding-block: 36px; border-bottom: 1px solid var(--yayoi-line); }
.method-heading { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.method-number { font-size: 14px; font-weight: 700; color: var(--yayoi-muted); align-self: flex-start; padding-top: 6px; }
.method-heading h2 { margin-bottom: 4px; }
.method-heading p { margin: 0; color: var(--yayoi-muted); font-size: 13px; }
.method-tag { margin-left: auto; background: var(--yayoi-soft); color: var(--yayoi-navy); border-radius: var(--yayoi-radius-sm); padding: 5px 10px; font-size: 11px; font-weight: 600; }
.method-tag.neutral { background: var(--yayoi-canvas); color: var(--yayoi-muted); }
.method > p { color: var(--yayoi-muted); }
dl { margin: 22px 0; }
dl > div { display: grid; grid-template-columns: 185px minmax(0, 1fr); gap: 20px; padding-block: 10px; }
dt { font-size: 13px; font-weight: 600; }
dd { margin: 0; color: var(--yayoi-muted); font-size: 13px; }
.source-link { display: inline-flex; gap: 12px; font-size: 13px; font-weight: 600; }
.method .service-note, .service-note { padding: 13px 16px; background: var(--yayoi-canvas); color: var(--yayoi-muted); font-size: 12px; }
.cost-section, .questions { padding-block: 36px; border-bottom: 1px solid var(--yayoi-line); }
.shipping-steps { margin: 23px 0; padding-left: 24px; }
.shipping-steps li { padding-left: 6px; margin-bottom: 20px; }
.shipping-steps li::marker { font-weight: 700; color: var(--yayoi-navy); }
.shipping-steps strong, .shipping-steps span { display: block; }
.shipping-steps span { color: var(--yayoi-muted); font-size: 13px; margin-top: 3px; }
.questions h2 { margin-bottom: 20px; }
details { border-top: 1px solid var(--yayoi-line); }
summary { padding-block: 17px; cursor: pointer; font-size: 14px; font-weight: 600; }
details p { margin: 0 0 20px; font-size: 13px; color: var(--yayoi-muted); max-width: 660px; }
.quote-section { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; padding: 26px; margin-top: 36px; background: var(--yayoi-soft); border-radius: var(--yayoi-radius-md); }
.quote-section h2 { font-size: 22px; }
.quote-section p { color: var(--yayoi-muted); font-size: 13px; margin: 0; max-width: 600px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 15px; padding: 12px 20px; background: var(--yayoi-coral); color: white; text-decoration: none; border-radius: var(--yayoi-radius-sm); font-size: 13px; font-weight: 600; min-height: 46px; }
.button:hover { background: var(--yayoi-coral-hover); color: white; }
.updated { color: var(--yayoi-muted); font-size: 11px; margin-block: 20px; }
.site-footer { background: var(--yayoi-navy-deep); color: #dbe1ee; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-block: 30px; font-size: 12px; }
.footer-inner a { color: white; }
@media (max-width: 1000px) { .guide-layout { grid-template-columns: 185px minmax(0, 1fr); gap: 30px; } .method-tag { margin-left: 30px; } .table-hint { display: block; } }
@media (max-width: 760px) { html { scroll-padding-top: 125px; } .shell { width: calc(100% - 32px); } .header-inner { align-items: flex-start; gap: 15px; padding-block: 16px; min-height: 76px; } .header-inner img { width: 125px; height: auto; } .header-inner nav { justify-content: flex-end; gap: 10px 16px; flex-wrap: wrap; font-size: 11px; } .header-inner nav [aria-current] { display: none; } .contact-link { padding: 5px 8px; } .guide-layout { display: block; } .guide-sidebar { position: static; margin-bottom: 26px; } .guide-sidebar nav { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-bottom: 18px; } .guide-sidebar nav p { flex-basis: 100%; margin-bottom: 0; font-size: 14px; } .guide-sidebar nav a { padding: 3px 0; font-size: 12px; } .sidebar-help { display: none; } .breadcrumb { margin-block: 18px; } .intro { padding-top: 0; } h1 { font-size: 32px; } h2 { font-size: 23px; } .method-heading { gap: 10px; } .method-heading > div { flex: 1; min-width: 0; } .method-tag { margin-left: 27px; } dl > div { grid-template-columns: 1fr; gap: 4px; } .quote-section { padding: 22px; } .quote-section .button { width: 100%; } .footer-inner { flex-direction: column; align-items: flex-start; gap: 12px; } .footer-inner p { margin: 0; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }