/* =========================================================
   下層ページ（お問い合わせ・確認・完了・プライバシーポリシー・404）
   デザインデータなし。LP のトーン（青地 + 白い山なり・緑のボタン・目）で自作。
   1rem = デザイン 10px（PC 1920 / TB 768 / SP 393 基準で拡縮。html の font-size は style.css / mobile.css）
   フォームの文字だけは小さくなりすぎないよう下限を付ける。
   ========================================================= */

.page-sub { overflow: clip; }
.sub { position: relative; display: block; }

/* ---------- 見出し（青地） ---------- */
.sub-hero { position: relative; height: 58rem; color: var(--white); overflow: hidden; }
.sub-hero-in { position: absolute; left: 0; right: 0; top: 23rem; text-align: center; z-index: 2; }
.sub-hero .label { display: flex; justify-content: center; }
.sub-hero .label .tsvg { height: 2.6rem; width: auto; }
.sub-hero-en { font-family: var(--f-en); color: var(--yellow); font-variation-settings: "wdth" 125; font-stretch: 125%; font-weight: 600; font-size: 2.6rem; line-height: 1; letter-spacing: .02em; }
.sub-hero-title { margin-top: 1.6rem; font-size: 4.8rem; font-weight: 800; line-height: 1.3; }
.sub-hero .eye { z-index: 2; }

/* ---------- 本文（白い山なり。LP のシステム開発などと同じ .hill の弧） ---------- */
.sub-body { position: relative; margin-top: -15.8rem; padding: 20.8rem 0 16rem; --hill: var(--white); z-index: 3; }   /* 弧の高さ（15.8rem）だけヒーローに重ねる */
.sub-in { width: 112rem; margin: 0 auto; }
.sub-lead { margin: 6.4rem auto 0; max-width: 80rem; text-wrap: pretty; font-size: max(1.7rem, 14px); font-weight: 400; line-height: 2; text-align: center; color: var(--ink); }

/* ---------- 手順（入力 → 確認 → 完了） ---------- */
.csteps { display: flex; justify-content: center; gap: 0; counter-reset: s; }
.csteps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; width: 20rem; color: #9aa7bd; }
.csteps li + li::before { content: ""; position: absolute; top: 3.2rem; right: calc(50% + 4.4rem); width: calc(100% - 8.8rem); border-top: .3rem dotted currentColor; }
.csteps-n { display: flex; align-items: center; justify-content: center; width: 6.4rem; height: 6.4rem; border-radius: 50%; border: .2rem solid currentColor; font-family: var(--f-en); font-variation-settings: "wdth" 125; font-stretch: 125%; font-weight: 800; font-size: 1.8rem; line-height: 1; background: var(--white); }
.csteps-l { font-size: max(1.5rem, 12px); font-weight: 800; line-height: 1; }
.csteps .is-done, .csteps .is-current { color: var(--blue); }
.csteps .is-current .csteps-n { background: var(--blue); color: var(--white); border-color: var(--blue); }

