/* =====================================================================
   misosil.com /contact/「PULSE」Contact ページ
   ../style.css（トークン・ヘッダー・ピル・フッター・リンクの下線・フォーカスリング）の上に重ねる。
   - フォームの規則は、本番のビルド（inquiryFormHtml）が出すマークアップそのものに当てる。
     共通のフォームの CSS（inquiry-form.css）と一緒に読まれても負けないよう、すべて .ct-form を頭に付けて
     詳細度を上げている（読み込み順に依存しない）。
   - 原則: 白地・濃紺の黒・補助はグレー。影・グラデーション・角丸カードなし（角丸は送信のピルと点だけ）。左端一列。
     エラーの赤 #b00020 は現行と同じ（機能上の例外）。
   ===================================================================== */

.ct-page{
  --ct-err:#b00020;
  --ct-fs-label:clamp(.9375rem, .9rem + .12vw, 1.0625rem);   /* 390: 15.1px / 1440: 16.1px */
  --ct-fs-input:clamp(1rem, .95rem + .2vw, 1.125rem);        /* 16px 以上（iOS の自動ズームを避ける）。1440: 18px */
  --ct-pulse-h:clamp(48px, 4.4vw, 76px);                      /* 線のスロットの高さ（山の上限＝高さ − 基線 7px − 上の余白 10px） */
  --ct-gap:clamp(68px, 5vw, 80px);                            /* 項目の間（ラベル〜自分の下線より広く。前の下線 → ラベル ÷ ラベル → 自分の下線 ≧ 1.3） */
  --ct-measure:40rem;                                         /* フォームの最大幅（1024px 以上でも1カラム） */
  --ct-ink-hover:#27324a;                                     /* 送信のピルのホバー（ink を少し明るく。白い字 13.4:1） */
  /* フッターをページの下端に置く（完了の表示でページが短くなっても、フッターの下に白地を残さない） */
  min-height:100vh;min-height:var(--vh);display:flex;flex-direction:column;
}
.ct-page main{flex:1 0 auto}

/* ---------- ヘッダー: このページでは隠さない（入力中もヘッダー内の BPM が見える）。スクロールしたら下端に細い罫線 ---------- */
.ct-page .hd::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);opacity:0;transition:opacity .3s}
.ct-page .hd.is-scrolled::after{opacity:1}
.ct-page .hd.is-menu-open::after{opacity:0}
/* モバイルメニューの現在地（Contact）は灰色で区別（大きい字で 4.97:1） */
.ct-page .menu a[aria-current="page"]{color:var(--gray)}

/* ======================= 見出し ======================= */
.ct{padding:calc(var(--hd-h) + clamp(28px, 6vh, 64px)) var(--g) var(--sec-gap)}
html:not(.js) .ct{padding-top:clamp(28px, 6vh, 64px)}           /* no-JS はヘッダーが通常フロー */
/* 完了の表示ではページが短くなる。下の余白を詰め、1440×900 などでフッターまで1画面に収める（フッターは body の縦 flex で下端） */
.ct:has(.inquiry-form__complete:not([hidden])){padding-bottom:clamp(40px, 4vw, 72px)}
.ct-title{display:block;font-weight:inherit;line-height:inherit}
/* 英語の見出し（トップの締めの Contact と同じ書体・字間。大きさはフォームのページに合わせて一段小さく） */
.ct-en{display:block;font:800 clamp(4.25rem, 13vw, 15rem)/.86 var(--f-en);letter-spacing:-.05em;
  margin-left:-.04em;clip-path:inset(-.3em -.2em 0 -.2em)}   /* 下は行の箱ちょうどで切る（立ち上がりのマスク） */
.ct-en-in{display:block}
.js .ct-en-in{animation:ct-rise .9s var(--ease-out) .05s both}
@keyframes ct-rise{from{transform:translateY(105%)}to{transform:none}}

/* 線: 画面の左端から入り、右の余白の手前の点で止まる。基線はスロットの下端から 7px（中心）。
   no-JS / reduced は CSS の線＋1山の SVG（点の手前）。JS 時は contact.js が SVG の path に拍を描く（.has-pulse） */
