/* GAMADAS 下層：問い合わせ・資料請求・文章ページ（sub.css の後に読む）
   フォームの見た目は HubSpot の旧来の埋め込み（v2/v3・raw HTML）が出すクラス名に当てている。
   本番の今のフォームは新しいエディタ（v4・hs-form-frame）で iframe の中に描画されるため、このCSSは届かない。
   その場合は同じ値を HubSpot のフォームの「スタイル」設定に入れる（値は各行のコメントを参照）。 */

/* ページの頭（フォームのページは短く） */
.page-hero.compact { padding-bottom: 64px; }
.page-hero .note-line { margin-top: 20px; font-size: var(--fs-s); color: var(--ink-2); }
.page-hero .note-line a { font-weight: 600; text-underline-offset: 4px; }

/* ===== 問い合わせ：左に案内・右にフォーム ===== */
.form-layout { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 56px; align-items: start; }
.before h2 { font-size: var(--fs-l); font-weight: 600; }
.before-list { margin-top: 24px; display: grid; gap: 28px; }
.before-list dt { font-weight: 600; }
.before-list dd { margin-top: 6px; font-size: var(--fs-s); color: var(--ink-2); }
.before-list dd .textlink { margin-top: 8px; }
.before-logos { margin-top: 40px; }
.before-logos p { font-size: var(--fs-xs); color: var(--muted); }
.before-logos ul { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.before-logos li { display: flex; align-items: center; justify-content: center; height: 56px; padding: 0 12px; background: var(--white); border-radius: var(--radius); }
.before-logos img { max-height: 24px; max-width: 100%; width: auto; height: auto; object-fit: contain; }

/* フォームの面 */
.form-panel { padding: 48px; background: var(--white); border-radius: var(--radius); }
.form-panel-head h2 { font-size: var(--fs-l); font-weight: 600; }
.form-panel-head p { margin-top: 6px; font-size: var(--fs-s); color: var(--ink-2); }
.form-panel-head + .hs-form { margin-top: 32px; }

/* ===== HubSpot フォーム（.hs-form） ===== */
.hs-form { display: grid; gap: 28px; font-size: var(--fs-b); }
.hs-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; max-width: none !important; }
.hs-form fieldset.form-columns-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 16px; }
.hs-form-field > label { display: flex; align-items: center; gap: 8px; font-size: var(--fs-s); font-weight: 600; line-height: 1.5; }          /* スタイル：ラベル 色#111・15px */
.hs-form-required { display: inline-flex; font-size: 0; }
.hs-form-required::after { content: "必須"; padding: 0 6px; background: var(--paper-2); color: var(--ink-2); font-size: 0.6875rem; font-weight: 600; line-height: 1.7; border-radius: 2px; }
.hs-form-field .hs-field-desc { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--muted); }
.hs-form-field .input { margin-top: 10px; margin-right: 0 !important; }
.hs-form .hs-input:not([type="radio"]):not([type="checkbox"]) {
  width: 100% !important; min-height: 52px; padding: 12px 16px;
  background: var(--paper); color: var(--ink);                            /* スタイル：入力欄の背景 #F4F4F3 */
  border: 1px solid transparent; border-radius: var(--radius);            /* スタイル：枠線なし（または背景と同色）・角丸4px */
  font: inherit; font-size: 1rem; line-height: 1.6;                       /* 16px未満にするとiPhoneで拡大される */
  -webkit-appearance: none; appearance: none; transition: background-color 0.2s, border-color 0.2s;
}
.hs-form .hs-input::placeholder { color: #8a8a8a; }
.hs-form .hs-input:hover:not([type="radio"]):not([type="checkbox"]) { background: var(--paper-2); }
.hs-form .hs-input:focus:not([type="radio"]):not([type="checkbox"]) { outline: none; background: var(--white); border-color: var(--ink); }   /* スタイル：フォーカス時の枠 #111 */
.hs-form textarea.hs-input:not([type="radio"]):not([type="checkbox"]) { min-height: 180px; resize: vertical; }
.hs-form select.hs-input { padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%23111' stroke-width='1.6'/></svg>");
  background-repeat: no-repeat; background-position: right 18px center; }

/* 選択肢（ラジオ・チェック） */
.hs-form .inputs-list { margin: 0; padding: 0; list-style: none; }
.hs-form .multi-container { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.hs-form-radio-display, .hs-form-checkbox-display { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px; background: var(--paper); border-radius: var(--radius); font-size: var(--fs-s); line-height: 1.5; cursor: pointer; transition: background-color 0.2s; }
.hs-form-radio-display:hover, .hs-form-checkbox-display:hover { background: var(--paper-2); }
.hs-form-radio-display:has(input:checked), .hs-form-checkbox-display:has(input:checked) { background: var(--paper-2); font-weight: 600; }
.hs-form input[type="radio"], .hs-form input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ink); cursor: pointer; }

