.ct { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: clamp(32px, 4.4vw, 96px);
  padding: calc(var(--head) + clamp(40px, 6.4vh, 92px)) var(--gut) clamp(90px, 8vw, 150px); align-items: start; background: var(--ground); }
.ct__words { grid-column: 1; grid-row: 1; }
.page-contact .ct-lead { font-size: clamp(56px, 6.4vw, 124px); }
.ct__promise { margin-top: clamp(20px, 1.8vw, 30px); max-width: 26em; color: var(--ink-2); }
.page-contact .ct__mail { margin-top: 14px; font-size: clamp(16px, 1.02vw, 19px); color: var(--ink-3); }
.ct__mail a { color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(14, 21, 30, .35); transition: border-color .2s var(--ease); }
@media (hover: hover) { .ct__mail a:hover { border-bottom-color: var(--ink); } }
.ct__next { grid-column: 1; grid-row: 2; align-self: end; margin-top: clamp(48px, 4.4vw, 84px); padding-top: 18px; border-top: 1px solid var(--rule); max-width: 30em; }
.ct__next .body { margin-top: 10px; }

.ct__sheet { grid-column: 2; grid-row: 1 / span 2; position: relative; background: var(--sheet-w); border: 1px solid #cfd7e0;
  box-shadow: 0 1px 0 rgba(6, 9, 13, .04), 0 40px 80px -50px rgba(14, 26, 44, .45); padding: clamp(28px, 2.6vw, 50px);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease); }

.fm fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.fm__legend { display: flex; gap: 12px; align-items: baseline; font-size: clamp(20px, 1.4vw, 26px); letter-spacing: -.016em; line-height: 1.2; color: var(--ink);
  margin: 0 0 14px; padding: 0; font-stretch: var(--wide); font-weight: 400; }
.fm__legend .num { font-size: 12px; flex: none; }
.fm__about, .fm__you { margin-top: clamp(30px, 2.6vw, 44px); }

.kinds-v { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kd { position: relative; display: block; cursor: pointer; }
.kd input { position: absolute; opacity: 0; pointer-events: none; }
.kd span { display: flex; gap: 12px; align-items: flex-start; min-height: 82px; padding: 16px 16px 16px 14px; border: 1px solid rgba(30, 48, 70, .26); background: #fff;
  font-size: 17px; line-height: 1.3; color: var(--ink); transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease); }
.kd span > i { position: relative; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 1.5px solid #6b7684; background: #fff;
  transition: border-color .18s var(--ease); }
