/* Public introduction only. The application continues to use styles.css. */
.service-site { --ink:#15253f; --muted:#596477; --primary:#ff684f; --lemon:#eff7aa; --border:#dfe4ec; --link:#2859e7; --header-height:4rem; --bar-height:0px; margin:0; background:#fff; color:var(--ink); color-scheme:light; font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; font-size:1rem; line-height:1.8; letter-spacing:.01em; overflow-wrap:anywhere; }
.service-site *, .service-site *::before, .service-site *::after { box-sizing:border-box; }
.service-site [hidden] { display:none !important; }
.service-site :where(h1,h2,h3,p,figure) { margin:0; }
.service-site h1 { font-size:2.125rem; line-height:1.45; letter-spacing:-.025em; font-weight:700; }
.service-site h2 { font-size:1.625rem; line-height:1.55; }
.service-site h3 { font-size:1.25rem; line-height:1.5; }
.service-site :where(p,ul,ol)+p { margin-top:1rem; }
.service-site a { color:var(--link); text-underline-offset:.24em; }
.service-site button { font:inherit; color:inherit; cursor:pointer; }
.service-site :where(a,button,summary) { touch-action:manipulation; }
.service-site :where(a,button,summary):focus-visible { outline:3px solid var(--link); outline-offset:3px; }
.service-site :where([id],a,button,summary) { scroll-margin-top:calc(var(--header-height) + 1rem); scroll-margin-bottom:calc(var(--bar-height) + 1rem); }
.service-site svg { width:1.5rem; height:1.5rem; fill:none; stroke:currentColor; stroke-width:1.75; flex:none; }
.service-site img { max-width:100%; height:auto; display:block; }
.service-site .container { width:calc(100% - 2.5rem); max-width:75rem; margin-inline:auto; min-width:0; }
.service-site .section { padding-block:3rem; }
.service-site .caption, .service-site :where(.section-note,.sample-disclosure,.muted,.menu-note) { color:var(--muted); font-size:.875rem; line-height:1.7; }
.service-site .section-note { margin-top:1.5rem; }
.service-site .eyebrow { font-size:.875rem; font-weight:500; line-height:1.7; margin-bottom:1rem; }
.service-site .section-heading>p:last-child { margin-top:1rem; max-width:40em; }
.service-site .skip { position:fixed; top:.5rem; left:1rem; transform:translateY(-200%); z-index:50; background:white; padding:.75rem 1rem; }
.service-site .skip:focus { transform:none; }
.service-site .header { position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid var(--border); }
.service-site .header-inner { min-height:4rem; display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding-block:.5rem; }
.service-site .brand { display:inline-flex; align-items:center; gap:.5rem; min-height:3rem; color:var(--ink); font-weight:700; text-decoration:none; line-height:1.5; }
.service-site .brand img { flex:none; }
.service-site .desktop-nav, .service-site .header-cta { display:none; }
.service-site .menu-trigger, .service-site .close-button { border:1px solid var(--ink); border-radius:999px; background:#fff; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:3rem; min-width:3rem; padding:.5rem .75rem; line-height:1.5; }
.service-site .button { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:3.5rem; padding:.875rem 1.5rem; border:1px solid var(--ink); border-radius:999px; text-decoration:none; font-weight:700; text-align:center; line-height:1.5; transition:background-color 140ms ease-out; }
.service-site .primary { color:var(--ink); background:var(--primary); }
.service-site .primary:hover, .service-site .primary:active { background:#f95b42; }
.service-site :where(.button,button):active { box-shadow:none; }
.service-site .hero { padding-top:1.5rem; padding-bottom:0; }
.service-site .hero-grid { display:grid; gap:2rem; }
.service-site .hero-copy { min-width:0; }
.service-site .hero-copy>.eyebrow { display:table; background:#e8e4ff; padding:.25rem .75rem; border-radius:999px; }
.service-site mark { background:linear-gradient(transparent 55%,var(--lemon) 55%); color:inherit; }
.service-site .lead { font-size:1rem; line-height:1.8; margin-top:1rem; }
.service-site .hero-actions { display:grid; gap:.5rem; margin-top:1.5rem; }
.service-site .hero-actions .secondary { border:0; border-radius:0; background:none; color:var(--link); text-decoration:underline; text-underline-offset:.24em; min-height:3rem; padding:.5rem; font-weight:500; }
.service-site .hero-copy>.caption { margin-top:.5rem; }
.service-site .hero-art { min-width:0; padding-right:.5rem; }
.service-site .picture-stack { position:relative; background:var(--lemon); border-radius:1.5rem; }
.service-site .picture-stack::before { content:""; position:absolute; inset:0; background:#e8e4ff; transform:translate(8px,-8px); border-radius:1.5rem; z-index:-1; }
.service-site .picture-stack { isolation:isolate; }
.service-site .picture-frame { position:relative; }
.service-site .hero-photo { border-radius:1.5rem 1.5rem 0 0; width:100%; aspect-ratio:16/9; object-fit:contain; background:#eef4ff; }
.service-site .photo-caption { padding:.75rem 1rem; text-align:center; font-weight:700; font-size:.875rem; }
.service-site .sample-tag { position:absolute; top:.5rem; left:.5rem; padding:.25rem .5rem; border-radius:999px; background:#fff; font-size:.875rem; }
.service-site .play { position:absolute; left:50%; bottom:.5rem; transform:translateX(-50%); width:3rem; height:3rem; display:grid; place-items:center; border:1px solid var(--ink); border-radius:50%; background:#fff; }
.service-site .play svg { fill:var(--ink); stroke:none; }
.service-site .floating-note { display:none; }
.service-site .hero-foot { display:flex; align-items:center; justify-content:center; gap:1rem; padding-block:1.5rem; font-weight:500; }
.service-site .hero-foot i { width:1.5rem; height:1px; background:var(--ink); }
.service-site .sample-section { background:#f5f7fc; }
.service-site .sample-grid { display:grid; gap:2rem; }
.service-site .sample-card { background:#fff; border:1px solid var(--border); border-radius:1.25rem; min-width:0; }
.service-site .sample-poster { display:block; position:relative; padding:0; width:100%; border:0; background:#eef4ff; border-radius:1.25rem 1.25rem 0 0; }
.service-site .sample-poster img { width:100%; aspect-ratio:16/9; object-fit:contain; border-radius:inherit; }
.service-site .play-static { position:absolute; bottom:.5rem; left:.75rem; width:3rem; height:3rem; border:1px solid var(--ink); border-radius:50%; background:white; display:grid; place-items:center; }
.service-site .duration { position:absolute; right:.75rem; bottom:.5rem; padding:.25rem .5rem; background:var(--ink); color:white; font-size:.875rem; border-radius:.5rem; }
.service-site .sample-card-body { padding:1.25rem; }
.service-site .sample-card-body p { margin-block:.5rem; }
.service-site .text-link { display:inline-flex; align-items:center; gap:.5rem; min-height:3rem; padding:.5rem 0; border:0; background:none; color:var(--link); text-decoration:underline; text-underline-offset:.24em; text-align:left; }
.service-site .steps { list-style:none; padding:0; margin:2rem 0 0; }
.service-site .step { display:grid; grid-template-columns:3rem minmax(0,1fr); column-gap:1rem; row-gap:.5rem; border-bottom:1px solid var(--border); padding-block:1.5rem; }
.service-site .step:first-child { padding-top:0; }
.service-site .step-top { grid-row:span 2; }
.service-site .step-top svg { display:none; }
.service-site .step-number { display:grid; place-items:center; width:3rem; height:3rem; border-radius:50%; background:#eef4ff; font-weight:700; }
.service-site .step:nth-child(2) .step-number { background:#f5f8dd; }
.service-site .step:nth-child(3) .step-number { background:#ffdcd4; }
.service-site .step p { grid-column:2; }
.service-site .care-section { background:#eef4ff; }
.service-site .care-grid { display:grid; gap:1rem; margin-top:2rem; }
.service-site .care-item { background:#fff; border:1px solid var(--border); border-radius:1.25rem; padding:1.5rem; }
.service-site .role-label { display:inline-block; font-size:.875rem; padding:.25rem .75rem; background:#eef4ff; border-radius:999px; margin-bottom:1rem; }
.service-site .care-item p { margin-top:1rem; }
.service-site .narrow { max-width:50rem; }
.service-site .faq-list { margin-top:2rem; }
.service-site details { border-bottom:1px solid var(--border); }
.service-site summary { cursor:pointer; min-height:3rem; padding:1rem .25rem; font-weight:500; }
.service-site .faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; list-style:none; }
.service-site .faq-list summary::-webkit-details-marker { display:none; }
.service-site .faq-list summary span { flex:none; width:1.5rem; height:1.5rem; position:relative; }
.service-site .faq-list summary span::before, .service-site .faq-list summary span::after { content:""; position:absolute; top:50%; left:25%; width:50%; height:2px; background:currentColor; }
.service-site .faq-list summary span::after { transform:rotate(90deg); transition:transform 160ms; }
.service-site .faq-list details[open] summary span::after { transform:none; }
.service-site details>p { margin:0; padding:0 .25rem 1.5rem; }
.service-site .closing { background:var(--lemon); }
.service-site .closing h2 { font-size:1.875rem; }
.service-site .closing p { margin-block:1rem; }
.service-site .closing .button { margin-top:.5rem; width:100%; }
.service-site .footer { padding-block:2rem; background:#fff; }
.service-site .footer nav { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; margin-block:1rem; }
.service-site .footer nav a { display:inline-flex; align-items:center; min-height:3rem; font-size:.875rem; }
.service-site .sticky-cta { position:fixed; bottom:0; left:0; right:0; z-index:21; padding:.5rem 1rem calc(.5rem + env(safe-area-inset-bottom)); background:white; border-top:1px solid var(--border); }
.service-site .sticky-cta .button { width:100%; }
.service-site dialog { color:var(--ink); background:#fff; border:1px solid var(--ink); border-radius:1.5rem; padding:1.5rem; max-height:calc(100dvh - 2rem); max-width:calc(100% - 2rem); overflow:auto; overscroll-behavior:contain; }
.service-site dialog::backdrop { background:rgb(21 37 63 / .5); }
.service-site dialog[open] { animation:service-open 180ms ease-out; }
.service-site .dialog-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1rem; }
.service-site .dialog-heading h2 { font-size:1.25rem; }
.service-site .dialog-heading .close-button { flex:none; }
.service-site .dialog-heading .eyebrow { margin-bottom:.5rem; }
.service-site .menu-dialog { position:fixed; top:var(--header-height); margin:0 auto; width:40rem; max-height:calc(100dvh - var(--header-height) - 1rem); border-radius:0 0 1.5rem 1.5rem; }
.service-site .menu-dialog nav { display:grid; gap:.5rem; }
.service-site .menu-dialog nav a { padding:.75rem .25rem; min-height:3rem; }
.service-site .menu-dialog .caption { margin-top:1rem; }
.service-site .preview-dialog { width:50rem; }
.service-site video { display:block; width:100%; aspect-ratio:16/9; background:var(--ink); border-radius:.5rem; }
.service-site .video-status { min-height:1.7em; font-size:.875rem; margin-block:.5rem; }
.service-site .video-status[data-error] { color:#b42332; }
.service-site .info-page { max-width:50rem; width:calc(100% - 2.5rem); margin:auto; padding-block:3rem; }
.service-site .info-page section { margin-top:3rem; }
.service-site .info-page :where(h1,h2,h3) { margin-bottom:1rem; }
.service-site .info-page p { max-width:40em; }
.service-site .info-page ul { padding-left:1.5rem; }
.service-site .info-page li+li { margin-top:1rem; }
.service-site .info-toc { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; background:#eef4ff; padding:1.5rem; border-radius:1.25rem; margin-top:2rem; }
.service-site .info-toc a { min-height:3rem; display:flex; align-items:center; }
.service-site .notice { background:#eef4ff; border-radius:1.25rem; padding:1.5rem; }
@keyframes service-open { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media(max-width:359px) { .service-site .container,.service-site .info-page { width:calc(100% - 2rem); } .service-site h1 { font-size:1.875rem; letter-spacing:-.03em; } .service-site .header-inner { flex-wrap:wrap; } }
@media(min-width:768px) { .service-site { --header-height:5rem; } .service-site .container { width:calc(100% - 4rem); } .service-site .header-inner { min-height:5rem; } .service-site .section { padding-block:4rem; } .service-site .hero { padding-top:3rem; padding-bottom:0; } .service-site h1 { font-size:2.75rem; } .service-site h2 { font-size:2rem; } .service-site .hero-art { width:100%; max-width:40rem; margin:auto; } .service-site .care-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; } .service-site .closing { text-align:center; } .service-site .closing h2 { font-size:2.5rem; } .service-site .closing .button { width:auto; } .service-site .mobile-break { display:none; } .service-site .info-page { width:calc(100% - 4rem); padding-block:4rem; } }
@media(min-width:1024px) { .service-site .container { width:calc(100% - 6rem); } .service-site .section { padding-block:4.5rem; } .service-site .hero { padding-top:3.5rem; padding-bottom:0; } .service-site .header-inner { gap:1rem; } .service-site .desktop-nav { display:flex; gap:.5rem; align-items:center; } .service-site .desktop-nav a { display:flex; align-items:center; min-height:3rem; color:var(--ink); text-decoration:none; padding:.5rem; } .service-site .header-cta { display:inline-flex; min-height:3rem; padding:.5rem 1rem; } .service-site .menu-trigger { display:none; } .service-site .hero-grid { grid-template-columns:5fr 6fr; gap:2.5rem; align-items:center; } .service-site h1 { font-size:3.25rem; line-height:1.4; } .service-site h2 { font-size:2.125rem; } .service-site h3 { font-size:1.375rem; } .service-site .lead { font-size:1.125rem; } .service-site .hero-art { padding-top:3rem; position:relative; } .service-site .floating-note { display:grid; position:absolute; right:1rem; top:-1rem; background:#fff; border:1px solid var(--ink); padding:.75rem 1rem; border-radius:1.5rem; transform:rotate(3deg); font-size:.875rem; line-height:1.7; } .service-site .floating-note strong { font-size:1rem; } .service-site .sample-grid { grid-template-columns:5fr 6fr; gap:2.5rem; align-items:center; } .service-site .sample-card { border-radius:1.5rem; } .service-site .sample-card-body { padding:2rem; } .service-site .steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; margin-top:3rem; } .service-site .step,.service-site .step:first-child { display:block; padding:2rem; background:#eef4ff; border:0; border-radius:1.5rem; } .service-site .step:nth-child(2) { background:#f5f8dd; } .service-site .step:nth-child(3) { background:#fff0e9; } .service-site .step-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; } .service-site .step-top svg { display:block; } .service-site .step p { margin-top:1rem; } .service-site .care-item { padding:2rem; border-radius:1.5rem; } .service-site .closing h2 { font-size:2.75rem; } }
@media(prefers-reduced-motion:reduce) { .service-site *, .service-site *::before, .service-site *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
@media(forced-colors:active) { .service-site :where(button,.button,.play-static,summary) { border:1px solid ButtonText; } .service-site :focus-visible { outline-color:Highlight; } .service-site .faq-list summary span::before,.service-site .faq-list summary span::after { background:ButtonText; } }
@media(max-height:500px) { .service-site .header { position:relative; } .service-site .menu-dialog { top:.5rem; max-height:calc(100dvh - 1rem); } }
@media(min-width:1024px) { .service-site.text-enlarged .desktop-nav, .service-site.text-enlarged .header-cta { display:none; } .service-site.text-enlarged .menu-trigger { display:inline-flex; } }

.service-site .hero h1 span { display:inline-block; max-width:100%; }
@media(max-width:1023px) { .service-site .header .header-cta { display:none; } }
.service-site dialog { padding:min(1.5rem,5vw); }
.service-site .dialog-heading { flex-wrap:wrap; }
.service-site.text-enlarged .header-inner { flex-wrap:wrap; }
