:root{--page-title-display:none;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}/* Start custom CSS for shortcode, class: .elementor-element-446463d */.contact-form {
  text-align: left;
  width: 50%;
  margin: 20px;
}/* End custom CSS */
/* Start custom CSS */:root {
    color-scheme: light dark;
    --blue: #0a62e8;
    --blue-2: #0048b8;
    --cyan: #4fc3ff;
    --ink: #10213d;
    --muted: #58677f;
    --bg: #f5f8fd;
    --surface: rgba(255, 255, 255, .78);
    --solid: #fff;
    --line: rgba(16, 33, 61, .12);
    --shadow: 0 24px 70px rgba(20, 65, 130, .14);
    --radius: 24px;
    --max: 1180px;
    --space: clamp(4.5rem, 9vw, 8.5rem);
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: radial-gradient(circle at 85% 3%, rgba(79, 195, 255, .2), transparent 28rem), var(--bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    line-height: 1.75;
    letter-spacing: .01em
}

a {
    color: inherit
}

a:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--cyan);
    outline-offset: 4px;
    border-radius: 8px
}

.wrap {
    inline-size: min(calc(100% - 2rem), var(--max));
    margin-inline: auto
}

.site-header {
    position: relative;
    padding-block: 1rem;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem .8rem .7rem 1.15rem;
    background: rgba(255, 255, 255, .68);
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 18px;
    box-shadow: 0 10px 35px rgba(20, 65, 130, .09);
    backdrop-filter: blur(18px);
    z-index: 0;
}

.brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-weight: 800;
    text-decoration: none;
    letter-spacing: -.02em
}

.brand-mark {
    display: grid;
    place-items: center;
    inline-size: 2.2rem;
    block-size: 2.2rem;
    border-radius: 10px;
    background: linear-gradient(145deg, var(--blue), #63cfff);
    color: #fff;
    box-shadow: 0 8px 20px rgba(10, 98, 232, .25)
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.2rem
}

.nav-links>a:not(.button) {
    font-size: .88rem;
    text-decoration: none;
    color: var(--muted)
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 3.2rem;
    padding-inline: 1.35rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--blue), var(--blue-2));
    color: #fff;
    text-decoration: none;
    font-weight: 750;
    box-shadow: 0 12px 28px rgba(10, 98, 232, .25);
    transition: transform .2s ease, box-shadow .2s ease
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(10, 98, 232, .32)
}

.button.secondary {
    background: rgba(255, 255, 255, .7);
    color: var(--blue-2);
    border: 1px solid rgba(10, 98, 232, .18);
    box-shadow: none
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--blue-2);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase
}

.eyebrow::before {
    content: "";
    inline-size: 1.8rem;
    block-size: 2px;
    background: var(--blue)
}

h1,
h2,
h3 {
    margin-block: 0;
    line-height: 1.12;
    letter-spacing: -.04em
}

h1 {
    font-size: clamp(3rem, 7vw, 6.6rem);
    max-inline-size: 12ch
}

h2 {
    font-size: clamp(2.2rem, 4.7vw, 4rem);
    max-inline-size: 15ch
}

h3 {
    font-size: clamp(1.18rem, 2vw, 1.45rem)
}

p {
    margin-block: 0
}

.lead {
    font-size: clamp(1.05rem, 1.7vw, 1.3rem);
    color: var(--muted);
    max-inline-size: 43rem
}

.hero {
    padding-block: clamp(5rem, 10vw, 9rem) var(--space)
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    align-items: center;
    gap: clamp(2.5rem, 6vw, 6rem)
}

.hero-copy {
    display: grid;
    gap: 1.65rem
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem
}

.fact-row {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    color: var(--muted);
    font-size: .88rem
}

.fact-row span {
    padding: .42rem .72rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .52)
}

.visual {
    position: relative;
    min-block-size: 31rem;
    display: grid;
    place-items: center
}

.glow {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(10, 98, 232, .35), rgba(79, 195, 255, .12));
    filter: blur(38px)
}

.outlook-card {
    position: relative;
    inline-size: min(100%, 31rem);
    padding: 1.1rem;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 28px;
    background: rgba(255, 255, 255, .68);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
    transform: rotate(1.5deg)
}

.window-bar {
    display: flex;
    gap: .38rem;
    padding: .35rem .25rem .85rem
}

.window-bar i {
    inline-size: .58rem;
    block-size: .58rem;
    border-radius: 50%;
    background: #c9d5e6
}

.mail-shell {
    display: grid;
    gap: .75rem;
    padding: 1.1rem;
    background: var(--solid);
    border-radius: 19px;
    border: 1px solid var(--line)
}