/* ---------- フォーム ---------- */
.mform-wrap { margin-top: 6.4rem; }
.mform .hidden-fields-container { display: none; }   /* CF7 の隠しフィールドの入れ物（枠線が出る） */
.mform-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* スパム対策のハニーポット（人には見せない） */
.mform-rows { margin: 0; border-top: .1rem solid #dfe6f3; }
.mform-row { display: grid; grid-template-columns: 30rem 1fr; gap: 4rem; align-items: start; padding: 3.2rem 0; border-bottom: .1rem solid #dfe6f3; }
.mform-label { display: flex; align-items: center; gap: 1.2rem; min-height: 6.4rem; margin: 0; font-size: max(1.7rem, 14px); font-weight: 800; line-height: 1.5; color: var(--ink); }
.mform-req, .mform-opt { flex: none; display: inline-flex; align-items: center; height: 2.4rem; padding: 0 1rem; border-radius: 10rem; font-size: max(1.2rem, 11px); font-weight: 800; line-height: 1; }
.mform-req { background: var(--blue); color: var(--white); }
.mform-opt { background: #eef2f8; color: #6b778c; }
.mform-field { min-width: 0; margin: 0; }
.mform .wpcf7-form-control-wrap { display: block; }
.mform input[type="text"], .mform input[type="email"], .mform input[type="tel"], .mform textarea {
  display: block; width: 100%; height: 6.4rem; padding: 0 2.4rem; border: .2rem solid #dfe6f3; border-radius: 1.2rem; background: #f6f8fc;
  font-family: var(--f-jp); font-size: max(1.7rem, 16px); font-weight: 400; line-height: 1.6; color: var(--ink);
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease; -webkit-appearance: none; appearance: none;
}
.mform textarea { height: 24rem; padding: 2rem 2.4rem; resize: vertical; }
.mform ::placeholder { color: #a9b3c4; }
.mform input:focus, .mform textarea:focus { outline: none; border-color: var(--blue); background: var(--white); box-shadow: 0 0 0 .4rem rgba(0, 102, 255, .14); }
.mform .wpcf7-not-valid { border-color: var(--red) !important; background: #fff6f4; }
.mform .wpcf7-checkbox.wpcf7-not-valid { background: none; }   /* チップの入れ物は塗らない（チップの枠だけ赤に） */
.mform .wpcf7-checkbox.wpcf7-not-valid label { border-color: var(--red); }
.mform .wpcf7-not-valid-tip { display: block; margin-top: 1rem; font-size: max(1.4rem, 12px); font-weight: 600; color: var(--red-d); }

/* ご相談内容: 丸いチップ */
.mform-chips .wpcf7-checkbox, .mform-chips.wpcf7-checkbox { display: inline-grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }   /* 3 つを同じ幅（いちばん長いものに合わせる） */
.mform-chips .wpcf7-list-item, .wpcf7-checkbox.mform-chips .wpcf7-list-item { margin: 0; }
.mform-chips .wpcf7-list-item label { position: relative; display: inline-flex; align-items: center; gap: 1rem; height: 6.4rem; padding: 0 2.8rem 0 2.2rem; border: .2rem solid #dfe6f3; border-radius: 10rem; background: #f6f8fc; font-size: max(1.6rem, 14px); font-weight: 800; line-height: 1; color: var(--ink); cursor: pointer; transition: background-color .25s ease, border-color .25s ease, color .25s ease; width: 100%; justify-content: center; }
.mform-chips .wpcf7-list-item label:hover { border-color: var(--blue); }
.mform-chips input { position: absolute; opacity: 0; pointer-events: none; }
.mform-chips .wpcf7-list-item-label::before { content: ""; display: inline-block; width: 2rem; height: 2rem; margin-right: 1rem; border: .2rem solid #b9c4d6; border-radius: 50%; background: var(--white); vertical-align: -.35rem; transition: border-color .25s ease, background-color .25s ease; }
.mform-chips label:has(input:checked) { background: var(--blue); border-color: var(--blue); color: var(--white); }
.mform-chips label:has(input:checked) .wpcf7-list-item-label::before { border-color: var(--white); background: var(--yellow); }
.mform-chips label:has(input:focus-visible) { box-shadow: 0 0 0 .4rem rgba(0, 102, 255, .25); }

/* 同意 */
.mform-agree { margin-top: 4.8rem; text-align: center; font-size: max(1.6rem, 14px); font-weight: 600; }
.mform-agree .wpcf7-list-item { margin: 0; }
.mform-agree label { display: inline-flex; align-items: center; gap: 1.2rem; cursor: pointer; }
.mform-agree input[type="checkbox"] { width: 2.4rem; height: 2.4rem; min-width: 16px; min-height: 16px; margin: 0; accent-color: var(--blue); cursor: pointer; }
.mform-agree a { color: var(--blue); background: linear-gradient(currentColor, currentColor) 0 100% / 100% .1rem no-repeat; transition: background-size .35s var(--ease-out); }
.mform-agree a:hover { background-size: 0 .1rem; background-position: 100% 100%; }

/* ボタン（LP の「無料相談はこちらから」と同じ: 緑 → 青の塗りが流れ込む + 矢印） */
.mform-actions { display: flex; justify-content: center; gap: 2.4rem; margin-top: 4.8rem; }
.mform-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 1.6rem; width: 36rem; height: 8rem; padding: 0 3.2rem; border: 0; border-radius: 1.6rem; background: var(--green); color: var(--white); font-family: var(--f-jp); font-size: max(2rem, 15px); font-weight: 800; line-height: 1; cursor: pointer; overflow: hidden; isolation: isolate; }
.mform-btn::before { content: ""; position: absolute; inset: 0; background: var(--blue); transform: translateX(-101%); transition: transform .5s var(--ease-out); z-index: -1; }
.mform-btn:hover::before, .mform-btn:focus-visible::before { transform: translateX(0); }
.mform-btn img { width: 1.8rem; height: 1.6rem; min-width: 12px; min-height: 11px; filter: brightness(0) invert(1); }   /* 矢印は白（元の SVG は青） */
.mform-btn:hover img { animation: arrow-out-in .6s ease-in-out; }
.mform-btn-back { background: var(--white); color: var(--blue); border: .2rem solid #dfe6f3; }
.mform-btn-back::before { background: #eef3ff; }
.mform-btn[disabled], .mform .wpcf7-form.submitting .mform-btn { opacity: .6; pointer-events: none; }

/* CF7 の送信結果メッセージ */
.mform .wpcf7-response-output { margin: 3.2rem 0 0 !important; padding: 1.6rem 2.4rem !important; border: .2rem solid var(--red) !important; border-radius: 1.2rem; font-size: max(1.5rem, 13px); font-weight: 600; text-align: center; color: var(--red-d); }
.mform .wpcf7-form.sent .wpcf7-response-output { border-color: var(--green) !important; color: var(--green); }
.mform .wpcf7-form.init .wpcf7-response-output, .mform .wpcf7-response-output:empty { display: none; }
.mform .wpcf7-spinner { display: none; }
.screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* 確認画面 */
.mform-confirm .mform-label { min-height: 0; }
.mform-confirm + .mform-actions { margin-top: 8rem; }   /* 確認画面はボタンの上を広めに */
.mform-value { font-size: max(1.7rem, 14px); font-weight: 400; line-height: 1.8; white-space: pre-wrap; word-break: break-word; color: var(--ink); }

/* 確認ページを直接開いた時 */
.mform-expired { display: flex; flex-direction: column; align-items: center; gap: 4rem; padding: 2.4rem 0; text-align: center; font-size: max(1.7rem, 14px); font-weight: 400; line-height: 2; }
.sub-in:has(.mform-expired) .sub-lead { display: none; }   /* 「入力内容をご確認ください」は出さない */

.mform-error { padding: 3.2rem; border-radius: 1.2rem; background: #fff6f4; font-size: max(1.6rem, 14px); line-height: 1.8; color: var(--red-d); text-align: center; }

/* ---------- 完了 ---------- */
.thanks { display: flex; flex-direction: column; align-items: center; margin-top: 6.4rem; text-align: center; }
.thanks-title { font-size: 4rem; font-weight: 800; line-height: 1.4; color: var(--ink); }
.thanks-text { margin-top: 3.2rem; max-width: 80rem; text-wrap: pretty; font-size: max(1.7rem, 14px); font-weight: 400; line-height: 2; }
.thanks .mform-btn { margin-top: 5.6rem; }

/* ---------- 本文（プライバシーポリシーなど） ---------- */
.prose { max-width: 96rem; margin: 0 auto; font-size: max(1.7rem, 14px); font-weight: 400; line-height: 2; color: var(--ink); }
.prose > * + * { margin-top: 2.4rem; }
.prose h2 { margin-top: 6.4rem; padding-bottom: 1.6rem; border-bottom: .2rem solid var(--blue); font-size: max(2.6rem, 18px); font-weight: 800; line-height: 1.5; }
.prose h3 { margin-top: 4rem; font-size: max(2rem, 16px); font-weight: 800; line-height: 1.6; }
.prose ul, .prose ol { padding-left: 1.5em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: .2em; }

/* ---------- フッター（LP では Contact の白い裾に載っている。下層は白地を自前で） ---------- */
.sub-foot { position: relative; padding-top: 4rem; background: var(--white); z-index: 3; }
.sub-foot .footer { position: relative; }

/* =========================================================
   タブレット以下（mobile.css と同じ区切り）
   ========================================================= */
@media (max-width: 1199px) {
  .sub-hero { height: 46rem; }
  .sub-hero-in { top: 24.4rem; }
  .sub-hero-title { font-size: 3.6rem; }
  /* 大きさは mobile.css の .eye（--eye-w）、間隔は .svc > .eye と同じ式 */
  .sub-hero .eye:first-of-type { left: calc(50% - var(--eye-w) * 3.235); top: 14.6rem; }
  .sub-hero .eye:nth-of-type(2) { left: calc(50% + var(--eye-w) * 2.235); top: 14.6rem; }
  .sub-body { margin-top: calc(var(--hill-arc) * -1); padding: calc(var(--hill-arc) + 6rem) 0 12rem; }
  .sub-in { width: auto; margin: 0 4rem; }
  .mform-row { grid-template-columns: 20rem 1fr; gap: 2.4rem; }
  .mform-btn { width: 32rem; height: 6.8rem; border-radius: 1.4rem; font-size: 1.8rem; }   /* TB は PC より一回り小さく */
  /* ご相談内容: 3 つが 1 行に入るよう全体を小さく（文字・丸・余白） */
  .mform-chips.wpcf7-checkbox, .mform-chips .wpcf7-checkbox { display: grid; gap: .8rem; }   /* TB は欄の幅いっぱいを 3 等分 */
  .mform-chips .wpcf7-list-item label { height: 5.2rem; padding: 0 1.1rem 0 .9rem; font-size: 1.65rem; white-space: nowrap; }
  .mform-chips .wpcf7-list-item-label::before { width: 1.4rem; height: 1.4rem; margin-right: .5rem; border-width: .15rem; vertical-align: -.2rem; }
  .sub-foot { padding-top: 0; }
}

@media (max-width: 767px) {
  .sub-hero { height: 31rem; }
  .sub-hero-in { top: 17.4rem; }
  .sub-hero .label .tsvg { height: 1.8rem; }
  .sub-hero-en { font-size: 1.8rem; }
  .sub-hero-title { margin-top: 1.2rem; font-size: 2.6rem; }
  .sub-hero .eye { scale: .82; transform-origin: 50% 50%; }   /* SP はシステム開発などと同じく 82%・同じ間隔 */
  .sub-hero .eye:first-of-type { left: calc(50% - var(--eye-w) * 2.735 * .82 - var(--eye-w) / 2); top: 9.6rem; }
  .sub-hero .eye:nth-of-type(2) { left: calc(50% + var(--eye-w) * 2.735 * .82 - var(--eye-w) / 2); top: 9.6rem; }
  .sub-body { padding: calc(var(--hill-arc) + 4rem) 0 8rem; }
  .sub-in { margin: 0 var(--gx, 2rem); }
  .sub-lead { margin-top: 4rem; font-size: 1.5rem; text-align: left; }
  .csteps li { width: 10rem; gap: .8rem; }
  .csteps li + li::before { top: 2.2rem; right: calc(50% + 3rem); width: calc(100% - 6rem); }
  .csteps-n { width: 4.4rem; height: 4.4rem; font-size: 1.4rem; }
  .csteps-l { font-size: 1.2rem; }
  .mform-wrap { margin-top: 4rem; }
  .mform-row { display: block; padding: 2.4rem 0; }
  .mform-label { min-height: 0; margin-bottom: 1.2rem; font-size: 1.5rem; }
  .mform input[type="text"], .mform input[type="email"], .mform input[type="tel"], .mform textarea { height: 5.2rem; padding: 0 1.6rem; font-size: 1.6rem; border-radius: 1rem; }
  .mform textarea { height: 20rem; padding: 1.4rem 1.6rem; }
  /* ご相談内容: SP は縦並び（幅いっぱい） */
  .mform-chips .wpcf7-checkbox, .mform-chips.wpcf7-checkbox { display: grid; grid-template-columns: 1fr; gap: .8rem; }
  .mform-chips .wpcf7-list-item label { height: 4.8rem; padding: 0 1.6rem; font-size: 1.5rem; justify-content: flex-start; }
  .mform-chips .wpcf7-list-item-label::before { width: 1.6rem; height: 1.6rem; margin-right: .8rem; vertical-align: -.25rem; }
  .mform-agree { margin-top: 3.2rem; font-size: 1.4rem; }
  .mform-actions { flex-direction: column-reverse; align-items: stretch; gap: 1.2rem; margin-top: 3.2rem; }
  .mform-btn { width: 100%; height: 6.4rem; border-radius: 1.4rem; font-size: 1.6rem; }
  .mform-value { font-size: 1.5rem; }
  .mform-confirm + .mform-actions { margin-top: 4.8rem; }
  .thanks { margin-top: 4rem; }
  .thanks-title { font-size: 2.2rem; }
  .thanks-text { font-size: 1.4rem; text-align: left; }
  .thanks-text br { display: none; }   /* SP は改行なしで流す */
  .thanks .mform-btn { margin-top: 4rem; }
  .prose { font-size: 1.4rem; }
  .prose h2 { margin-top: 4.8rem; font-size: 1.8rem; }
}