.kd span > i::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform .22s var(--ease); }
@media (hover: hover) { .kd:hover span { border-color: var(--ink-3); } .kd:hover span > i { border-color: var(--ink-3); } }
.kd input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.kd input:checked + span > i { border-color: var(--ink); }
.kd input:checked + span > i::after { transform: scale(1); }
.kd input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.fm__kinds.is-bad .kd input:focus-visible + span { outline-color: var(--ex); outline-style: dashed; }
.kd:active span { background: #f9fafb; }

.fd { position: relative; display: block; }
.fd > span { display: block; font-size: 14.5px; color: var(--ink-2); margin-bottom: 7px; transition: color .18s var(--ease); }
.fm textarea, .fm input[type=text], .fm input[type=email], .fm input[type=tel] { display: block; width: 100%; font: inherit; font-size: 17px; color: var(--ink); background: #fff;
  border: 1px solid rgba(30, 48, 70, .3); border-radius: 0; padding: 12px 14px; transition: border-color .18s var(--ease); }
.fm textarea { min-height: 120px; resize: vertical; line-height: 1.45; }
.fm textarea::placeholder { color: #626b74; opacity: 1; }
@media (hover: hover) { .fm textarea:hover, .fm input:hover { border-color: rgba(30, 48, 70, .5); } }
.fm textarea:focus, .fm input:focus { outline: none; border-color: var(--ink); }
.fd__edge { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .26s var(--ease), background-color .18s var(--ease); pointer-events: none; }
.fd:focus-within .fd__edge { transform: scaleX(1); }
.fd:focus-within > span { color: var(--ink); }
.fm__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }

.fm__err { display: grid; grid-template-rows: 0fr; margin: 0; font-size: 14.5px; color: var(--ex); transition: grid-template-rows .24s var(--ease), margin-top .24s var(--ease); }
.fm__err > span { min-height: 0; overflow: hidden; display: block; text-wrap: pretty; opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .26s var(--ease); }
.fm__err > span::before { content: ''; display: inline-block; width: 7px; height: 7px; background: var(--ex); margin-right: 9px; vertical-align: 1px; }
.is-bad .fm__err { grid-template-rows: 1fr; margin-top: 10px; }
.fm__err > span:empty::before { display: none; }
.is-bad .fm__err > span { opacity: 1; transform: none; }
.fm__kinds.is-bad .kd input:not(:checked) + span { border-color: rgba(168, 65, 42, .55); }
.fd.is-bad input, .fd.is-bad textarea { border-color: var(--ex); }
.fd.is-bad .fd__edge { background: var(--ex); transform: scaleX(1); }

.fm__send { margin-top: clamp(28px, 2.4vw, 40px); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
.page-contact .fm__send .btn { background: var(--blue); color: #fff; }
.page-contact .fm__send .btn > i { border-left-color: rgba(255, 255, 255, .26); }
@media (hover: hover) { .page-contact .fm__send .btn:hover { background: #1145ab; } }
.page-contact .fm__send .btn:active { background: #0f3d99; }
.page-contact .fm__send .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.fm__send .small { flex: 1 1 280px; max-width: 34em; }
.fm__check { flex-basis: 100%; min-height: 0; margin-bottom: -16px; }
.fm__check.is-on { margin-bottom: 0; }
.fm__check iframe { max-width: 100%; }
.fm.is-sending .fm__send .btn { cursor: progress; }
.fm__fail { flex-basis: 100%; display: grid; grid-template-rows: 0fr; margin: -16px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ex); transition: grid-template-rows .24s var(--ease), margin-top .24s var(--ease); }
.fm__fail > span { min-height: 0; overflow: hidden; display: block; text-wrap: pretty; opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .26s var(--ease); }
.fm__fail > span::before { content: ''; display: inline-block; width: 7px; height: 7px; background: var(--ex); margin-right: 9px; vertical-align: 1px; }
.fm__fail a { color: inherit; }
.fm__send.is-failed .fm__fail { grid-template-rows: 1fr; margin-top: 0; }
.fm__send.is-failed .fm__fail > span { opacity: 1; transform: none; }
.fm__wait { flex-basis: 100%; display: grid; grid-template-rows: 0fr; margin: -16px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2, #4a5560); transition: grid-template-rows .24s var(--ease), margin-top .24s var(--ease); }
.fm__wait > span { min-height: 0; overflow: hidden; display: block; opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .26s var(--ease); }
.fm__send.is-slow .fm__wait { grid-template-rows: 1fr; margin-top: 0; }
.fm__send.is-slow .fm__wait > span { opacity: 1; transform: none; }
.fm__left { display: grid; grid-template-rows: 0fr; margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2, #4a5560); transition: grid-template-rows .24s var(--ease), margin-top .24s var(--ease); }
.fm__left > span { min-height: 0; overflow: hidden; display: block; text-wrap: pretty; opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .26s var(--ease); }
.fm__left a { color: inherit; }
.fm__about.is-near .fm__left { grid-template-rows: 1fr; margin-top: 10px; }
.fm__about.is-near .fm__left > span { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fm__fail, .fm__fail > span, .fm__wait, .fm__wait > span, .fm__left, .fm__left > span { transition: none; } }

.sent-v { padding: clamp(10px, 1vw, 20px) 0 clamp(20px, 2vw, 40px); }
.page-contact .sent-v:focus, .page-contact .sent-v:focus-visible { outline: none; }
.sent-v[hidden] { display: none; }
.sent-v__tick { display: block; width: 44px; height: 44px; }
.sent-v__tick circle { fill: var(--blue); stroke: var(--blue); stroke-width: 1; }
.sent-v__tick path { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sent-v__h { margin-top: 22px; max-width: 14em; }
.sent-v__u { margin-top: 18px; }
html.js .sent-v__tick circle { transform-origin: 22px 22px; transform: scale(.4); opacity: 0; transition: transform .26s var(--ease), opacity .16s ease; }
html.js .sent-v__tick path { stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset .28s var(--ease) .18s; }
html.js .sent-v.is-on .sent-v__tick circle { transform: none; opacity: 1; }
html.js .sent-v.is-on .sent-v__tick path { stroke-dashoffset: 0; }
html.js .sent-v__u { opacity: .001; transform: translateY(6px); transition: opacity .24s ease, transform .3s var(--ease); }
html.js .sent-v.is-said .sent-v__u { opacity: 1; transform: none; }
.ct__sheet.is-settling { transform: translateY(2px); box-shadow: 0 1px 0 rgba(6, 9, 13, .04), 0 30px 60px -44px rgba(14, 26, 44, .4); }
.fm { transition: opacity .24s ease; }
.ct__sheet.is-leaving .fm { opacity: 0; }

html.js .ct [data-in]:not(.is-in) { opacity: .001; transform: translateY(10px); animation: ct-safe 0s 2.6s forwards; }
html.js .ct [data-in] { transition: opacity .24s ease, transform .3s var(--ease); }
html.js .ct .ct__sheet[data-in] { transition: opacity .3s ease, transform .36s var(--ease), box-shadow .3s var(--ease); }
@keyframes ct-safe { to { opacity: 1; transform: none; } }

.ct-end .end-dark__words { padding-top: clamp(110px, 10vw, 180px); padding-bottom: clamp(70px, 6vw, 110px); }
.ct-end .end-dark__mark { position: absolute; z-index: 0; right: -3.5vw; bottom: -8vw; width: min(50vw, 980px); max-width: none; height: auto; color: #eef1f3; opacity: .105; pointer-events: none; }
html.js .ct-end .end-dark__mark { -webkit-mask: linear-gradient(to top, #000 45%, transparent 55%) 0 0 / 100% 300% no-repeat; mask: linear-gradient(to top, #000 45%, transparent 55%) 0 0 / 100% 300% no-repeat;
  transition: -webkit-mask-position 1.8s cubic-bezier(.35, 0, .25, 1) .9s, mask-position 1.8s cubic-bezier(.35, 0, .25, 1) .9s; }
html.js .ct-end.is-lit .end-dark__mark { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
.direct-v { margin-top: clamp(30px, 2.6vw, 48px); border-top: 1px solid rgba(238, 241, 243, .3); max-width: 1180px; }
.direct-v li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px; padding: 16px 0 17px; border-bottom: 1px solid var(--night-rule);
  font-size: clamp(17px, 1.15vw, 21px); align-items: baseline; }
.direct-v li span { color: #fff; }
.direct-v a { color: var(--night-ink-2); text-decoration: none; justify-self: start; border-bottom: 1px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease); }
@media (hover: hover) { .direct-v a:hover { color: #fff; border-bottom-color: rgba(238, 241, 243, .5); } }

@media (max-width: 1180px) {
  .ct { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .ct__words, .ct__sheet, .ct__next { grid-column: 1; grid-row: auto; }
  .ct__sheet { margin-top: 36px; }
  .ct__next { align-self: start; }
}
@media (max-width: 760px) {
  .ct { padding: calc(var(--head) + 30px) var(--gut) 72px; }
  .page-contact .ct-lead { font-size: clamp(48px, 13.4vw, 62px); }
  .ct__sheet { margin: 32px calc(-1 * var(--gut)) 0; padding: 26px var(--gut) 30px; border-left: 0; border-right: 0; }
  .kinds-v, .fm__fields { grid-template-columns: minmax(0, 1fr); }
  .kd span { min-height: 0; }
  .direct-v li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ct-end .end-dark__mark { right: -26vw; bottom: -14vw; width: 104vw; }
}
@media (prefers-reduced-motion: reduce) {
  .ct [data-in] { opacity: 1 !important; transform: none !important; }
}

.page-contact :is(a, button, label, input, textarea) { -webkit-tap-highlight-color: transparent; }
.page-contact .direct-v a:active, .page-contact .ct__mail a:active { opacity: .7; }

.ct-end { min-height: 100svh; display: flex; flex-direction: column; }
.ct-end .site-foot--inside { margin-top: auto; }