.mail-line {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: .5rem;
    color: var(--muted);
    font-size: .78rem
}

.mail-line b {
    color: var(--ink)
}

.address {
    padding: .45rem .65rem;
    border-radius: 8px;
    background: #f0f5fc
}

.check-panel {
    display: grid;
    gap: .7rem;
    margin-block-start: .5rem;
    padding: 1rem;
    border-radius: 15px;
    background: linear-gradient(145deg, #edf6ff, #f8fbff);
    border: 1px solid rgba(10, 98, 232, .13)
}

.check {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .8rem
}

.box {
    display: grid;
    place-items: center;
    inline-size: 1.15rem;
    block-size: 1.15rem;
    border-radius: 4px;
    background: var(--blue);
    color: #fff;
    font-size: .72rem
}

.send {
    justify-self: end;
    padding: .5rem 1rem;
    border-radius: 999px;
    background: var(--blue);
    color: #fff;
    font-size: .78rem;
    font-weight: 700
}

.section {
    padding-block: var(--space)
}

.section-head {
    display: grid;
    gap: 1rem;
    margin-block-end: clamp(2rem, 5vw, 4rem)
}

.section-head.center {
    text-align: center;
    justify-items: center
}

.section-head.center h2,
.section-head.center .lead {
    max-inline-size: 48rem
}

.bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem
}

.card {
    padding: clamp(1.4rem, 3vw, 2.2rem);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 14px 45px rgba(20, 65, 130, .08);
    backdrop-filter: blur(14px)
}

.card p {
    color: var(--muted);
    margin-block-start: .75rem
}

.span-4 {
    grid-column: span 4
}

.span-5 {
    grid-column: span 5
}

.span-6 {
    grid-column: span 6
}

.span-7 {
    grid-column: span 7
}

.span-8 {
    grid-column: span 8
}

.icon {
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    margin-block-end: 1.4rem;
    border-radius: 14px;
    background: linear-gradient(145deg, #e2f1ff, #fff);
    color: var(--blue);
    font-weight: 900
}

.problem-card {
    min-block-size: 17rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

.problem-card strong {
    font-size: clamp(2rem, 5vw, 4.5rem);
    line-height: 1;
    color: rgba(10, 98, 232, .18)
}

.solution-flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    counter-reset: step
}

.step {
    position: relative;
    padding: 2rem;
    counter-increment: step
}

.step::before {
    content: "0" counter(step);
    display: block;
    margin-block-end: 2rem;
    color: var(--blue);
    font-weight: 850;
    font-size: .85rem;
    letter-spacing: .12em
}

.feature-highlight {
    background: linear-gradient(145deg, rgba(8, 81, 195, .96), rgba(10, 98, 232, .88));
    color: #fff
}

.feature-highlight p {
    color: rgba(255, 255, 255, .8)
}

.compat {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-block-start: 1.2rem
}

.compat span {
    padding: .38rem .65rem;
    border-radius: 999px;
    background: rgba(10, 98, 232, .08);
    font-size: .78rem;
    color: var(--blue-2)
}

.feature-highlight .compat span {
    background: rgba(255, 255, 255, .13);
    color: #fff
}

.benefits-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 1rem
}

.statement {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-block-size: 26rem;
    background: linear-gradient(155deg, #071b3a, #0b58bc);
    color: #fff
}

.statement p {
    color: rgba(255, 255, 255, .72)
}

.statement em {
    font-size: clamp(2rem, 4vw, 3.7rem);
    font-style: normal;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.04em
}

.list-card ul {
    display: grid;
    gap: 1rem;
    padding: 0;
    margin: 1.4rem 0 0;
    list-style: none
}

.list-card li {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: .7rem;
    color: var(--muted)
}

.list-card li::before {
    content: "✓";
    color: var(--blue);
    font-weight: 900
}

.case-flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .7rem
}

.case-flow div {
    padding: 1.2rem;
    border-inline-start: 2px solid var(--blue)
}

.case-flow small {
    display: block;
    color: var(--blue);
    font-weight: 800
}

.label {
    display: inline-block;
    margin-block-end: 1rem;
    padding: .35rem .65rem;
    border-radius: 999px;
    background: #e8f2ff;
    color: var(--blue-2);
    font-size: .75rem;
    font-weight: 800
}

.quote-placeholder {
    font-size: clamp(1.3rem, 2.7vw, 2rem);
    line-height: 1.45;
    color: var(--ink) !important
}

.pricing-card {
    max-inline-size: 48rem;
    margin-inline: auto;
    text-align: center;
    padding: clamp(2rem, 6vw, 4.5rem);
    background: linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(232, 244, 255, .78))
}

