.me-app { --me-green: var(--color-green, #4a6f68); --me-bg: var(--color-background, #f7f5f2); --me-gold: var(--color-gold, #d9a441); color: var(--color-text, #333); font-family: var(--font-sans, "Noto Sans JP", sans-serif); font-size: 16px; line-height: 1.8; padding: 0 24px 100px; }
.me-app *, .me-app *::before, .me-app *::after { box-sizing: border-box; }
.me-app [hidden] { display: none !important; }
.me-app h1, .me-app h2, .me-app h3 { font-family: var(--font-serif, "Noto Serif JP", serif); color: var(--me-green); }
.me-app h1 { font-size: clamp(30px, 4vw, 48px); line-height: 1.5; margin: 10px 0 24px; }
.me-app h2 { font-size: 26px; line-height: 1.5; margin: 0 0 20px; }
.me-app h3 { font-size: 20px; line-height: 1.6; margin: 14px 0 8px; }
.me-app p { margin: 0 0 16px; }
.me-hero { max-width: 1200px; margin: 0 auto; padding: 13.75rem 0 56px; text-align: center; }
.me-hero .section-heading { margin-bottom: 32px; }
.me-hero .section-heading h1 { font-size: 3.375rem; line-height: 1.5; letter-spacing: .1em; margin: 0; color: var(--color-text, #333); }
.me-hero .section-heading__english { color: var(--me-gold); }
.me-hero .me-intro { font-family: var(--font-sans, "Noto Sans JP", sans-serif); font-weight: 700; }
.me-test { background: #e9eee9; color: #334f48; padding: 12px 20px; border-radius: 12px; font-size: 14px; }
.me-hero .me-test { display: inline-block; margin: 12px 0 0; }
.me-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 40px; max-width: 1200px; margin: auto; align-items: start; }
.me-builder { min-width: 0; }
.me-section { padding: 36px; background: white; border-radius: var(--card-radius, 30px); margin-bottom: 28px; box-shadow: 0 0 8px rgb(74 111 104 / 10%); scroll-margin-top: 120px; }
.me-eyebrow { color: var(--me-green); font-size: 13px; font-weight: 700; letter-spacing: .1em; }
.me-reference-grid, .me-check-grid, .me-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.me-reference { border: 1px solid #c6d3cc; border-radius: 18px; overflow: hidden; padding: 16px; display: flex; flex-direction: column; }
.me-reference a { color: var(--me-green); text-decoration: none; }
.me-reference a:hover h3 { text-decoration: underline; }
.me-reference p { font-size: 13px; margin: 12px 0 20px; }
.me-reference-image { height: 150px; border-radius: 10px; overflow: hidden; background: var(--me-bg); }
.me-reference-image img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.me-reference .me-btn { margin-top: auto; font-size: 14px; padding: 12px; }
.me-steps { display: flex; gap: 8px; margin: 28px 0; }
.me-steps a { flex: 1; text-align: center; padding: 12px 4px; border-radius: 20px; background: #e7ede8; color: #334f48; font-size: 14px; text-decoration: none; }
.me-steps a:hover { background: #d8e3da; }
.me-app fieldset { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.me-check { border: 1px solid #c5cec6; border-radius: 14px; display: flex; gap: 12px; align-items: flex-start; padding: 16px; cursor: pointer; background: white; }
.me-check:has(input:checked) { border: 2px solid var(--me-green); padding: 15px; background: #f0f5ef; }
.me-check input { width: 20px !important; height: 20px; min-width: 20px; margin: 4px 0 0; accent-color: var(--me-green); }
.me-check span { min-width: 0; }
.me-check strong { display: block; font-size: 16px; font-weight: 600; }
.me-check small { display: block; font-size: 13px; margin-top: 6px; }
.me-check em { display: block; font-style: normal; font-size: 12px; color: #3e5f52; margin-top: 10px; }
.me-included, .me-notice { padding: 14px 16px; background: #f5f3ea; border-radius: 12px; font-size: 13px; margin: 0 0 20px; }
.me-app details { border-top: 1px solid #d8ded8; padding-top: 16px; margin-top: 24px; }
.me-app summary { cursor: pointer; color: var(--me-green); font-size: 14px; padding: 8px 0; }
.me-app details p { font-size: 14px; padding-top: 10px; }
.me-extra { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 14px; }
.me-app input[type=number] { width: 80px; border: 1px solid #829c8d; border-radius: 8px; padding: 10px; font: inherit; }
.me-undecided { margin: 24px 0; }
.me-notes { display: block; font-size: 15px; }
.me-notes textarea, .me-handoff textarea { display: block; width: 100%; font: inherit; margin: 10px 0; padding: 14px; border: 1px solid #829c8d; border-radius: 10px; resize: vertical; background: #fff; color: #333; }
.me-summary { position: sticky; top: var(--me-summary-top, 160px); border: 1px solid #c6d3cc; border-radius: 24px; padding: 26px; background: #fff; box-shadow: 0 4px 18px rgb(74 111 104 / 8%); max-height: calc(100vh - var(--me-summary-top, 160px) - 24px); overflow-y: auto; scroll-margin-top: var(--me-summary-top, 160px); }
.me-summary h2 { font-size: 22px; }
.me-total { color: var(--me-green); font: 600 34px/1.5 var(--font-serif, serif); overflow-wrap: anywhere; }
.me-small { font-size: 12px; line-height: 1.8; }
.me-line { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding: 12px 0; border-bottom: 1px solid #e0e5df; font-size: 13px; }
.me-line span { flex: 1; min-width: 0; }
.me-line small { display: block; font-size: 11px; color: #526557; }
.me-line strong { white-space: nowrap; font-family: var(--font-sans, sans-serif); }
#me-monthly { margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--me-green); }
#me-exclusions { margin-top: 20px; }
.me-btn { cursor: pointer; border: 1px solid var(--me-green); color: var(--me-green); background: #fff; font: 500 15px/1.6 var(--font-sans, sans-serif); text-decoration: none; padding: 14px 20px; border-radius: 28px; min-height: 48px; }
.me-btn-primary { background: var(--me-green); color: white; }
.me-btn:hover { background: #e7ede8; color: #2f4e42; }
.me-btn-primary:hover { background: #35544d; color: white; }
.me-btn:disabled { opacity: .45; cursor: not-allowed; }
.me-finish { padding: 36px; background: #fff; border: 1px solid #c6d3cc; border-radius: 24px; scroll-margin-top: 120px; }
.me-finish .me-btn { width: 100%; margin-top: 8px; }
.me-finish #me-save-status { margin: 12px 0 0; }
.me-app .me-breakdown { padding-top: 0; margin-top: 20px; }
.me-app .me-breakdown > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; list-style: none; padding: 16px 0; font-size: 15px; font-weight: 600; }
.me-breakdown > summary::-webkit-details-marker { display: none; }
.me-breakdown > summary::after { content: '▼'; font-size: 12px; display: inline-block; flex: 0 0 auto; transform: rotate(0deg); transition: transform .4s cubic-bezier(.445, .05, .55, .95); }
.me-breakdown[open] > summary:not([aria-expanded="false"])::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .me-breakdown > summary::after { transition: none; } }
.me-breakdown .me-breakdown-open, .me-breakdown[open] > summary:not([aria-expanded="false"]) .me-breakdown-closed { display: none; }
.me-breakdown[open] > summary:not([aria-expanded="false"]) .me-breakdown-open { display: inline; }
.me-app :focus-visible { outline: 3px solid #ac7315; outline-offset: 4px; }
.me-document, .me-contact { max-width: 1200px; margin: 48px auto 0; padding: 48px; border-radius: 24px; background: white; border: 1px solid #c6d3cc; scroll-margin-top: 110px; }
.me-document-total { color: var(--me-green); font-size: 24px; margin: 12px 0 24px; }
.me-document-notes { white-space: pre-wrap; overflow-wrap: anywhere; }
.me-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 16px; }
.me-print-help { font-size: 13px; }
.me-handoff { grid-column: 1 / -1; }
.me-handoff textarea { font-size: 13px; background: #f3f6ef; }
.me-error { color: #a52820; font-size: 14px; }
.me-mobile-bar { display: none; }
.me-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.me-app dialog { width: min(540px, calc(100% - 32px)); border: 1px solid #c6d3cc; border-radius: 24px; padding: 32px; color: #333; background: white; }
.me-app dialog::backdrop { background: rgb(20 40 30 / 50%); }
.me-app dialog h2 { font-size: 22px; }
.me-service-ready .estimate__content { filter: none !important; opacity: 1 !important; pointer-events: auto !important; user-select: auto; }
.me-linked-banner { position: relative; cursor: pointer; }
.estimate.me-linked-banner { overflow: hidden; isolation: isolate; }
.estimate.me-linked-banner::before { content: ''; position: absolute; inset: 0; z-index: -1; background: inherit; transform: scale(1); transition: transform .6s ease; pointer-events: none; }
.estimate.me-linked-banner:focus-within::before { transform: scale(1.06); }
.me-linked-banner .estimate__content, .me-linked-banner a.button { position: static; }
.me-linked-banner a.button::after { content: ''; position: absolute; inset: 0; z-index: 3; }
.me-linked-banner:focus-within a.button { color: var(--button-color); background-color: white; border-color: var(--button-color); box-shadow: none; }
.me-linked-banner:has(a.button:focus-visible) { outline: 3px solid var(--color-gold); outline-offset: 4px; }
@media (hover: hover) {
    .estimate.me-linked-banner:hover::before { transform: scale(1.06); }
    .me-linked-banner:hover a.button { color: var(--button-color); background-color: white; border-color: var(--button-color); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .estimate.me-linked-banner::before { transition: none; transform: none; } }
@media (max-width: 1000px) {
    .me-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; }
    .me-section, .me-finish { padding: 24px; }
    .me-check-grid { grid-template-columns: 1fr; }
    .me-summary { padding: 20px; }
}
@media (max-width: 1200px) {
    .me-hero { padding-top: 10rem; }
    .me-hero .section-heading h1 { font-size: 2.15rem; }
}
@media (max-width: 900px) { .me-hero { padding-top: 7.5rem; } }
@media (max-width: 1024px) {
    .me-app { padding-bottom: 120px; }
    .me-layout { display: flex; flex-direction: column; gap: 28px; }
    .me-builder, .me-summary { width: 100%; }
    .me-summary { position: static; max-height: none; overflow: visible; scroll-margin-top: 100px; }
    .me-mobile-bar { display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 45; background: var(--me-green); color: white; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -3px 12px rgb(0 0 0 / 12%); }
    .me-mobile-bar a { color: white; display: grid; grid-template-columns: 1fr auto; text-decoration: none; gap: 0 12px; }
    .me-mobile-bar span { font-size: 12px; }
    .me-mobile-bar strong { font-size: 23px; grid-row: span 2; align-self: center; max-width: 65vw; line-height: 1.4; }
    .me-mobile-bar small { font-size: 10px; }
    .me-steps .me-step-number, .me-steps .me-step-label { display: block; }
    .me-steps .me-step-label { white-space: nowrap; }
}
@media (max-width: 760px) {
    .me-app { padding: 0 16px 120px; }
    .me-hero { text-align: center; }
    .me-reference-grid, .me-choice-grid { grid-template-columns: 1fr; }
    .me-reference-image { height: 190px; }
    .me-section { padding: 24px 20px; margin-bottom: 24px; }
    .me-finish { padding: 24px 20px; }
    .me-app h2 { font-size: 23px; }
    .me-steps { gap: 6px; }
    .me-steps a { font-size: 12px; }
    .me-document, .me-contact { padding: 24px 20px; }
    .me-document-total { font-size: 18px; }
    .me-document-total strong { white-space: normal; text-align: right; }
}
@media print {
    @page { size: A4; margin: 16mm; }
    body { background: white !important; font-size: 11pt; }
    body > *:not(main) { display: none !important; }
    #main { padding: 0 !important; margin: 0 !important; }
    .me-app { padding: 0; color: black; }
    .me-app > *:not(.me-document) { display: none !important; }
    .me-document { display: block !important; border: 0; border-radius: 0; padding: 0; margin: 0; max-width: none; }
    .me-actions, .me-print-help { display: none !important; }
    .me-line { break-inside: avoid; font-size: 10pt; }
    .me-document h2 { font-size: 22pt; }
    .me-document p { font-size: 10pt; }
    .me-document-total { font-size: 15pt; }
    .me-test { border: 1px solid #777; background: white; }
}
@media (prefers-reduced-motion: reduce) { .me-app * { scroll-behavior: auto !important; } }

/* PDF handed off to the consultation and attached to both emails. */
.me-handoff { width: 100%; min-width: 0; margin: 12px 0 32px; padding: 24px; border: 1px solid #c6d3cc; border-radius: 16px; background: #f6f8f5; }
.me-handoff h3 { margin: 0 0 12px; color: #4a6f68; }
.me-handoff p { overflow-wrap: anywhere; }
.me-handoff .me-pdf-preview { display: block; width: 100%; max-height: 620px; overflow: auto; overscroll-behavior: contain; border: 1px solid #c6d3cc; border-radius: 8px; background: #e8ebe8; margin: 16px 0; padding: 12px; }
.me-pdf-preview canvas { display: block; width: 100%; height: auto; background: white; margin: 0 auto 12px; }
.me-pdf-preview canvas:last-child { margin-bottom: 0; }
.me-handoff p { font-family: "Noto Sans JP", sans-serif; font-weight: 400; line-height: 1.8; }
.me-pdf-preview:focus-visible { outline: 3px solid #4a6f68; outline-offset: 3px; }
.me-handoff [hidden] { display: none !important; }
.me-handoff .me-actions { margin: 16px 0; }
@media (max-width: 600px) { .me-handoff { padding: 16px; } .me-handoff .me-pdf-preview { max-height: 460px; padding: 6px; } }

/* Integrated consultation entry, following the existing theme tokens. */
.me-entry { max-width:1200px; margin:0 auto 48px; text-align:center; }
.me-entry-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.me-entry-card { display:flex; flex-direction:column; gap:12px; align-items:flex-start; text-align:left; padding:32px; color:var(--me-green); background:#fff; border:1px solid #8faea6; border-radius:var(--card-radius,30px); text-decoration:none; transition:background .25s,box-shadow .25s; }
.me-entry-card strong { font-family:var(--font-serif,"Noto Serif JP",serif); font-size:26px; }
.me-entry-card:hover,.me-entry-card:focus-visible { background:#eef3ef; box-shadow:0 0 0 3px #8faea6; }
.me-entry-arrow { font-weight:700; margin-top:auto; }
#me-simulator,#me-contact { scroll-margin-top:var(--me-summary-top,140px); }
.me-sales-notice { color:#b33131; font-size:13px; line-height:1.8; }
.me-contact .contact-type-options .wpcf7-form-control { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:12px; row-gap:0; max-width:720px; }
.me-contact .contact-type-options .wpcf7-list-item { margin:0; }
.me-contact .contact-type-options label { display:flex; align-items:center; gap:8px; min-height:44px; cursor:pointer; }
.me-contact .contact-type-options input[type=radio] { width:18px; height:18px; min-height:18px; max-height:18px; flex:0 0 18px; margin:0; accent-color:var(--me-green); }
.me-contact .contact-type-options .wpcf7-list-item-label { line-height:1.6; }
.me-contact .me-handoff { margin-top:20px; }
.me-contact #me-remove-estimate { margin-bottom:24px; }
.me-bot-field { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip-path:inset(50%)!important; white-space:nowrap!important; }
@media(max-width:600px) { .me-entry-grid,.me-contact .contact-type-options .wpcf7-form-control { grid-template-columns:1fr; } .me-entry-card { padding:24px; } .me-entry-card strong { font-size:23px; } }
@media(prefers-reduced-motion:reduce) { .me-entry-card { transition:none; } }


/* Match the consultation columns to the simulator and keep social links in view. */
/* Reuse the original contact SNS panel, with the simulator column widths. */
.me-contact-layout { margin-top:48px; }
.me-contact-layout .me-contact { width:100%; min-width:0; margin:0; }
.me-contact-social.social-panel { border:0; border-radius:var(--card-radius); padding:4rem 3rem; background:white; color:var(--color-text,#333); box-shadow:0 0 .25rem rgb(74 111 104 / 20%); }
.me-contact-social.social-panel > p { margin-bottom:1rem; }
.me-contact-social.social-panel > a { width:100%; min-width:0; text-decoration:none; color:inherit; }
.me-contact-social.social-panel > a:hover { color:var(--me-green); }
.me-contact-social.social-panel > a > span:not(.instagram-crop) { min-width:0; }
@media (max-width:1200px) {
    .me-contact-social.social-panel { gap:24px; padding:32px 24px; }
    .me-contact-social.social-panel > p { margin-bottom:0; }
}

/* Center the link group by its longest row and keep the icons aligned. */
.me-contact-social.social-panel { padding-inline:16px; }
.me-contact-social-list { display:flex; flex-direction:column; gap:24px; width:max-content; max-width:100%; margin-inline:auto; }
.me-contact-social-list > a { display:flex; align-items:center; gap:12px; min-height:40px; color:inherit; text-decoration:none; font:inherit; font-size:14px; white-space:nowrap; }
.me-contact-social-list > a:hover { color:var(--me-green); }
.me-contact-social-list .social-icon,.me-contact-social-list .instagram-crop { width:32px; height:32px; flex:0 0 32px; }
@media (min-width:1025px) and (max-width:1200px), (max-width:360px) {
    .me-contact-social-list > a { font-size:12px; gap:8px; }
}