:root { color-scheme: light; --paper: #f8f7f2; --ink: #29292b; --muted: #656167; --violet: #6252ae; --line: #deddd5; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--paper); }
    * { box-sizing: border-box; }
    body { margin: 0; -webkit-font-smoothing: antialiased; }
    ::selection { background: #ddd3f3; color: #34275b; }
    a { color: inherit; }
    a:focus-visible { outline: 3px solid #8270c5; outline-offset: 6px; border-radius: 3px; }
    p, h1, h2 { margin: 0; }
    svg { display: block; }
    .shell { width: min(100%, 1220px); margin: 0 auto; padding: 0 48px; }
    .header { min-height: 112px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
    .brand { display: flex; align-items: center; gap: 8px; font: bold 35px Georgia, "Times New Roman", serif; letter-spacing: -1.8px; }
    .brand svg { width: 39px; height: 39px; flex-shrink: 0; }
    .brand-dot { color: var(--violet); }
    .header-note { font-size: 12px; color: var(--muted); }
    .hero { display: grid; grid-template-columns: 1.03fr 1fr; align-items: center; gap: 28px; padding-top: 70px; padding-bottom: 76px; }
    .eyebrow { display: flex; align-items: center; gap: 10px; color: #6a606a; font-size: 10px; font-weight: 600; letter-spacing: 1.7px; line-height: 1.6; }
    .dot { width: 6px; height: 6px; background: var(--violet); border-radius: 50%; flex-shrink: 0; }
    h1 { margin-top: 25px; font: normal clamp(51px, 6.3vw, 77px)/1.08 Georgia, "Times New Roman", serif; letter-spacing: -.052em; }
    h1 em { color: var(--violet); font-weight: normal; }
    .intro { max-width: 405px; margin-top: 27px; font-size: 15px; line-height: 1.9; color: var(--muted); }
    .notice { max-width: 460px; margin-top: 32px; padding: 22px 24px; border: 1px solid #dcd5e5; border-radius: 12px; background: #f0ecf5; }
    .notice h2 { font-size: 15px; font-weight: 600; line-height: 1.5; color: #51446a; }
    .notice p { margin-top: 9px; color: #665c70; font-size: 13px; line-height: 1.8; }
    .contact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 15px; max-width: 460px; margin-top: 28px; }
    .contact-label { font-size: 12px; color: var(--muted); }
    .contact a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-size: 13px; font-weight: 500; color: var(--violet); text-decoration-thickness: 1px; text-underline-offset: 5px; }
    .contact a:hover { color: #514295; }
    .contact a svg { flex-shrink: 0; }
    .visual { position: relative; min-width: 0; }
    .visual:before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(ellipse, #ede6ed 0, transparent 70%); }
    .visual svg { position: relative; width: 100%; height: auto; }
    .art-note { position: relative; margin: -10px auto 0; text-align: center; color: #756a7b; font: italic 19px/1.5 Georgia, "Times New Roman", serif; }
    .strip { border-top: 1px solid #e5e2d9; border-bottom: 1px solid #e5e2d9; background: #edebe3; }
    .strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 22px; padding-bottom: 22px; color: #68615d; font-size: 12px; line-height: 1.6; }
    .flower { font-size: 23px; line-height: 1; color: #83718f; }
    .footer { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; padding-top: 33px; padding-bottom: 35px; color: #756e76; font-size: 11px; line-height: 1.85; }
    .footer p { max-width: 430px; }
    .footer .privacy { max-width: 315px; }
    @media (min-width: 1400px) { .hero { padding-top: 100px; padding-bottom: 100px; } }
    @media (max-width: 900px) { .shell { padding-left: 30px; padding-right: 30px; } .hero { gap: 14px; padding-top: 48px; padding-bottom: 60px; } h1 { font-size: clamp(45px, 7vw, 61px); } .notice { padding: 20px; } .intro { font-size: 14px; } .art-note { font-size: 17px; } }
    @media (max-width: 650px) { .shell { padding-left: 24px; padding-right: 24px; } .header { min-height: 90px; gap: 16px; } .brand { font-size: 30px; } .brand svg { width: 33px; height: 33px; } .header-note { font-size: 10px; max-width: 95px; text-align: right; line-height: 1.5; } .hero { grid-template-columns: 1fr; gap: 34px; padding-top: 37px; padding-bottom: 43px; } h1 { font-size: clamp(43px, 10.7vw, 64px); margin-top: 22px; } .intro { max-width: 440px; margin-top: 24px; } .notice { max-width: none; margin-top: 26px; } .notice h2 { font-size: 14px; } .notice p { font-size: 12px; } .contact { margin-top: 21px; gap: 3px 14px; } .visual { width: min(100%, 380px); margin: 0 auto; } .art-note { margin-top: -18px; font-size: 17px; } .strip-inner { gap: 14px; justify-content: center; flex-wrap: wrap; font-size: 11px; padding-top: 19px; padding-bottom: 19px; } .strip-inner .last-flower, .strip-inner .last-phrase { display: none; } .footer { display: block; padding-top: 27px; padding-bottom: 29px; font-size: 10px; } .footer .privacy { margin-top: 17px; max-width: 430px; } }
    @media (max-width: 350px) { .shell { padding-left: 20px; padding-right: 20px; } .brand { font-size: 27px; } h1 { font-size: 40px; } .header-note { font-size: 9px; } .contact a { font-size: 12px; } .strip-inner { gap: 9px; font-size: 10px; } }