
.contact-preview-page { --contact-font: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif; }
.contact-preview-page::before { background-image: linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),url("https://studio-neutrino.com/wp-content/uploads/2020/02/uchuu_3.jpg"); }
.contact-preview-page #page { min-height:100vh; display:flex; flex-direction:column; }
.contact-preview-main { width: min(1152px,calc(100% - 48px)); margin:125px auto 64px; color:#d9d9d9; font-family:var(--contact-font); font-size:14px; line-height:1.6; }
.contact-preview-main h1 { font-family:"Open Sans",Helvetica,Arial,sans-serif!important; font-size:30px!important; font-weight:500!important; line-height:1.3; letter-spacing:.025em; color:#f2f2f2; text-align:center!important; margin:0 0 16px; }
.contact-preview-intro p { font-family:var(--contact-font)!important; font-size:14px!important; font-weight:400!important; line-height:1.75!important; text-align:center!important; color:#d9d9d9!important; margin:0 0 8px; }
.contact-preview-intro a { color:inherit!important; text-decoration:underline; }
.contact-preview-intro { margin-bottom:36px; }
.contact-preview-main .contact-form-wrapper { width:66.6667%; padding:0 15px; margin:0 auto; box-sizing:border-box; }
.contact-preview-main .card.large-padding { padding:48px; border-radius:12px; backdrop-filter:blur(5px); background:linear-gradient(rgba(18,22,30,.26),rgba(16,19,26,.2))!important; border:1px solid rgba(255,255,255,.08)!important; box-shadow:none!important; }
.contact-preview-main .contact-form-wrapper :is(label,p) { color:rgba(236,234,245,.94)!important; text-align:left; font-family:var(--contact-font)!important; font-size:14px; line-height:1.6; font-weight:400; }
.contact-preview-main .contact-form-wrapper label { font-weight:500; letter-spacing:.02em; }
.contact-preview-main .contact-form-wrapper :is(input:not([type=submit]),select,textarea) { font-family:var(--contact-font)!important; border:1px solid rgba(255,255,255,.14)!important; background-color:rgba(10,14,24,.58)!important; color:#f2f2f2!important; width:100%; box-sizing:border-box; margin-top:7.333px; font-size:16px; }
.contact-preview-main .contact-form-wrapper input:not([type=submit]) { height:40px; padding:0 12px; }
.contact-preview-main .contact-form-wrapper textarea { height:180px; padding:8px 12px; }
.contact-preview-main .contact-form-wrapper select option { background:#12161e; color:#f2f2f2; }
.contact-preview-main .contact-form-wrapper input.wpcf7-submit { display:block; margin-left:auto; background:none!important; color:#16d9e5!important; -webkit-text-fill-color:#16d9e5!important; border:2px solid #16d9e5!important; border-radius:5px; box-shadow:none; font-family:var(--contact-font)!important; font-size:13.6px; font-weight:600; letter-spacing:1px; line-height:25.6px; padding:10.4px 32px; min-width:160px; width:auto; height:auto; text-transform:uppercase; transition:opacity .3s; }
.contact-preview-main .contact-form-wrapper input.wpcf7-submit:hover { opacity:.7; }
.contact-preview-page .static-page-footer { margin-top:auto; }
@media(max-width:767px) { .contact-preview-main { width:calc(100% - 24px); margin-top:110px; } .contact-preview-main .contact-form-wrapper { width:100%; padding:0; } .contact-preview-main .card.large-padding { padding:24px 18px; } }

/* Light Character-style surface and a framed, opaque contact panel. */
.contact-preview-page { background:#f5f7f7; color:#55565c; font-family:"Yu Gothic UI","Noto Sans JP",Meiryo,sans-serif; }
.contact-preview-page::before { background-color:#f5f7f7; background-image:linear-gradient(rgba(120,199,212,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(120,199,212,.07) 1px,transparent 1px),linear-gradient(168deg,transparent 20%,rgba(120,199,212,.10) 20%,rgba(120,199,212,.10) 31%,transparent 31%); background-size:64px 64px,64px 64px,100% 100%; }
.contact-preview-main { width:min(960px,calc(100% - 48px)); background:#fff; border:4px double #aab6ba; padding:32px 38px; box-sizing:border-box; --contact-font:"Yu Gothic UI","Noto Sans JP",Meiryo,sans-serif; }
.contact-preview-main h1 { font-family:"Avenir Next","Century Gothic","Segoe UI Light",sans-serif!important; font-weight:300!important; letter-spacing:.1em; color:#597b86; border-bottom:1px solid #aab6ba; padding-bottom:20px; }
.contact-preview-main .contact-preview-intro p { color:#55565c!important; }
.contact-preview-main .contact-form-wrapper { width:100%; max-width:738px; padding:0; }
.contact-preview-main .card.large-padding { background:#fff!important; border:0!important; border-radius:0; backdrop-filter:none; padding:12px 20px 24px; }
.contact-preview-main .contact-form-wrapper :is(label,p) { color:#55565c!important; font-weight:400; }
.contact-preview-main .contact-form-wrapper :is(input:not([type=submit]),select,textarea) { background:#f8fafb!important; border:1px solid #aab6ba!important; color:#55565c!important; }
.contact-preview-main .contact-form-wrapper select option { background:white; color:#55565c; }
.contact-preview-main .contact-form-wrapper input.wpcf7-submit { border:1px solid #7e9ea7!important; color:#597b86!important; -webkit-text-fill-color:#597b86!important; border-radius:0; font-weight:400; }
@media(max-width:767px) { .contact-preview-main { width:calc(100% - 24px); padding:24px 14px; } .contact-preview-main .card.large-padding { padding:12px 0; } }

/* Readable body type and the Character download button treatment. */
.contact-preview-main { --contact-font:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif; background:#f0f5f6; }
.contact-preview-main .contact-preview-intro p { line-height:1.7!important; letter-spacing:.028em; }
.contact-preview-main .card.large-padding { background:#f0f5f6!important; }
.contact-preview-main .contact-form-wrapper :is(label,p) { line-height:1.65; letter-spacing:.028em; }
.contact-preview-main .contact-form-wrapper input.wpcf7-submit { background:#78b9c5!important; border-color:#78b9c5!important; color:white!important; -webkit-text-fill-color:white!important; font-size:18px; font-weight:400; letter-spacing:.075em; transition:background-color .2s ease,border-color .2s ease; }
.contact-preview-main .contact-form-wrapper input.wpcf7-submit:is(:hover,:focus-visible) { background:color-mix(in srgb,#78b9c5 84%,#20202a)!important; border-color:color-mix(in srgb,#78b9c5 84%,#20202a)!important; opacity:1; }

/* Intro outside the frame; frame only surrounds the form. */
.contact-preview-main { width:min(1152px,calc(100% - 48px)); background:transparent; border:0; padding:0; }
.contact-preview-main .contact-preview-intro p { margin:0!important; padding:0; }
.contact-preview-main .contact-preview-intro { margin-bottom:36px; }
.contact-preview-main .contact-form-wrapper { width:66.6667%; max-width:none; padding:0 15px; }
.contact-preview-main .card.large-padding { border:4px double #aab6ba!important; padding:40px 44px; }
@media(max-width:767px) { .contact-preview-main { width:calc(100% - 24px); } .contact-preview-main .contact-form-wrapper { width:100%; padding:0; } .contact-preview-main .card.large-padding { padding:24px 18px; } }

/* Static elements from the Character background: aligned dots/grid, two bands, soft light. */
.contact-preview-page::before {
 background-color:#f5f7f7;
 background-image:
  radial-gradient(circle,rgba(120,199,212,.22) 1px,transparent 1.5px),
  linear-gradient(rgba(120,199,212,.07) 1px,transparent 1px),
  linear-gradient(90deg,rgba(120,199,212,.07) 1px,transparent 1px),
  linear-gradient(169deg,transparent 16%,rgba(120,199,212,.14) 16% 28%,transparent 28% 61%,rgba(120,199,212,.10) 61% 73%,transparent 73%),
  radial-gradient(ellipse at 8% 15%,rgba(164,223,233,.3),transparent 36%),
  radial-gradient(ellipse at 94% 80%,rgba(164,223,233,.22),transparent 34%);
 background-size:64px 64px,64px 64px,64px 64px,100% 100%,100% 100%,100% 100%;
 background-position:0 0;
}