.price {
    margin-block: 1rem;
    font-size: clamp(2.3rem, 6vw, 4.8rem);
    font-weight: 850;
    letter-spacing: -.05em
}

.fine {
    font-size: .82rem;
    color: var(--muted)
}

.faq {
    max-inline-size: 52rem;
    margin-inline: auto;
    display: grid;
    gap: .8rem
}

.faq details {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    padding: 1.1rem 1.3rem
}

.faq summary {
    cursor: pointer;
    font-weight: 750
}

.faq details p {
    padding-block-start: .8rem;
    color: var(--muted)
}

.cta-panel {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: clamp(3rem, 8vw, 6rem);
    border-radius: 32px;
    background: linear-gradient(145deg, #071c3f, #075bcc);
    color: #fff;
    box-shadow: var(--shadow)
}

.cta-panel::after {
    content: "";
    position: absolute;
    inline-size: 24rem;
    block-size: 24rem;
    inset-inline-end: -8rem;
    inset-block-start: -12rem;
    border-radius: 50%;
    background: rgba(79, 195, 255, .25);
    filter: blur(5px)
}

.cta-panel>* {
    position: relative;
    z-index: 1;
    margin-inline: auto
}

.cta-panel h2 {
    max-inline-size: 18ch
}

.cta-panel p {
    max-inline-size: 42rem;
    margin-block: 1.2rem 2rem;
    color: rgba(255, 255, 255, .75)
}

.cta-panel .button {
    background: #fff;
    color: var(--blue-2)
}

.site-footer {
    padding-block: 2.5rem
}

.footer-grid {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    border-block-start: 1px solid var(--line);
    padding-block-start: 2rem;
    color: var(--muted);
    font-size: .84rem
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem
}

.footer-links a {
    text-decoration: none
}

@media(max-width:820px) {
    .nav-links>a:not(.button) {
        display: none
    }

    .hero-grid,
    .benefits-grid {
        grid-template-columns: 1fr
    }

    .visual {
        min-block-size: 26rem
    }

    .span-4,
    .span-5,
    .span-6,
    .span-7,
    .span-8 {
        grid-column: span 12
    }

    .solution-flow,
    .case-flow {
        grid-template-columns: 1fr 1fr
    }

    .statement {
        min-block-size: 20rem
    }
}

@media(max-width:560px) {
    .brand {
        font-size: .88rem
    }

    .nav .button {
        min-block-size: 2.7rem;
        padding-inline: .9rem;
        font-size: .78rem
    }

    .solution-flow,
    .case-flow {
        grid-template-columns: 1fr
    }

    .actions {
        display: grid
    }

    .button {
        inline-size: 100%
    }

    .footer-grid {
        flex-direction: column
    }

    .outlook-card {
        transform: none
    }

    .hero {
        padding-block-start: 3.5rem
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    *::before,
    *::after {
        transition: none !important
    }
}

@media(prefers-color-scheme:dark) {
    :root {
        --ink: #edf5ff;
        --muted: #a9bad1;
        --bg: #07111f;
        --surface: rgba(14, 31, 53, .76);
        --solid: #10223a;
        --line: rgba(211, 231, 255, .14);
        --shadow: 0 24px 70px rgba(0, 0, 0, .35)
    }

    body {
        background: radial-gradient(circle at 85% 3%, rgba(10, 98, 232, .2), transparent 28rem), var(--bg)
    }

    .nav {
        background: rgba(12, 27, 47, .76);
        border-color: rgba(255, 255, 255, .1)
    }

    .button.secondary {
        background: rgba(15, 35, 59, .8);
        color: #aed8ff
    }

    .fact-row span {
        background: rgba(13, 31, 53, .72)
    }

    .address {
        background: #182c48
    }

    .check-panel {
        background: linear-gradient(145deg, #122c4b, #102139)
    }

    .icon {
        background: #173250;
        color: #74c9ff
    }

    .compat span,
    .label {
        background: #163251;
        color: #9bd5ff
    }

    .pricing-card {
        background: linear-gradient(145deg, rgba(16, 36, 62, .95), rgba(11, 50, 84, .8))
    }
}

@media print {
    * {
        box-shadow: none !important;
        filter: none !important
    }

    .site-header,
    .actions,
    .site-footer {
        display: none !important
    }

    body {
        background: #fff;
        color: #111
    }

    .section,
    .hero {
        padding-block: 1.4rem
    }

    .card,
    .cta-panel {
        break-inside: avoid;
        background: #fff !important;
        color: #111 !important;
        border: 1px solid #bbb
    }

    .card p,
    .cta-panel p,
    .lead {
        color: #333 !important
    }
}/* End custom CSS */