/* エラー */
.hs-error-msgs { margin: 8px 0 0; padding: 0; list-style: none; }
.hs-error-msg { display: flex; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: #b42318; }   /* スタイル：エラーの色（赤はここだけ） */
.hs-error-msg::before { content: "!"; display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; margin-top: 0.2em; background: #b42318; color: var(--white); border-radius: 50%; font-size: 0.6875rem; line-height: 1; }
.hs-form .hs-input.error, .hs-form .hs-input.invalid { background: #fbeeec !important; }

/* プライバシーポリシーへの同意 */
.legal-consent-container { padding: 20px 22px; background: var(--paper); border-radius: var(--radius); font-size: var(--fs-s); }
.legal-consent-container .hs-richtext p { color: var(--ink-2); max-width: none; }
.legal-consent-container .hs-richtext a { font-weight: 600; text-underline-offset: 4px; }
.legal-consent-container .inputs-list { margin-top: 12px; }
.legal-consent-container .hs-form-booleancheckbox-display { display: flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 600; cursor: pointer; }

/* 送信（黒はここだけ） */
.hs-form .hs_submit .actions { margin: 0; padding: 0; }
.hs-form .hs-button {
  display: block; width: 100%; min-height: 60px; padding: 0 32px;
  background: var(--black); color: var(--white); border: 0; border-radius: var(--radius);  /* スタイル：ボタン 背景#111・文字#FFF・角丸4px */
  font: inherit; font-size: var(--fs-b); font-weight: 700; letter-spacing: 0.04em; cursor: pointer;
  -webkit-appearance: none; appearance: none; transition: background-color 0.2s;
}
.hs-form .hs-button:hover { background: #333; }
.hs-form .hs-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.form-foot { margin-top: 14px; font-size: var(--fs-xs); color: var(--muted); max-width: none; }

/* ===== ほかの窓口（営業・協業／LINE） ===== */
.other-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.other-way { display: flex; flex-direction: column; gap: 8px; padding: 32px; background: var(--paper); border-radius: var(--radius); }
.other-way h3 { font-size: var(--fs-l); font-weight: 600; }
.other-way p { font-size: var(--fs-s); color: var(--ink-2); }
.other-way .textlink { margin-top: auto; padding-top: 12px; }

/* ===== 資料の一覧 ===== */
.docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; }
.doc { display: flex; flex-direction: column; text-decoration: none; }
.doc-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; padding: 6%; background: var(--paper); border-radius: var(--radius); overflow: hidden; }
.doc-img img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.4s ease-out; }
.doc:hover .doc-img img { transform: scale(1.03); }
.doc-body { padding-top: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.doc-body h3 { font-size: var(--fs-l); font-weight: 600; line-height: 1.5; }
.doc-body p { font-size: var(--fs-s); color: var(--ink-2); }
.doc-body .textlink { margin-top: auto; padding-top: 8px; }
.doc:hover .textlink::after { transform: translateX(4px); }
.docs.single { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ===== 資料の詳細：左に中身・右にフォーム ===== */
.dl-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); grid-template-areas: "cover form" "body form"; gap: 0 64px; align-items: start; }
.dl-cover { grid-area: cover; }
.dl-form { grid-area: form; position: sticky; top: 100px; }
.dl-body { grid-area: body; }
.dl-cover .doc-img { aspect-ratio: 16 / 9.5; padding: 7%; }
.dl-meta { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.dl-block { margin-top: 72px; }
.dl-block h2 { font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); font-weight: 500; }
.dl-block h2 + * { margin-top: 24px; }
.toc { display: grid; gap: 4px; counter-reset: toc; }
.toc > li { padding: 24px 28px; background: var(--paper); border-radius: var(--radius); counter-increment: toc; }
.toc > li > b { display: flex; gap: 14px; align-items: baseline; font-weight: 600; }
.toc > li > b::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-en); font-size: var(--fs-s); font-weight: 700; color: var(--muted); }
.toc ul { margin-top: 10px; padding-left: 2.1em; display: grid; gap: 4px; font-size: var(--fs-s); color: var(--ink-2); }
.toc ul li { padding-left: 1em; text-indent: -1em; }
.toc ul li::before { content: "・"; }
.pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pages figure { background: var(--paper); border-radius: var(--radius); overflow: hidden; }
.pages img { width: 100%; height: auto; }
.pages figcaption { padding: 10px 14px; font-size: var(--fs-xs); color: var(--muted); }
.fit { display: grid; gap: 8px; }
.fit .tile { background: var(--paper); }
.fit ul { margin-top: 12px; display: grid; gap: 8px; }
.fit li { display: flex; gap: 12px; font-size: var(--fs-s); color: var(--ink-2); }
.fit li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 0.75em; background: var(--ink); border-radius: 50%; }
.fit .alt li::before { background: #9a9a9a; }
.fit .alt p { margin-top: 12px; font-size: var(--fs-s); color: var(--ink-2); }

/* ===== 送信完了 ===== */
.thanks-flow .step h3 { font-size: var(--fs-b); }
.meet { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.meet-text p { color: var(--ink-2); }
.meet-text p + p { margin-top: 12px; }
.meet-text .btn { margin-top: 28px; }
.meet-embed { display: grid; place-items: center; min-height: 520px; padding: 24px; background: var(--white); border-radius: var(--radius); background-image: var(--grid); background-size: 32px 32px; text-align: center; }
.meet-embed p { font-size: var(--fs-xs); color: var(--muted); }

/* ===== 文章ページ（プライバシーポリシー） ===== */
.prose { max-width: 41em; }
.prose > p { color: var(--ink-2); max-width: none; }
.prose .clause { margin-top: 56px; }
.prose .clause h2 { display: flex; gap: 14px; align-items: baseline; font-size: var(--fs-l); font-weight: 600; line-height: 1.5; }
.prose .clause h2 .no { flex: none; font-family: var(--font-en); font-size: var(--fs-b); font-weight: 700; color: var(--muted); min-width: 1.6em; }
.prose .clause p { margin-top: 14px; padding-left: calc(1.6em + 14px); color: var(--ink-2); max-width: none; }
.prose .clause p a { color: var(--ink); font-weight: 600; text-underline-offset: 4px; word-break: break-all; }
.prose .contact-box { margin-top: 16px; margin-left: calc(1.6em + 14px); padding: 24px 28px; background: var(--paper); border-radius: var(--radius); font-size: var(--fs-s); }
.prose .contact-box dt { font-size: var(--fs-xs); color: var(--muted); }
.prose .contact-box dd + dt { margin-top: 10px; }
.prose .contact-box a { font-weight: 600; text-underline-offset: 4px; }

@media (max-width: 1024px) {
  .form-layout, .meet { grid-template-columns: 1fr; gap: 48px; }
  .form-layout > .form-panel { order: -1; }  /* 狭い画面ではフォームを先に */
  .docs, .docs.single { grid-template-columns: 1fr 1fr; }
  .dl-layout { grid-template-columns: 1fr; grid-template-areas: "cover" "form" "body"; }
  .dl-form { position: static; margin-top: 32px; }
}
@media (max-width: 640px) {
  .page-hero.compact { padding-bottom: 48px; }
  .form-panel { padding: 28px 20px; margin-inline: -8px; }
  .hs-form { gap: 24px; }
  .hs-form fieldset.form-columns-2, .hs-form .multi-container { grid-template-columns: 1fr; gap: 24px; }
  .hs-form .multi-container { gap: 4px; }
  .before-logos ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .before-logos li { height: 48px; padding: 0 8px; }
  .other-ways, .docs, .docs.single, .pages { grid-template-columns: 1fr; }
  .other-way { padding: 24px 20px; }
  .docs { gap: 40px; }
  .dl-block { margin-top: 56px; }
  .toc > li { padding: 20px; }
  .toc ul { padding-left: 0; }
  .meet-embed { min-height: 360px; }
  .prose .clause { margin-top: 44px; }
  .prose .clause h2 { font-size: var(--fs-b); gap: 10px; }
  .prose .clause p { padding-left: 0; }
  .prose .contact-box { margin-left: 0; padding: 20px; }
}

/* グレーの面に置くフォーム（入力欄は白） */
.form-panel.paper { background: var(--paper); }
.form-panel.paper .hs-input:not([type="radio"]):not([type="checkbox"]) { background: var(--white); }
.form-panel.paper .hs-input:hover:not([type="radio"]):not([type="checkbox"]) { background: #fafafa; }
.form-panel.paper .hs-form-required::after { background: var(--white); }
.form-panel.paper .legal-consent-container { background: var(--white); }

/* 見出しを単語の途中で折らない */
.nw { white-space: nowrap; }

/* HubSpot へ送る仕組み（hs-form.js）用 */
.hs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hs-status { margin-top: 12px; font-size: var(--fs-xs); color: var(--ink-2); }
.hs-status:empty { display: none; }
.hs-payload { margin: 12px 0 0; padding: 16px; max-height: 320px; overflow: auto; background: var(--paper); border-radius: var(--radius); font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; }
.hs-button[disabled] { opacity: 0.6; cursor: wait; }

/* thanks-download（相談の案内の箇条書き） */
.meet-text .meet-points { margin-top: 16px; display: grid; gap: 8px; }
.meet-text .meet-points li { display: flex; gap: 12px; color: var(--ink-2); }
.meet-text .meet-points li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 0.75em; background: var(--ink); border-radius: 50%; }
.meet-text .meet-note { margin-top: 16px; font-size: var(--fs-xs); color: var(--muted); }

/* security-policy（制定日と署名） */
.prose .policy-sign { margin-top: 56px; padding-left: calc(1.6em + 14px); display: grid; gap: 4px; font-size: var(--fs-s); color: var(--ink-2); }
.prose .policy-sign b { margin-left: 12px; font-size: var(--fs-b); font-weight: 600; color: var(--ink); }
@media (max-width: 640px) { .prose .policy-sign { margin-top: 44px; padding-left: 0; } }

/* document-*（資料の詳細：本文の段落・支援実績のロゴ） */
.dl-text { display: grid; gap: 12px; padding: 28px; background: var(--paper); border-radius: var(--radius); }
.dl-text p { color: var(--ink-2); max-width: none; }
.dl-logos ul { margin-top: 0; }
.dl-logos li { background: var(--paper); height: 72px; }
.dl-logos img { max-height: 28px; }
@media (max-width: 640px) { .dl-text { padding: 22px 20px; } .dl-logos li { height: 56px; } .dl-logos img { max-height: 22px; } }

/* events・events-site-renewal（イベント） */
.doc-img.photo { padding: 0; aspect-ratio: 16 / 9; }
.doc-img.photo img { object-fit: cover; }
.ev-visual { align-self: center; min-height: 0; border-radius: var(--radius); overflow: hidden; }
.ev-visual img { display: block; width: 100%; height: auto; }
.ev-intro { max-width: 41em; display: grid; gap: 14px; }
.ev-intro p { color: var(--ink-2); max-width: none; }
.ev-intro .ev-date { font-family: var(--font-en); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.ev-gains .feature ul { margin-top: 14px; display: grid; gap: 8px; }
.ev-gains .feature li { display: flex; gap: 12px; font-size: var(--fs-s); color: var(--ink-2); }
.ev-gains .feature li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 0.75em; background: var(--ink); border-radius: 50%; }
.ev-outline { display: grid; gap: 4px; max-width: 56rem; }
.ev-outline div { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 16px; padding: 22px 28px; background: var(--white); border-radius: var(--radius); }
.ev-outline dt { font-size: var(--fs-s); color: var(--muted); }
.ev-outline dd { font-weight: 600; }
.meet-text .sec-head { margin-bottom: 24px; }
@media (max-width: 640px) { .ev-outline div { grid-template-columns: 1fr; gap: 4px; padding: 18px 20px; } }

/* HubSpot の日程予約カレンダー（埋め込み） */
.meet-embed.is-live { display: block; min-height: 0; padding: 0; background: none; text-align: left; }
.meet-embed.is-live .meetings-iframe-container { width: 100%; min-height: 640px; }