.ct-pulse{position:relative;display:block;height:var(--ct-pulse-h);margin:clamp(4px, .6vw, 10px) calc(-1 * var(--g)) 0;color:var(--ink);pointer-events:none}
.ct-pulse::before{content:"";position:absolute;left:0;right:var(--g);bottom:6px;height:2px;background:currentColor}
.ct-pulse-static{position:absolute;right:calc(var(--g) + 22px);bottom:7px;width:48px;height:calc(100% - 17px);overflow:visible}
.ct-pulse-static path,.ct-pulse-live path{fill:none;stroke:currentColor;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.ct-pulse-dot{position:absolute;right:calc(var(--g) - var(--ct-dot) / 2);bottom:calc(7px - var(--ct-dot) / 2);--ct-dot:clamp(10px, .8vw, 14px);
  width:var(--ct-dot);height:var(--ct-dot);border-radius:50%;background:currentColor;transition:transform .5s var(--ease-out)}
.ct-pulse-dot.is-beat{transform:scale(1.8);transition:none}
.ct-pulse-dot.is-beat-big{transform:scale(2.5);transition:none}
.ct-pulse-live{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.has-pulse .ct-pulse::before,.has-pulse .ct-pulse-static{visibility:hidden}

.ct-ja{display:block;margin-top:clamp(12px, 1.6vw, 22px);font:500 clamp(1.125rem, 1.75vw, 1.625rem)/1.6 var(--f-base);letter-spacing:.02em}

/* ======================= フォーム ======================= */
.ct-form{margin-top:clamp(48px, 5vw, 72px);max-width:var(--ct-measure)}
/* 共通の inquiry-form.css が持つ基本（hidden とハニーポット）を、ここでも同じに */
.ct-form .inquiry-form [hidden],.ct-form .inquiry-form__complete[hidden]{display:none!important}
.ct-form .inquiry-form__honeypot{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* 1項目 = ラベル（文言＋必須/任意）→ 入力（下線）→ エラー（1行目は項目の間の余白に入り、2行目から下を押し下げる。下の「エラー」）。
   項目の間（--ct-gap）は「ラベル〜自分の下線」より広く（前の下線 → ラベル ÷ ラベル → 自分の下線 ≧ 1.3） */
.ct-form .inquiry-form__field{position:relative;margin:0 0 var(--ct-gap)}
.ct-form .inquiry-form__field label{display:block;font-size:var(--ct-fs-label);font-weight:500;line-height:1.6;letter-spacing:.02em;color:var(--ink);cursor:pointer}
.ct-form .inquiry-form__field label br{display:none}
.ct-form .required,.ct-form .optional{display:inline-block;margin-left:.7em;font-size:max(12px, var(--fs-micro));font-weight:500;line-height:1;letter-spacing:.1em;vertical-align:.12em}
.ct-form .required{color:var(--ink)}
.ct-form .optional{color:var(--gray)}
/* フォーカス中の項目: ラベルの左の余白に小さな点（BPM の点と同じ形）。エラーの項目では赤。レイアウトは動かさない */
.ct-form .inquiry-form__field:has(> label > :is(input, select, textarea):focus)::before{
  content:"";position:absolute;left:calc(-1 * min(16px, var(--g) - 6px));top:calc(var(--ct-fs-label) * .8 - 3px);
  width:6px;height:6px;border-radius:50%;background:var(--ink);pointer-events:none;
}
.ct-form .inquiry-form__field:has(> label > [aria-invalid="true"]:focus)::before{background:var(--ct-err)}

/* 入力欄: 下線だけ（枠・背景・角丸なし）。静止 1px（--dim、白地で 3.63:1）→ ホバー ink → フォーカス ink 2px。
   エラーは赤 1px → フォーカスで赤 2px。線の太さが変わっても高さは変えない（padding で相殺） */
.ct-form .inquiry-form__field input,
.ct-form .inquiry-form__field select,
.ct-form .inquiry-form__field textarea{
  display:block;box-sizing:border-box;width:100%;margin:2px 0 0;padding:7px 0 11px;
  border:0;border-bottom:1px solid var(--dim);border-radius:0;background:transparent;
  font:400 var(--ct-fs-input)/1.6 var(--f-base);letter-spacing:.01em;color:var(--ink);
  -webkit-appearance:none;appearance:none;outline:none;
  transition:border-color .2s,background-color 0s 600000s;   /* 自動入力の色付きの地を出さない（遅延で事実上止める。影は使わない） */
}
.ct-form .inquiry-form__field :is(input, select, textarea):hover{border-bottom-color:var(--ink)}
.ct-form .inquiry-form__field :is(input, select, textarea):focus{border-bottom:2px solid var(--ink);padding-bottom:10px;outline:none}
.ct-form .inquiry-form__field [aria-invalid="true"],
.ct-form .inquiry-form__field [aria-invalid="true"]:hover,
.ct-form .inquiry-form__field [aria-invalid="true"]:focus{border-bottom-color:var(--ct-err);outline:none}
/* 種別: 既定の矢印を線の印（下向きの山形 1.5px）に置き換える */
.ct-form .inquiry-form__field select{
  padding-right:40px;cursor:pointer;text-overflow:ellipsis;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1 1.5l7 7 7-7' fill='none' stroke='%230e1626' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 4px center / 16px 10px;
}
/* 内容: 空でも範囲が分かるよう、上端に 1px の罫線（--line）。5行ぶんから、つまみで縦に伸縮、対応ブラウザでは入力に合わせて伸びる（上限 60vh）。
   field-sizing 非対応（Firefox など）では rows="10" の高さ（約 335px）にならないよう、高さを最小と同じ式に固定（つまみで伸ばせる） */
.ct-form .inquiry-form__field textarea{
  --ct-ta-h:calc(var(--ct-fs-input) * 1.75 * 5 + 22px);
  margin-top:8px;padding-top:10px;border-top:1px solid var(--line);
  min-height:var(--ct-ta-h);max-height:60vh;line-height:1.75;resize:vertical;field-sizing:content;
}
@supports not (field-sizing: content){
  .ct-form .inquiry-form__field textarea{height:var(--ct-ta-h)}
}

/* エラー: 現行と同じ赤。色だけに頼らず、項目の下に文言、下線も同じ赤。空のときは表示しない（:empty）。
   置き方（文字の拡大・テキスト間隔の変更でも重ならないように、流れの中に置く）:
     下線の 10px 下に置き、下の余白を「10px + 1行の高さ」だけ負のマージンで打ち消す。1行なら下の項目は動かず（エラーは項目の間の余白に入る）、
     2行目以降（拡大・狭い幅）だけ下を押し下げる。負のマージンは親の項目の margin（--ct-gap）と相殺されるので、結果は「下線 → 次のラベル = --ct-gap」のまま。
     1行の高さは 1lh（対応ブラウザ）。lh が無いブラウザでは同じ値を font-size × line-height（--ct-err-lh）で書いた宣言が効く。
   共通の CSS は空の行を 1.3em 予約して同じ目的（消えても下が動かない）を果たすが、ここで予約するとラベルの所属が曖昧になるため、この方式にしている。
   詳細度は .ct-form .inquiry-form …（0,3,0）: 共通の CSS の [data-inquiry-form="corporate"] .inquiry-form__field-error{color:#ffd0d6}（0,2,0）と
   .inquiry-form__field-error{line-height:1.3; min-height:1.3em} に、読み込み順に関係なく勝つ */
.ct-form .inquiry-form{--ct-err-lh:calc(var(--fs-small) * 1.6)}
.ct-form .inquiry-form .inquiry-form__field-error{display:block;position:static;min-height:0;margin:10px 0 calc(-10px - var(--ct-err-lh));margin-bottom:calc(-10px - 1lh);
  font-size:var(--fs-small);font-weight:500;line-height:1.6;letter-spacing:.02em;color:var(--ct-err);word-break:keep-all;overflow-wrap:anywhere}
.ct-form .inquiry-form .inquiry-form__field-error:empty{display:none}
/* 内容（textarea）の下は同意の行が近い（項目の間 × .65）。拡大しても1行のエラーが同意の行に重ならないよう、下限を「1行の高さ + 8px」に */
.ct-form .inquiry-form__field:has(> label > textarea){margin-bottom:max(calc(var(--ct-gap) * .65), calc(var(--ct-err-lh) + 8px))}

/* 同意: 正方形のチェック（角丸なし、ink の 1.5px の枠）。ラベル全体が押せる（高さ 44px 以上） */
.ct-form .inquiry-form__privacy{margin-top:0}
.ct-form .inquiry-form__privacy label,
.ct-form[class] [data-inquiry-form="corporate"] .inquiry-form__privacy label{
  position:relative;display:block;padding:10px 0 10px 40px;color:var(--ink);
  font-size:var(--ct-fs-label);font-weight:500;line-height:1.6;letter-spacing:.02em;cursor:pointer;
}
.ct-form .inquiry-form__privacy input[type="checkbox"]{
  position:absolute;left:0;top:calc(10px + .8em - 11px);width:24px;height:24px;margin:0;
  -webkit-appearance:none;appearance:none;border:1.5px solid var(--ink);border-radius:0;background:#fff no-repeat center / 14px 11px;cursor:pointer;
}
.ct-form .inquiry-form__privacy input[type="checkbox"]:checked{
  background-color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11'%3E%3Cpath d='M1.2 5.6l3.9 3.8L12.8 1.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
}
.ct-form .inquiry-form__privacy input[type="checkbox"]:focus{outline:none}
.ct-form .inquiry-form__privacy input[type="checkbox"]:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.ct-form .inquiry-form__privacy input[aria-invalid="true"]{border:2px solid var(--ct-err);outline-color:var(--ct-err)}
.ct-form .inquiry-form__privacy input[aria-invalid="true"]:focus-visible{outline-color:var(--ct-err)}
/* 文中のリンク: 常に細い下線。押せる高さは上下の padding で 44px に（行の高さは変えない） */
.ct-form .inquiry-form__privacy a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em;padding-block:14px}
.ct-form .inquiry-form__privacy a:hover{text-decoration-thickness:2px}
.ct-form .inquiry-form__privacy a:focus-visible{outline-offset:2px}
/* 同意のエラーも項目と同じ置き方（1行は Turnstile の枠の上の余白に入り、2行目から下を押し下げる）。字の左端はチェックの右の文言にそろえる */
.ct-form .inquiry-form__privacy{position:relative}
.ct-form .inquiry-form .inquiry-form__privacy > .inquiry-form__field-error{margin:0 0 calc(-1 * var(--ct-err-lh));margin-bottom:-1lh;padding-left:40px}

/* Turnstile: ウィジェットが入るまでは実寸（300×65）の単色の枠で場所だけ示す（:empty のときだけ。ウィジェットが入ると枠は消え、高さだけ残る）。
   上の余白は同意のエラー1行の置き場を兼ねるので、文字の大きさで伸びる下限（1行の高さ + 1.25rem）を持つ */
.ct-form .cf-turnstile{margin-top:max(clamp(40px, 3.6vw, 52px), calc(var(--fs-small) * 1.6 + 1.25rem));min-height:65px}
.ct-form .cf-turnstile:empty{width:300px;max-width:100%;height:65px;background:var(--paper-2);border:1px solid var(--line)}
/* JS 無効のときはウィジェットが入らないので、枠ごと出さない（JS 有効時の寸法の確保は上のまま） */
html:not(.js) .ct-form .cf-turnstile:empty{display:none}

/* フォーム全体のエラー（送信ボタンの上）。赤の文字＋左の 2px の赤い縦線。空のときは高さを取らない */
.ct-form .inquiry-form__error{display:block;min-height:0;margin:0;font-size:var(--ct-fs-label);font-weight:500;line-height:1.6;letter-spacing:.02em;color:var(--ct-err);word-break:keep-all;overflow-wrap:anywhere}
.ct-form .inquiry-form__error:not(:empty){margin-top:clamp(18px, 2.6vh, 28px);padding:2px 0 2px 14px;border-left:2px solid var(--ct-err)}
.ct-form .inquiry-form__error:focus{outline:none}
.ct-form .inquiry-form__error:focus-visible{outline:2px solid var(--ct-err);outline-offset:4px}

/* JS 無効の案内（共通フォームの noscript。文言は共有部品のまま）: 送信ボタンの直前に、全体のエラーと同じ様式（左 2px の縦線）で、色は ink（赤は使わない）。
   共通の CSS の .inquiry-form__noscript{font-weight:bold} と corporate 向けの白文字に、読み込み順に関係なく勝つ（0,3,0） */
.ct-form .inquiry-form .inquiry-form__noscript{margin:clamp(18px, 2.6vh, 28px) 0 0;padding:2px 0 2px 14px;border-left:2px solid var(--ink);
  color:var(--ink);font-size:var(--ct-fs-label);font-weight:500;line-height:1.6;letter-spacing:.02em;max-width:32em;word-break:keep-all;overflow-wrap:anywhere}

/* 送信: トップの Contact ピルと同じ黒いピル。送信中は無効化し、灰色＋ボタンの字を透明にして「送信中」を重ね、左に拍の点（幅は変えない）。
   マークアップ（input の value「送信」）は変えない。読み上げは contact.js の live region（form の外）が「送信中」を伝える */
.ct-form p:has(> .inquiry-form__submit){position:relative;width:fit-content;margin-top:clamp(28px, 4vh, 44px)}
.ct-form .inquiry-form__submit{
  -webkit-appearance:none;appearance:none;display:inline-block;height:56px;min-width:11em;margin:0;padding:0 2.6em;
  border:0;border-radius:999px;background:var(--ink);color:#fff;opacity:1;
  font:500 var(--ct-fs-input)/1 var(--f-base);letter-spacing:.12em;text-indent:.12em;cursor:pointer;
  transition:background-color .25s;
}
.ct-form .inquiry-form__submit:hover{background:var(--ct-ink-hover)}
.ct-form .inquiry-form__submit:focus{outline:none}
.ct-form .inquiry-form__submit:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.ct-form .inquiry-form__submit:disabled{background:var(--gray);color:transparent;opacity:1;cursor:progress}
.ct-form p:has(> .inquiry-form__submit:disabled)::before{
  content:"送信中";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;
  color:#fff;font:500 var(--ct-fs-input)/1 var(--f-base);letter-spacing:.12em;text-indent:.12em;
}
.ct-form p:has(> .inquiry-form__submit:disabled)::after{
  content:"";position:absolute;left:1.6em;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#fff;pointer-events:none;
  animation:ct-beat .83s var(--ease-out) infinite;
}
@keyframes ct-beat{0%{transform:scale(1.9)}60%,100%{transform:scale(1)}}

/* 完了: フォームと同じ場所に。左に 2px の ink の縦線（全体のエラーと同じ様式。枠は付けない）。
   キーボードで来たとき（:focus-visible）は縦線を 4px に太らせてフォーカスを示す（幅は padding で相殺） */
.ct-form .inquiry-form__complete{max-width:var(--ct-measure);padding:2px 0 4px 20px;border-left:2px solid var(--ink)}
/* 見出しはビルドの規則（headingLevelAfter）で h2（Contact ページ）。dist のトップの h3 と同じ見た目にする */
.ct-form .inquiry-form__complete :is(h2, h3){margin:0;font:500 clamp(1.375rem, 2.6vw, 2.5rem)/1.5 var(--f-base);letter-spacing:.01em;word-break:keep-all;overflow-wrap:anywhere}
.ct-form .inquiry-form__complete p{margin-top:clamp(14px, 2vh, 24px);font-size:var(--fs-body);line-height:1.9;word-break:keep-all;overflow-wrap:anywhere}
.ct-form .inquiry-form__complete:focus{outline:none}
.ct-form .inquiry-form__complete:focus-visible{border-left-width:4px;padding-left:18px}

/* ======================= 768px 以下 ======================= */
@media not all and (min-width:769px){
  .ct-page{--ct-pulse-h:56px;--ct-gap:68px}
  .ct-en{font-size:clamp(4rem, 21vw, 9rem)}
  .ct-form p:has(> .inquiry-form__submit){width:auto}
  .ct-form .inquiry-form__submit{width:100%}
}

/* ======================= reduced motion ======================= */
@media (prefers-reduced-motion: reduce){
  .js .ct-en-in{animation:none}
  .ct-pulse-dot{transition:none}
  .ct-form p:has(> .inquiry-form__submit:disabled)::after{animation:none}
  .ct-page .hd::after{transition:none}
}